How to update the %PUBLIC_URL% in create-react-app (CRA)?

Steps to update the %PUBLIC_URL% in create react app a.k.a. CRA

• Create a dot.env file i.e. create a file, save it with the name env.local
• Similarly, create other files such as env.dev, env.prod (or whichever environment you want to point to)
• Go to your package.json
• Add(or update) the following lines

{
   "scripts":{
      ..
      "start":"env-cmd -f ./.env.dev react-scripts start",
      "build":"env-cmd -f ./.env.dev react-scripts build",
      "start-prod":"env-cmd -f ./.env.prod react-scripts start",
      "build-prod":"env-cmd -f ./.env.prod react-scripts build"
      ..
   }
}

Now, once that’s done, go to those .env files and update your production URL

PUBLIC_URL = "https://my.fantasticdomain.com"

Make sure to not to add any trailing / slashes. Because %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.

Now build.

You will see that in the output folder, the reference to all %PUBLIC_URL% in index.html has been changed to whatever you specified in the dot env file. It wil also set the `process.env.PUBLIC_URL` in JavaScript.

Originally published at http://bigfatsoftwareinc.wordpress.com on December 30, 2020.