Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Where does React put the continuous build files when using create-react-app

I'm using create-react-app. When I run npm start (react-scripts start) it continuously builds the changes for me and does it magic. But what is the output folder for that? I know when I build it manually where the files go.

I want to use firebase emulator to serve the current version (the continuous build) of my react all but I don't understand where's the output folder or how to achieve it.

like image 658
Badr Hari Avatar asked Aug 03 '26 08:08

Badr Hari


2 Answers

You could try this package https://github.com/Nargonath/cra-build-watch

Install it and add the script to your package.json

{
  "scripts": {
    "watch": "cra-build-watch"
  }
}

and run it

npm run watch

more info here

https://ibraheem.ca/writings/cra-write-to-disk-in-dev/

and if you go to the react repo issue linked in the article you would find more workarounds

like image 175
diedu Avatar answered Aug 05 '26 13:08

diedu


tl;dr

run npm run build, not npm run start

More Detail

react-scripts start runs webpack-dev-server internally. As a default setting, webpack-dev-server serves bundled files from memory and does not write files in directory. If you want to write files with webpack-dev-sever, you could set writeToDisk option to true in your dev server configuration.

However, I dont think this is what you want to serve on firebase emulator. Webpack-dev-server does not build optimal app for production, and you also need to use react-app-rewired to customize dev server configuration in cra template.

What you want to do is npm run build to run react-scripts build, which builds optimized production app in /build directory.

like image 30
jkpark Avatar answered Aug 05 '26 14:08

jkpark



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!