I'm using Create-react-app with npm start command 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?
Add a comment
|
3 Answers
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
1 Comment
Miroslav Nedyalkov
The environment variable pointed in the answer does not work. I found the
PUBLIC_URL in the tool docs and it seems to do the job.You can specify the path by adding: "homepage": "http://mywebsite.com/relativepath" to your package.json file according to the documentation found here:
https://create-react-app.dev/docs/deployment/#building-for-relative-paths
Comments
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>
