CODEWITHSUNDEEP
javascriptreactjsnpmcreate-react-appwebpack-dev-server
Tuomas Toivonen
Tuomas Toivonen

Reputation: 23522

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

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?

Upvotes: 6

Views: 17555

Answers (3)

Paulo
Paulo

Reputation: 1498

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>

Upvotes: 0

Nithin Thampi
Nithin Thampi

Reputation: 3689

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

Upvotes: 3

epanalepsis
epanalepsis

Reputation: 935

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

Upvotes: 3

Related Questions