How should I configure create-react-app to serve a

问题:

I have classic web application rendered on server. I want to create admin panel as single page application in React. I want to server admin panel from https://smyapp.example.com/admin/. I try to use create-react-app but it assumes that i serve SPA from root URL. How should I configure create-react-app to serve app from "admin" subdirectory? In documentation I found "homepage" property but if I properly understand it requires complete url. I can't give complete url because my app is deployed in few environments.

回答1:

You should add entry in package.json for this.

Add a key "homepage": "your-subfolder/" in your package.json All static files will be loaded from "your-subfolder"

If there is no subfolder and you need to load from same folder you need to add the path as "./"

"homepage": "./"

From here

回答2:

Maybe you could use react-router and its relative basename parameter which allow you to serve your app from a subdirectory.

basenameis the base URL for all locations. If your app is served from a sub-directory on your server, you’ll want to set this to the sub-directory. A properly formatted basename should have a leading slash, but no trailing slash.

For instance :

<BrowserRouter basename="/calendar"/>

So <Link to="/today"/> will render <a href="/calendar/today">

See : https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string

Have a nice day!

回答3:

put in package.json something like this:

"homepage" : "http://localhost:3000/subfolder",

and work fine on any public or local server. Of course, subfolder must be your folder.

回答4:

For create-react-app v2 and react-router v4, I used the following combo to serve a production (staging, uat, etc) app under "/app":

package.json:

"homepage": "/app"

Then in the app entry point:

 <BrowserRouter basename={process.env.PUBLIC_URL}>
  {/* other components */}
 </BrowserRouter>

And everything "just works" across both local-dev and deployed environments. HTH!

回答5:

You can specify the public path in your webpack configuration along with use of react route basepath.

Link to Public Path: https://webpack.js.org/guides/public-path/

Note that public path will be both leading and trailing slashes / to be valid.