How to change production build static folder path in a React project?

Question

I have a React project on which I ran npm run build and it made a production build for me. The problem is that it gives me the following stylesheet injected into the index.html

<script src="./static/js/5.a4bfdba9.chunk.js"></script>

As you can see, the path set is ./static/js/

But I want the path to be set to ./static/dashboard/js/5.a4bfdba9.chunk.js

I can't figure out where or what to change to ensure every time I run the build, it takes the path specified by me instead of the default path?

Note: I looked at "homepage": "." attribute in package.json but changing this will only append a path before /static/js/

Answer 1

Update:

You will need to update the webpack config to achieve this. There are multiple ways to do that:

1. react-scripts eject (not recommended)
2. patch-package
3. react-app-rewired

I am providing steps for patch-package .
You need to make changes to the file config/webpack.config.js of react-scripts package. Here is a git diff of changes you need to make:

diff --git a/node_modules/react-scripts/config/webpack.config.js b/node_modules/react-scripts/config/webpack.config.js
index 26c2a65..ad29fbd 100644
--- a/node_modules/react-scripts/config/webpack.config.js
+++ b/node_modules/react-scripts/config/webpack.config.js
@@ -212,13 +212,13 @@ module.exports = function (webpackEnv) {
       // There will be one main bundle, and one file per asynchronous chunk.
       // In development, it does not produce real files.
       filename: isEnvProduction
-        ? 'static/js/[name].[contenthash:8].js'
+        ? 'static/dashboard/js/[name].[contenthash:8].js'
         : isEnvDevelopment && 'static/js/bundle.js',
       // TODO: remove this when upgrading to webpack 5
       futureEmitAssets: true,
       // There are also additional JS chunk files if you use code splitting.
       chunkFilename: isEnvProduction
-        ? 'static/js/[name].[contenthash:8].chunk.js'
+        ? 'static/dashboard/js/[name].[contenthash:8].chunk.js'
         : isEnvDevelopment && 'static/js/[name].chunk.js',
       // webpack uses `publicPath` to determine where the app is being served from.
       // It requires a trailing slash, or the file assets will get an incorrect path.
@@ -676,8 +676,8 @@ module.exports = function (webpackEnv) {
         new MiniCssExtractPlugin({
           // Options similar to the same options in webpackOptions.output
           // both options are optional
-          filename: 'static/css/[name].[contenthash:8].css',
-          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
+          filename: 'static/dashboard/css/[name].[contenthash:8].css',
+          chunkFilename: 'static/dashboard/css/[name].[contenthash:8].chunk.css',
         }),
       // Generate an asset manifest file with the following content:
       // - "files" key: Mapping of all asset filenames to their corresponding

Now if you make these changes to node_modules/react-scripts/config/webpack.config.js you will get the files outputted to your desired folder and index.html will have correct paths too.
But the changes in node_modules will be overwritten if you install/uninstall any package. To persist those changes you can use patch-package , which will write your changes in node_modules after install.

Here are the steps to setup patch-package, you can read their readme file for more details:

1. yarn add patch-package postinstall-postinstall

2. Add this in scripts section of package.json:
   "postinstall": "patch-package"

3. run patch-package to create a.patch file:
   npx patch-package some-package

4. commit the patch file to share the fix with your team
   git add patches/react-scripts+4.0.3.patch
git commit -m "change output dir structure in react-scripts"

I have created a git repository too for your reference.

Old Answer:

Warning: won't work for moving contents of build folder. Can move the whole build folder only. eg: mv build/ dist/

Changing settings of create react app so that it outputs to different folder will be very complicated. But you can move the files after build completes, which is much simple.

In your package.json you have:

"scripts": {
  "build": "react-scripts build"

You can add another script called postbuild that does something after the build and will be called by npm/Yarn automatically.

"postbuild": "mv build/ dist/"

This should move the files to different folder.

Answer 2

In case anyone else runs into a similar problem. My issue was that the project name was being prepended to the static path.

So the path was /{project-name}/static/5.a4bfdba9.chunk.js instead of /static/5.a4bfdba9.chunk.js

Following the solution provided I came across a note specifying the "public path" was inferred from homepage. In the package.json my homepage url included the project name.

Wrong "homepage": "https://{URL}.io/project-name"

Correct "homepage": "https://{URL}.io/project-name"

Removing the project name from this url resolved the issue.