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 :)

#1362 (comment)

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.

[shaneosullivan]

The suggested workaround is insufficient for me, and I'm curious how you'd solve my current setup.
I'm building a CRA app in it's own folder, as specified by the docs. The rest of the site will consist of PHP files for serving API requests, so far, so normal.

The folder structure looks like this:

/my-cra-app/build/index.html (et al)
/my-site/public/htdocs/index.php

I need by index.php to do cookie/login checking and to serve initial data. I could just copy the build folder over to the htdocs folder as static or something, then read the HTML into the PHP and stream it out, but then all the URLs to JS and CSS files would be wrong, since they're not pointing to the static folder.

Additionally, how does one inject initial data into the CRA HTML file? I could put an extra <script> tag to load the data, but that's an additional blocking script load that should be avoidable. How have people properly made CRA apps work with dynamically generated landing pages? Is the extra <script> the only solution to doing proper login/cookie checking or is there some templating solution available for the index.html file?

[gaearon]

You can add

  "postbuild": "node my-script.js"

to scripts in package.json and then move files anywhere in that script. For example it could copy everything in build/* and move those files to ../my-site/public/htdocs/.

but then all the URLs to JS and CSS files would be wrong, since they're not pointing to the static folder.

If you want to serve from /static, you can set homepage in package.json to http://mywebsite.com/static. Then it will hardcode /static into the paths in index.html and between the bundles.

Additionally, how does one inject initial data into the CRA HTML file

Generally we recommend this:

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#injecting-data-from-the-server-into-the-page

CRA output is just a static file, so any strategy that would work with a static file would work for us too. We don't support any particular templating syntax but you can come up with your own interpolation that's completely replaced on server side.

[piotr-cz]

Quick workaound:
"build:staging": "cross-env PUBLIC_URL=\"http://localhost:8000/client/build-staging/\" REACT_APP_API_URL=\"http://localhost:8000/api\" react-scripts build && mv build build-staging",

[PascalPixel]

For those wanting a simple deploy to their Github repo

1. In package.json change "build": "react-scripts build" to "build": "react-scripts build && mv build docs"
2. Add a file called CNAME to the root of your repo/project, inside place the custom domain you wish to use on Github Pages (my file has only one line: superpencil.com, no other info like http etc.)
3. Setup your index.html in the /public folder of create-react-app to re-route any react-router links internally, and not point to other things on Github

<!doctype html>
<html lang="en">
  <head>
    <!-- Meta Data -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Rerouting -->
    <script type="text/javascript">!function(i){if(i.search){var a={};i.search.slice(1).split("&").forEach(function(i){var l=i.split("=");a[l[0]]=l.slice(1).join("=").replace(/~and~/g,"&")}),void 0!==a.p&&window.history.replaceState(null,null,i.pathname.slice(0,-1)+(a.p||"")+(a.q?"?"+a.q:"")+i.hash)}}(window.location);</script>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

4. In the Settings of the repo on Github, setup your Github Pages to point to the /docs folder on master branch
5. Setup your custom domain in the same settings page, matching what you put in the CNAME file
6. Setup your custom domain wherever to point to the Github repo using a CNAME record (check github docs for custom domains)

After all this, you can simply run npm run build and it will be live every time you commit.
The only downside is your search results in code editor will include the stuff from the docs folder, you'll have to ignore it in your editor outside of the .gitignore file.

[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.