Running in a subfolder

[ghost]

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]

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]

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

[supnate]

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]

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]

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]

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]

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

[iandanforth]

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

[iandanforth]

@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]

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

[iandanforth]

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

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

[mscottford]

Thanks!

[supnate]

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]

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

• Create a .env file and add the following line: PUBLIC_URL=/subfolder

• Go to the src/common/routeConfig.js file and edit the path parameter:

  const routes = [{
  path: '/subfolder', // it was '/' 
  component: App,
  childRoutes: [
  ...childRoutes,
  { path: '*', name: 'Page not found', component: PageNotFound },
  ].filter(r => r.component || (r.childRoutes && r.childRoutes.length > 0)),
  }];

  After you've done this, just make sure your routes don't start with slash.

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.