Create-react-app: Customize build folder

[lifeiscontent]

On a project I'm currently working on, we're using a file called BUILD that specifies build instructions for our microservices.

and due to Mac OS Sierra, case insensitivity is an issue, so being able to do something like

react-scripts build --path dist would be ideal in the package.json

is this possible currently?

[viankakrisna]

EDIT: this way is not supported and can be broken anytime there's an update to react-scripts

I wrote an article about that in here: https://medium.com/@viankakrisna/extending-create-react-app-webpack-config-c70828593c96#.o8n88apgl

basically, you can just create a webpack.config.js with this code inside it on your app root

process.env.NODE_ENV = 'production'
var reactScriptsConfig = require('react-scripts/config/webpack.config.prod')
module.exports = Object.assign({}, reactScriptsConfig, {
  output: Object.assign({}, reactScriptsConfig.output, {
     path: './dist'
  })
})

install webpack, and
add this code in your package.json

"build:dist": "webpack --progress",

voila! you customized the build path.

[gaearon]

Note that the above way of using Create React App is entirely unsupported and can break in any version.

[gaearon]

I imagine that we will allow this once we add some basic configuration. However this is not going to happen in the next few months. Some time during 2017, maybe.

[viankakrisna]

+1 to this. The above method is kinda hacky and I found it while debugging a production bug.

[gaearon]

Yea, it's definitely fine for one-off changes, just not something I'd recommend checking in.

[tuchk4]

btw. This feature is useful along with entry point customizing.

scripts: {
  "build": react-scripts build
  "build:lite": BUILD_DIR=build-lite ENTRY=src/lite.js react-scripts build
}

But anyway we should not expect such customizations in near future :)

https://github.com/facebookincubator/create-react-app/pull/1362#issuecomment-271284738

won’t be introducing more configuration on a case-by-case basis. We might add support for a configuration file at some point, but not now.

[gaearon]

Another direction we could explore here is making it easy for independent apps to share the same components and modules. This way you don't need multiple entries—you just have multiple apps.

[PascalPixel]

Seeing as Github Pages allows for using a /docs folder on the master branch, it would be handy to allow changing /build to /docs

[gaearon]

You can do this with something like:

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

in scripts in your package.json.

I think this is a good enough workaround for now, so I’ll close this request.

[taime]

This workaround doesn't help for debug mode, when I need web pack to watch files and put them into correct folder...
It's really very strange there is no official way to chose build folder

[gaearon]

The feature you are requesting (a watching mode producing a development bundle on disk) is different from the feature requested in this thread (different output folder).

They are somewhat related, but currently there is no support for writing development bundles to disk at all. You can voice support for it by searching for the respective issue and clicking a thumbs up or leaving a comment there. But this is not very relevant for this request, as we don’t currently support writing development bundle to disk in the first place.

I don’t think it is strange this feature is missing. Largely, it is intentional. It ensures most people have similar setups, and people can build tools (e.g. for deployment) assuming the same directory structure. I understand there are exceptions where this is necessary, but with the current feature set just adding a mv covers all cases. We can revisit this if/when we add the development disk writing watching mode.

[ghost]

Quick compatibility build script (also works on Windows):

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

[TimoSolo]

@franciscop-invast thanks, much simpler solution!
FYI I had to change it to
"build": "react-scripts build && rm -rf docs && mv build docs"
otherwise, after the first time it moves the build folder _into_ the docs folder instead of overwriting it.

[ghost]

@TimoSolo on Windows it gets built from scratch on our CI platform, while on Linux for my personal projects I ended up doing exactly the same thing!

[thomasdavis]

I'm currently wanting to build different apps based off config also and would like to specify an output directory for each. Going to use the unsupported webpack hack above for now.

[yoonwaiyan]

Unfortunately github user pages doesn't support /docs folder(only support index.html on master branch) so the suggested solutions doesn't work. I'm currently using webpack to configure the build manually. Is there any way create react app can support Github user/org pages?

[daggerok]

yarn global add -E mvy

package.json

{
  "scripts": {
    "build": "react-scripts build",
    "postbuild": "mvy build dist"
  }
}

---

Regards,

[frastlin]

for some reason in Windows, adding ~"build": "react-scripts build && move build docs"~ gives me an access denied when run with npm, but not manually.
I'm not 100% convinced the protection is enough gain for the trouble not having this custom build folder causes. A simple:
~react-scripts build docs~
should be enough for this.
It's 2018 and people are still having problems with this.

[daggerok]

@frastlin

It's not about 2018, it's all about windows and yes, people still having problems with it...

I was facing with similar windows issues (removing files from filesystem) not only with npm, same think in gradle / maven - while on unix systems like mac / linux everything is working as expected, windows files maybe in use, or at least windows think so.

---

Regards

[4dcoder]

Let's say your build directory is dist,

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

[omermecitoglu]

for Windows users:

edit your package.json

"build": "react-scripts build",
"postbuild": "RMDIR /S /Q C:\\deployment-directory && move build C:\\deployment-directory",

[mindhaq]

for Windows users:

edit your package.json

"build": "react-scripts build",
"postbuild": "RMDIR /S /Q C:\\your-project-directory && move build C:\\your-project-directory",

This has the potential for great disaster. I'm not sure what you mean with C:\\your-project-directory, but if anybody inserts the folder with the project source files, this would delete everything. All changes since the last push would be lost.

[omermecitoglu]

This has the potential for great disaster. I'm not sure what you mean with C:\\your-project-directory, but if anybody inserts the folder with the project source files, this would delete everything. All changes since the last push would be lost.

No, I meant the directory where you want your build should be at. and yeah, you're right, it has "the potential for great disaster" if you really don't know what you are doing. I renamed it to "deployment directory"

[changran52m]

Any plan here to have this feature still? @gaearon

[hperrin]

To anyone looking for a solution to this, here is mine:

Add module-alias:

npm install --save-dev module-alias

Create these two files in your root directory:

react-script-wrapper.js

require('module-alias/register');

require('react-scripts/scripts/build');

react-scripts-wrapper-paths.js

const paths = require('react-scripts/config/paths');
const path = require('path');

// Change 'dist' here to whatever build directory you need.
paths.appBuild = path.resolve(paths.appPath, 'dist');

module.exports = paths;

Add this section to your package.json:

"_moduleAliases": {
  "../config/paths" : "./react-scripts-wrapper-paths",
  "./paths" : "./react-scripts-wrapper-paths"
}

In your scripts section, change react-scripts build to node ./react-scripts-wrapper.js.

[bschlenk]

The move after build solution doesn’t work for me. My build system generates the build folder somewhere else and symlinks it into the project directory. It fills it with some important metadata files, and when CRA builds, it wipes the build folder clean, removing these metadata files. I need to be able to specify a sub folder of the build directory.

[bschlenk]

@hperrin Do you know if your solution is any less likely to break than the first solution suggested in this thread on updates to react-scripts?

[hperrin]

@bschlenk That's exactly what my build process does, which is why I can't use @gaearon's solution. I have no idea how likely @viankakrisna's or my solution is to break in the future. Both depend on internal configuration structure to react-scripts, which is not documented.