How to change the publicPath in Create React App

Question

I want to change the root or public path of my app from / to /something. How? This makes no sense based on the title.

I'm using React Router so this docs cannot be used as in to set the "homepage" in package.json.

I've added webpack.config.js to the root of the folder:

module.exports = {
    publicPath: '/v2/'
}

Restarted and my asset, manigest etc files are still pointing at the root. This example worked with Vuejs in vue.config.js. How to achieve this without ejecting? I got publicPath from here.

@Kousha Thanks. Done that but having this person's issue: https://stackoverflow.com/questions/44541165/webpack-error-bundle-js1-uncaught-syntaxerror-unexpected-token — Sylar, Nov 26 '19 at 06:54

score 2 · Accepted Answer · answered Mar 02 '22 at 19:04

in your root project add a file called .env, inside the file enter the path you want:

PUBLIC_URL=/v2/

this should fix your problem.

if you want to modify webpack.config.js in a react project created with npx create-react-app I suggest you to install craco https://www.npmjs.com/package/@craco/craco .

after the installation you need to replace some lines of your package.json

from

...
  "scripts": {
    "start": "react-script start",
    "build": "react-script build",
    "test": "react-script test",
    "eject": "react-script eject"
  },
...

to

...
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },
...

after that, in your root project add a file called craco.config.js

inside the file add the following code

module.exports = {
    configure: {
      output: {
        publicPath: '/v2/'
      }
    }
  }
}

How to change the publicPath in Create React App

1 Answers1