Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make create-react-app auto build?

Tags:

I have been using create react app for a while. 'npm start' or 'yarn start' autoreloads works fine by itself but now I have an another problem. Currently I run the app on express server through the build folder, and I use 'npm run build' since express is serving the built files. There are many api calls which requires the app to be ran through this way. Now it become tedious to manually do 'npm run build' every time. Is there a simple way or work around to build automatically just like 'npm start' without eject the app(I know could eject and configure webpack to do that, but i don't want to go down that path)? Thanks

like image 213
Sean sean Avatar asked Mar 13 '17 20:03

Sean sean


People also ask

Can you use create react app for production?

Why it is better to avoid Create React App (CRA) CRA was created for beginners (according to Facebook) to learn React without understanding the underline configurations of Webpack. However, it is not created for production. Unfortunately, devs have been using it for all their projects.


1 Answers

Unfortunately this is something you will have to do yourself. You can use a tool like npm-watch to accomplish what you want though:

Install npm-watch

npm i --save-dev npm-watch 

package.json

{   "name": "react-app",   "version": "0.1.0",   "private": false,   "devDependencies": {     "npm-watch": "^0.1.8",     "react-scripts": "0.9.5",   },   "dependencies": {     "react": "^15.4.2",     "react-dom": "^15.4.2"   },   "scripts": {     "start": "react-scripts start",     "build": "react-scripts build",     "test": "react-scripts test --env=jsdom",     "eject": "react-scripts eject",     "watch": "npm-watch"   },   "watch": {     "build": "src/"   } } 

Afterwards, just use npm run watch to start up npm-watch so it can rebuild your assets on changes.

Update:

React-scripts now includes a proxy option that proxies requests to a different host/port. For example, if your backend is running on localhost at port 9000 under the /api route, then you would add this line to your package.json: "proxy": "localhost:9000/api". You could then make requests as you normally would in production. (source: https://create-react-app.dev/docs/proxying-api-requests-in-development)

like image 194
Brian Avatar answered Sep 28 '22 09:09

Brian