create-react-app uses webpack-dev-server in development mode (i.e. react-scripts start) to run a local server on port 3000, making compiled code available to the browser at http://localhost:3000/static/js/bundle.js.
I'd like webpack-dev-server to emit this as a real file so I can point to is from a symlink on the filesystem. Is this an easy configuration change? The config they are using is here: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.dev.js
Well, the solution is to just eject the config out of create-react-app.
Related
I'm trying to use Vite for a React project. I need to configure Vite so that when I run the dev server it places the runtime files in a particular directory (because the files are used with another runtime environment). The server config doesn't seems to have an option but I'm not sure if I'm missing something or it is in a different place. Thanks
It doesn't seem to be possible right now according to this repo discussion https://github.com/vitejs/vite/discussions/6108
Meanwhile, you could run the dev command along with the build --watch command to have both, but it would get slower
npm run dev & npm run build -- --watch
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.
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
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.
create-react-app and npm noob here, and I'm having some trouble with deploying to production. When I start my app, I want to start a specific js file, as well as run the normal react-scripts start. So in my package.json, I have the following.
"scripts": {
"start": "node -r esm src/server.js & react-scripts start",
...
}
When I run npm start, it works great, both scripts are executed locally and up and running.
My cursory reading seems to indicate that npm start is just for development though. In production, the build/ folder will be used and... I can't figure out how it's run. Testing locally, after running npm run build, the build/ folder is made. And then running serve -s build, something is executed, but it's not my npm start script. It looks like it's just react-scripts start. Attempting to deploy to several real-life production servers like Firebase and Netlify behaves the same way.
So how exactly is the production build started? And how can I configure it to behave like my development build.
I feel like I must be misunderstanding something fundamental as I can't find any explanation online, but any help would be appreciated.
If you're interested in why exactly I have this strange setup, I'm attempting to deploy boardgame.io with a multiplayer server.
The reason to use npm start is so that you can fire up a local web server on the fly and paired with nodemon and other goodies, changes to the source can easily be viewed as if it were in production.
npm build transpiles the source into a lightweight, lazy loading bundle suitable for production. Once the build is complete, you use a web server to host build/index.html and access the site from there. What you use to host it is up to you (most commonly nginx but you could use something like apache or node like you're alluding to with serve -s build).
I am running a react app with npm and would like to modify the path for the static files.
I modified the package.json to include "homepage": "./app".
As expected the files are now served at .../app/static when I use a production build with npm run build, but I cannot replicate this behavior with the development server (npm start).
How can I make the dev server serve at /app/static as well?
Thanks for any suggestions.
I have executed this command npm run eject and I got several new files appeared in my React project but I don't see these two files, "webpack.config.dev.js" and "webpack.config.prod.js" .
What is wrong in my project?
Nothing is wrong with your project, Its just the way create-react-app works
You wont see webpack.config.dev.js and webpack.config.prod.js because those are not embedded in react-scripts, instead you will find the webpack configuration in config/webpack.config.js
When you run npm run eject
that script will move all the webpack & webpackDevServer configuration from react-scripts to the App Root giving you all the webpack configuration and related files and scripts