javascript - Create-react-app: how to define context-path of development server - Stack Overflow

admin管理员组

文章数量:1287607

I'm using Create-react-app with npm start mand to serve my application in the development server. By default the application is served from https://localhost:3000/. However my application uses cookies which requires specific context path. How do I serve the application from https://localhost:3000/app/ instead?

I'm using Create-react-app with npm start mand to serve my application in the development server. By default the application is served from https://localhost:3000/. However my application uses cookies which requires specific context path. How do I serve the application from https://localhost:3000/app/ instead?

• javascript
• reactjs
• npm
• create-react-app
• webpack-dev-server

Share Improve this question Follow asked Oct 23, 2019 at 7:56 Tuomas ToivonenTuomas Toivonen 23.5k5151 gold badges144144 silver badges243243 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You have a few options here.

Production Mode

Set the environment variable PUBLIC_PATH to /app/

or

As mentioned in the other answer, use homepage field in package.json

Development Mode

The config is more of hardcoded into the app. You need to eject the app first to make any edits.

Step 1

npm run eject

Step 2

In config/webpack.config.js, Find the below section (Somewhere around line 67 - 68)

const publicPath = isEnvProduction
    ? paths.servedPath
    : isEnvDevelopment && '/';

and change to

 const publicPath = isEnvProduction
        ? paths.servedPath
        : isEnvDevelopment && '/app/';

Step 3

In config/webpackDevServer.config.js, find the below section (Somewhere around line 60 - 65)

 // It is important to tell WebpackDevServer to use the same "root" path
 // as we specified in the config. In development, we always serve from /.
 publicPath: '/',

And change to

publicPath: '/app',

Step 4

npm start

You can specify the path by adding: "homepage": "http://mywebsite./relativepath" to your package.json file according to the documentation found here:

https://create-react-app.dev/docs/deployment/#building-for-relative-paths

I've already solved this problem with:

<BrowserRouter basename="/app" />
<Link to="/test" />

With this solution, that Link path is /app/test.

Another example:

<BrowserRouter basename="/app">
    <Routes>
        <Route element={<Home />} path="/" exact />
        <Route element={<Test />} path="/test" />
    </Routes>
</BrowserRouter>

本文标签： javascriptCreatereactapp how to define contextpath of development serverStack Overflow