How to make create-react-app auto build?

Question

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

Cant you not split the concerns,meaning run your backend on express and your frontend development with npm start (webpack-dev-server)? — KornholioBeavis, Mar 13 '17 at 20:45
@user1185197 currently the frontend app has many api calls which requires the server to be running. That's why I am running the react app through the build folder. Is there a way to split that? — Sean sean, Mar 13 '17 at 20:47
I dont understand? You have many api calls to several outside api's? If so thats fine. What are you actually doing on your backend that you require express? Some code would be nice — KornholioBeavis, Mar 13 '17 at 20:52
@user1185197 for example, in the react app, an example api call would be like axios.post('/api/post/111'). When the server is running at http://localhost:8080, the request will be sent to http://localhost:8080/api/post/111. Did I do this part wrong? Is there a good way to decouple? — Sean sean, Mar 13 '17 at 20:58

Brian · Answer 1 · 2020-05-11T20:44:34.793

39

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)

edited May 11 '20 at 20:44

answered Mar 13 '17 at 21:01

Brian

1,860
1
9
14

1

thanks! looks like a simple way to achieve what I wanted – Sean sean Mar 13 '17 at 21:23
this works. The `pacakge.json` file means the file located in the project root directory – Jinsu Sep 13 '19 at 16:30
Docs here: https://github.com/M-Zuber/npm-watch I installed it and ran it, and there were no errors, but it seems to have no effect. It never detects my changes. – Ryan Apr 09 '20 at 22:14
Interesting, can you try enabling legacyWatch mode? This falls back to chokidar to poll files for changes. – Brian Apr 12 '20 at 04:13
1

for me working with : "watch": { "build": { "patterns": ["src"], "extensions": "js,jsx", "quiet": false, "legacyWatch": true, "delay": 2500, "runOnChangeOnly": false } }, – John Tribe Sep 28 '20 at 17:43

score 16 · Answer 2 · answered Mar 13 '17 at 21:20

16

While this doesn’t really answer your question, you shouldn’t be using npm run build in development. Not only the rebuilds are slow, but it also skips important React warnings for performance and size, so you’ll end up scratching your head more and getting a lot less details in the warnings.

If you just need to do API requests with Express, use the proxy feature which lets you proxy API requests from npm start to your server. There is also a tutorial with a matching repository demonstrating how to do that.

In production, of course, you should use the build produced by npm run build. But you would only need to run it before deployment.

answered Mar 13 '17 at 21:20

Dan Abramov

264,556
84
409
511

1

Thanks for the official answer Dan! – Sean sean Mar 13 '17 at 21:25
may I ask an unrelated question? We are using relative paths. I have read multiple discussions on the issue of absolute path wrt src folder and it seems that moving everything into node_modules might not be an viable option in our case. Any new progress on this? Thanks! @Dan Abramov – Sean sean Mar 14 '17 at 18:13
Both Angular (2.x+) and Vue CLIs support a build watch function for the build function. This is useful when the SPA is not self-contained. For example, if the SPA is hosted in within a view in an ASP.NET MVC (not dontnetcore as there's a template for that) or a CMS page such as Sitecore. In this case you'll want to build + watch your app in development mode so that you can view it within the host environment and have changes reflected on save without having to manually kick off a build. Unfortunately, debugging will have to be done in the browser's dev tools. – Dave Mar 23 '19 at 19:12
Seeing as there are bugs that apply to DEV only, it seems like sometimes you really do want to run production in development. For instance https://github.com/facebook/react/issues/12141 – benathon Jan 01 '20 at 12:24

score 0 · Answer 3 · answered Mar 13 '17 at 21:10

Run your backend on a different port. If your running on express modify the file bin/www

var port = process.env.PORT || 9000

and in your /src folder create a config file where you configure your api host,routes, params etc

//config/index.js
export const Config = {
   protocol: 'http',
   host: window.location.hostname, //or the environment variable
   params: '/api/',
   api: {post:'/posts/'}
}

and in your calling component or where ever your calling the api's

import {Config} from '../config'

axios.get(`${Config.protocol}${Config.host}${Config.params}${Config.api.posts}${some id i guess}`)

score 0 · Answer 4 · answered Oct 19 '21 at 06:02

0

The easiest way that I found (as of 10/19/21) is to use cra-build-watch. Works perfectly.

answered Oct 19 '21 at 06:02

borice

1,009
1
8
15

seems to not work with react-scripts 5.0.1 anymore – Dawid Sibiński Jun 02 '22 at 11:09

score -2 · Answer 5 · answered Aug 13 '18 at 09:02

i am also using create react app, this is how i modified my scripts to run project for development(windows), build the production build and run the production build.

"scripts": {
    "start": "set PORT=8080 && react-scripts start",
    "build": "react-scripts build",
    "deploy": "set PORT=8008 && serve -s build"
  }

npm start : run project for development(windows) npm run-script build : build the production build npm run-script deploy: run the production build

npm install -g serve before run npm run-script deploy.

This doesn't answer OP's question. :) OP wants to build the files with a watcher, in the means of building the app everytime something changes. — Eksapsy, Jun 10 '20 at 10:00

score -11 · Answer 6 · answered Jun 03 '20 at 20:10

-11

1> npm install create-react-app -g

2> create-react-app Your_Apps_Name

answered Jun 03 '20 at 20:10

Sudipta Ghosh

7
1
1

Can you expand this into a full answer that included explanation of what each of these commands are doing and how this recipe works? – Jason Aller Jun 05 '20 at 21:25

How to make create-react-app auto build?

6 Answers6

Linked