Use custom build output folder when using create-react-app

Question

Facebook provides a create-react-app command to build react apps. When we run npm run build, we see output in /build folder.

Answer 1

I had the scenario like want to rename the folder and change the build output location, and used below code in the package.json with the latest version

"build": "react-scripts build && mv build ../my_bundles"

Answer 2

Quick compatibility build script (also works on Windows):

"build": "react-scripts build && rm -rf docs && mv build docs"

Answer 3

Open Command Prompt inside your Application's source. Run the Command

npm run eject

Open your scripts/build.js file and add this at the beginning of the file after 'use strict' line

'use strict';
....
process.env.PUBLIC_URL = './' 
// Provide the current path
.....

Open your config/paths.js and modify the buildApp property in the exports object to your destination folder. (Here, I provide 'react-app-scss' as the destination folder)

module.exports = {
.....
appBuild: resolveApp('build/react-app-scss'),
.....
}

Run

npm run build

Note: Running Platform dependent scripts are not advisable

Answer 4

Create-react-app Version 2+ answer

For recent (> v2) versions of create-react-app (and possible older as well), add the following line to your package.json, then rebuild.

"homepage": "./"

You should now see the build/index.html will have relative links ./static/... instead of links to the server root: /static/....

Answer 5

For anyone still looking for an answer that works on both Linux and Windows:

Add this to the scripts section in package.json

"build": "react-scripts build && mv build ../docs || move build ../docs",

with ../docs is the relative folder you want to move the build folder to

Answer 6

webpack =>

renamed as build to dist

output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },