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       npm run build      Builds the app for production to the build folder  It correctly   bundles React in production mode and optimizes the build for the best   performance       The build is minified and the filenames include the hashes  Your app   is ready to be deployed    How can we use custom folder instead of  build for the output  Thanks

User · Answer

You can update the configuration with a little hack, under your root directory:

npm run eject
config/webpack.config.prod.js - line 61 - change path to: __dirname + './../--your directory of choice--'
config/paths.js - line 68 - update to resolveApp('./--your directory of choice--')

replace --your directory of choice-- with the folder directory you want it to build on

note the path I provided can be a bit dirty, but this is all you need to do to modify the configuration.

User · Answer

webpack     renamed as build to dist  output          filename    name  bundle js         path  path resolve   dirname   dist

User · Answer

F  lix s answer is correct and upvoted  backed-up by Dan Abramov himself   But for those who would like to change the structure of the output itself  within the build folder   one can run post-build commands with the help of postbuild  which automatically runs after the build script defined in the package json file   The example below changes it from static  to user static   moving files and updating file references on relevant files  full gist here    package json       name    your-project      version    0 0 1              scripts          build    react-scripts build        postbuild      postbuild sh                      postbuild sh     bin bash    The purpose of this script is to do things with files generated by    create-react-app  after  build  is run    1  Move files to a new directory called  user       The resulting structure is  build user static  lt etc gt     2  Update reference on generated files from      static  lt etc gt        to      user static  lt etc gt      More details on  https   github com facebook create-react-app issues 3824    Browse into    build   directory cd build   Create    user   directory echo  1 4 Create  user  directory  mkdir user   Find all files  excluding  through  grep      -        - the newly created directory    user     - all content for the directory   static     Move all matches to the directory    user   echo  2 4 Move relevant files  find     grep -Ev          user      static        xargs -I   mv -v    user   Browse into    user   directory cd user   Find all files within the folder  not subfolders    Replace string  static   with  user static   on all files that match the  find      sed  requires one to create backup files on OSX  so we do that  echo  3 4 Replace file references  find   -type f -maxdepth 1   LC ALL C xargs -I   sed -i backup -e  s static  user static  g       Delete    backup  files created in the last process echo  4 4 Clean up  find   -name    backup  -type f -delete   Done

User · Answer

Quick compatibility build script  also works on Windows     build    react-scripts build  amp  amp  rm -rf docs  amp  amp  mv build docs

User · Answer

Windows Powershell Script    package json  scripts          postbuildNamingScript     powershell -NoProfile -ExecutionPolicy Unrestricted -Command   powerShellPostBuildScript ps1        powerShellPostBuildScript ps1 move build static js build new-folder-name   Get-Content build index html  replace  static js    new-folder-name     Set-Content  build index html  Finished Running BuildScript    Running npm run postbuildNamingScript in powershell will move the JS files to build new-folder-name and point to the new location from index html

User · Answer

If you have arrived at this question three years after its initial posting because this is still a problem for you  consider backing this proposal to support a new BUILD PATH environment variable   https   github com facebook create-react-app pull 8986  From the proposal s documentation      By default  Create React App will output compiled assets to a  build directory adjacent to  src  You may use this variable to specify a new path for Create React App to output assets  BUILD PATH should be specified as a path relative to the root of your project    If this proposal is adopted  it would mean that customizing the output target for create-react-app becomes as simple as updating updating your build script      package json    scripts          build    BUILD PATH    dist  react-scripts build                     or adding a  env file to the root of your project      env BUILD PATH    dist

User · Answer

Edit your package json    build    react-scripts build  amp  amp  mv build webapp

User · Answer

Based on the answers by Ben Carp and Wallace Sidhr  e   This is what I use to copy my entire build folder to my wamp public folder   package json       name     your project name       homepage    http   localhost  your project name        version    0 0 1              scripts          build    react-scripts build        postbuild     powershell -NoProfile -ExecutionPolicy Unrestricted -Command   post build ps1                      post build ps1  Copy-Item    build    -Destination  C  wamp64 www  your project name   -Recurse -force   The homepage line is only needed if you are deploying to a subfolder on your server  See This answer from another question

User · Answer

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

User · Answer

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  amp  amp  mv build    docs    move build    docs     with    docs is the relative folder you want to move the build folder to

User · Answer

Support for BUILD PATH just landed into v4 0 2  Add BUILD PATH variable to  env file and run build script command      env file BUILD PATH foo   That should place all build files into foo folder

User · Answer

You can t change the build output folder name with the current configuration options   Moreover  you shouldn t  This is a part of the philosophy behind create-react-app  they say Convention over Configuration   If you really need to rename your folder  I see two options    Right after the build process finishes  write a command that copies the build folder content to another folder you want  For example you can try the copyfiles npm package  or anything similar  You could try to eject create-react-app and tweak the configuration      If you aren   t satisfied with the build tool and configuration choices  you can eject at any time  This command will remove the single build dependency from your project       Instead  it will copy all the configuration files and the transitive dependencies  Webpack  Babel  ESLint  etc  right into your project so you have full control over them  All of the commands except eject will still work  but they will point to the copied scripts so you can tweak them  At this point you   re on your own    However  it is important to note that this is a one-way operation  Once you eject  you can   t go back  You loose all future updates    Therefore  I d recommend you to not use a custom folder naming  if possible  Try to stick with the default naming  If not an option  try  1  If it still doesn t work for your specific use-case and you re really out of options - explore  2  Good luck

User · Answer

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

User · Answer

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  amp  amp  mv build    my bundles

[reactjs] Use custom build output folder when using create-react-app

Examples related to reactjs

Examples related to create-react-app