Use custom build output folder when using create-react-app (ok)

https://xspdf.com/help/51818028.html

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

• 6324

• 2017-01-05 22:13

• 9

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.

9 Answers

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:

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

2. 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!

Customize build folder · Issue #1354 · facebook/create-react-app , Use custom build output folder when using create-react-app. Facebook provides a create-react-app command to build react apps. When we run npm run build , we see output in /build folder. Builds the app for production to the build folder. On a project I'm currently working on, we're using a file called BUILD that gaearon changed the title react-scripts build doesn't allow for specified path Customize build folder from the feature requested in this thread (different output folder). Going to use the unsupported webpack hack above for now.

Kaloyan Kosev

2020-01-15 17:55

Edit your package.json:

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

create-react-app change static path, I have a react application, which I built with create react app, when I run build it generates the static assets I need and then the index.html file. I am running this on a Ratpack server with gradle. I then use gradle to move these files to my Ratpack directory so I can run it with the Ratpack server. I have a react application, which I built with create react app, when I run build it generates the static assets I need and then the index.html file. I am running this on a Ratpack server with gradle. I then use gradle to move these files to my Ratpack directory so I can run it with the Ratpack server.

Félix

2017-06-14 07:58

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

npm run build specify directory, NPM automatically creates node_modules folder even when a node_modules directory already exists in the higher up hierarchy. You can also have a package.json in the current directory and then install it in the specified directory using --prefix option: npm install --prefix ./install/here. As of npm 6.0.0, you can use. NPM automatically creates node_modules folder even when a node_modules directory already exists in the higher up hierarchy. You can also have a package.json in the current directory and then install it in the specified directory using --prefix option: npm install --prefix ./install/here. As of npm 6.0.0, you can use.

Malcolm Dwyer

2018-11-20 21:32

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/<etc>'
# 2. Update reference on generated files from
#    static/<etc>
#     to
#    user/static/<etc>
#
# 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

react run production build locally, npm run build creates a build directory with a production build of your app. Inside the build/static directory will be your JavaScript and CSS files. Each filename inside of build/static will contain a unique hash of the file contents. This hash in the file name enables long term caching techniques. When running a production build of freshly created Create React App application, there are a number of .js files (called chunks) that are generated and placed in the build/static/js directory: npm run build creates a build directory with a production build of your app. Inside the build/static directory will be your JavaScript and CSS files. Each filename inside of build/static will contain a unique hash of the file contents. This hash in the file name enables long term caching techniques. When running a production build of freshly created Create React App application, there are a number of .js files (called chunks) that are generated and placed in the build/static/js directory:

Wallace Sidhrée

2018-08-13 08:21

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

create react app build, Ensure High Quality by Testing on Real Devices. Get Started in Minutes! Ensure High Quality by Testing on Real Devices. Get Started in Minutes!

gcoulby

2019-06-23 09:34

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",

how to deploy react app to apache server, How to deploy a React App on Apache web server asset-manifest.json. favicon.ico. manifest.json. robots.txt. index.html. 4.copy the build folder to your apache server i.e /var/www/html. 5. go to sites-available directory. 6. open 000-default.conf file. 7. Now goto apache conf.. 8. make a How to deploy a React App on Apache web server asset-manifest.json. favicon.ico. manifest.json. robots.txt. index.html. 4.copy the build folder to your apache server i.e /var/www/html. 5. go to sites-available directory. 6. open 000-default.conf file. 7. Now goto apache conf.. 8. make a

Jaison

2018-11-14 12:12

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 the HTML.

react-scripts build, react-scripts This package includes scripts and configuration used by Create React App. Please refer to its documentation: Getting Started – How to create a new app. react-scripts This package includes scripts and configuration used by Create React App. Please refer to its documentation: Getting Started – How to create a new app.

Ben Carp

2019-04-24 15:20

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

create-react app dist folder, create-react-app . However, if you don't have create react app installed globally, you can run the below command in the directory. npx create-react-app . One important thing i want you to notice is the full stop (or period or dot) at the end of every command. That full stop indicates that you want to create the app in the current folder. create-react-app . However, if you don't have create react app installed globally, you can run the below command in the directory. npx create-react-app . One important thing i want you to notice is the full stop (or period or dot) at the end of every command. That full stop indicates that you want to create the app in the current folder.

Vignesh M

2019-09-15 12:24

webpack =>

renamed as build to dist

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

npm run build output directory angular, The ng build command argument --output-path (or -op for short) is still supported also, which can be useful if you want multiple values, you can save them in your package.json as npm scripts. Beware: The.angular-cli.json property is NOT called output-path like the currently-accepted answer by @cwill747 says. That's the ng build argument only. The ng build command argument --output-path (or -op for short) is still supported also, which can be useful if you want multiple values, you can save them in your package.json as npm scripts. Beware: The.angular-cli.json property is NOT called output-path like the currently-accepted answer by @cwill747 says. That's the ng build argument only.