supnate / rekit

IDE and toolkit for building scalable web applications with React, Redux and React-router
http://rekit.js.org
MIT License
4.47k stars 258 forks source link

Running in a subfolder #105

Open ghost opened 6 years ago

ghost commented 6 years ago

I know the answer must to obvious but I can't load a rekit project onto my server using the contents from the "build" folder. With create-react-app, you include the "homepage" variable in the package.json file. Doing so doesn't work in rekit -- I get nothing to display. Don't laugh -- what am I doing wrong? Rekit seems like such a wonderful program.

supnate commented 6 years ago

Hi @idavidson12 , this is a very reasonable requirement. I should have documented it .

To run Rekit app in a sub folder, there're two points to consider:

  1. Set output.publicPath in webpack-config.js, that's just the homepage of cra. By default it's /static/, needs to be changed to /sub-folder/static/.
  2. React router part. By default it assumes the root path is '/' defined in src/common/routeConfig.js, it needs to be changed to path: '/sub-folder' as the root path. This is not covered by cra.

By this setting, you will also need to access /sub-folder at local development time. Or you could only apply the setting for build time according to process.env to keep local dev time running at root path '/'.

ghost commented 6 years ago

Thanks for the information, supnate. I still can 't get it to work, however. No error messages, but nothing is rendering.

supnate commented 6 years ago

What have you done? Can you run it locally with sub folder as root path like: http://localhost/prj-name ? BTW, github pages doesn't have an history fallback api that you need to access the sub path directly then navigate.

ghost commented 6 years ago

I made both changes you recommended, using HelpRequest as my sub-folder name and attempting to view the page at https://servername/HelpRequest and at http://localhost/HelpRequest (and also at http://localhost:6075/HelpRequest and http://localhost:6077/HelpRequest)

I'm afraid I didn't understand your third point, about applying the setting for build time according to process.env.

I very much appreciate your time.

supnate commented 6 years ago

There isn't enough information for me to help. Basically I need to know what's your webpack-config.js and routeConfig.js look like. But maybe something else caused the issue. If it's public may be I can take a look into your project if you push it to github.

ghost commented 6 years ago

What I've done is create a new project using --clean and then, with nothing but the default files contained in the project, attempted to build the project and load it onto a remote server. So I haven't made any changes to the code except what you advised.

mscottford commented 6 years ago

I ran into this as well. I had to also change the path in src/features/home/route.js.

iandanforth commented 6 years ago

@idavidson12 index.html uses absolute URLs. I had to remove the leading / from the favicon href and the script src.

iandanforth commented 6 years ago

@supnate FYI my usecase here was to deploy to a github pages site. I had to move to HashHistory over BrowserHistory to get things working there as well as modify build.js to strip leading slashes as I mentioned in the previous comment.

mscottford commented 6 years ago

@iandanforth Can you share a gist of the changes that you made to build.js?

iandanforth commented 6 years ago

@mscottford There is some noise, but the operative lines are 45, 46

https://gist.github.com/iandanforth/fdf989ab15d650042a1066396d0decab

mscottford commented 6 years ago

Thanks!

supnate commented 6 years ago

Thanks @iandanforth ! Yes for github pages it should use HashHistory instead. And it looks you are using the old boilerplate rather than the CRA template. For CRA based Rekit app, this should be easy by setting homepage parameter: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#building-for-relative-paths .

rosariogueli commented 5 years ago

It works for me, here the steps I've taken:

Also when restarting dev (npm start) make sure you go to your new root at http://localhost:6075/subfolder.

Finally, when building your project (npm run build) copy the build directory onto your server and rename it to 'subfolder'.

PS: make sure your .htaccess file has the correct configuration, for example I've done this in a PHP Zend environment and the Zend .htaccess file didn't let the subfolder react app to function, so I had to add a line inside .htaccess that when the url starts with /subfolder the request actually goes to /subfolder/index.html rather than the zend root file located at /index.php.

I hope this helps.

PPS: @supnate can't thank you enough for the amazing work you've done on Rekit.