What are the steps to set up auto-building with create-react-app?

Question

What are the steps to set up auto-building with create-react-app?

I've been utilizing create-react-app for some time now. Autoreloading with 'npm start' or 'yarn start' has been working well on its own, but now I'm facing another issue. Currently, I am running the app on an Express server through the build folder and using 'npm run build' since Express serves the built files. There are numerous API calls that require the app to be executed in this manner. It has become tedious to manually run 'npm run build' every time. Is there a simple solution or workaround to automatically build like 'npm start' without ejecting the app (I know I could eject and configure webpack to achieve this, but I'd prefer not to pursue that route)? Thanks

javascript node.js reactjs express create-react-app

Answer 1

Answer №1

Regrettably, this task must be completed by you personally. However, you can utilize a tool like npm-watch to achieve your goal:

How to Install npm-watch

npm i --save-dev npm-watch

Details in 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/"
  }
}

Simply run npm run watch after installation to initiate npm-watch for automatic asset rebuilding upon modifications.

Update Information:

An alternative is available as React-scripts now offers a proxy option for routing requests to another host/port. For example, if your backend operates on localhost at port 9000 within the /api route, add this line to your package.json: "proxy": "localhost:9000/api". This simplifies request handling during production. (source: https://create-react-app.dev/docs/proxying-api-requests-in-development)

Answer 2

Regrettably, this task must be completed by you personally. However, you can utilize a tool like npm-watch to achieve your goal:

How to Install npm-watch

npm i --save-dev npm-watch

Details in 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/"
  }
}

Simply run npm run watch after installation to initiate npm-watch for automatic asset rebuilding upon modifications.

Update Information:

An alternative is available as React-scripts now offers a proxy option for routing requests to another host/port. For example, if your backend operates on localhost at port 9000 within the /api route, add this line to your package.json: "proxy": "localhost:9000/api". This simplifies request handling during production. (source: https://create-react-app.dev/docs/proxying-api-requests-in-development)

Answer 3

Answer №2

Although this may not directly address your query, it is advisable to avoid using npm run build during development. Running this command can slow down the rebuild process and omit important React warnings related to performance and size, leading to confusion and lack of detailed information in the warnings.

If you simply require API requests with Express, consider utilizing the proxy feature which allows you to proxy API requests from npm start to your server. Additionally, there is a helpful tutorial along with a corresponding repository showcasing how to achieve this setup.

In a production environment, it is recommended to utilize the build generated by npm run build. Nevertheless, this command should only be executed prior to deployment.

Answer 4

Although this may not directly address your query, it is advisable to avoid using npm run build during development. Running this command can slow down the rebuild process and omit important React warnings related to performance and size, leading to confusion and lack of detailed information in the warnings.

If you simply require API requests with Express, consider utilizing the proxy feature which allows you to proxy API requests from npm start to your server. Additionally, there is a helpful tutorial along with a corresponding repository showcasing how to achieve this setup.

In a production environment, it is recommended to utilize the build generated by npm run build. Nevertheless, this command should only be executed prior to deployment.

Answer 5

Answer №3

To change the port your backend is running on, adjust the settings in the bin/www file if you're using Express.

var port = process.env.PORT || 9000

Create a configuration file in your /src folder to set up your API host, routes, parameters, and more.

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

In the component where you are making API calls, import the Config file and make your requests.

import {Config} from '../config'

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

Answer 6

To change the port your backend is running on, adjust the settings in the bin/www file if you're using Express.

var port = process.env.PORT || 9000

Create a configuration file in your /src folder to set up your API host, routes, parameters, and more.

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

In the component where you are making API calls, import the Config file and make your requests.

import {Config} from '../config'

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

Answer 7

Answer №4

One simple method I discovered (as of 10/19/21) is employing cra-build-watch. It functions flawlessly.

Answer 8

One simple method I discovered (as of 10/19/21) is employing cra-build-watch. It functions flawlessly.

Answer 9

Answer №5

When using create react app, I made some modifications to the scripts for running the project in development mode on Windows, building the production version, and running the production build.

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

To run the project in development mode on Windows, use npm start. To build the production version, use npm run-script build. And to run the production build, use npm run-script deploy.

Before running npm run-script deploy, make sure to install serve globally with npm install -g serve.

Answer 10

When using create react app, I made some modifications to the scripts for running the project in development mode on Windows, building the production version, and running the production build.

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

To run the project in development mode on Windows, use npm start. To build the production version, use npm run-script build. And to run the production build, use npm run-script deploy.

Before running npm run-script deploy, make sure to install serve globally with npm install -g serve.

Answer 11

Answer №6

Step 1: Install create-react-app globally by running the command npm install create-react-app -g

Step 2: Create a new React app by running create-react-app Your_Apps_Name

Answer 12

Step 1: Install create-react-app globally by running the command npm install create-react-app -g

Step 2: Create a new React app by running create-react-app Your_Apps_Name

What are the steps to set up auto-building with create-react-app?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Creating multiple layouts in Next.js based on your project's needs is a common practice. Let's explore

Unable to Transmit Authorization Header in Cross-Domain Access Situation

The ajax code is failing to retrieve the data from the table and populate it in the

Can one initiate a server within Zapier Code?

Interacting with shadow DOM elements using Selenium's JavaScriptExecutor in Polymer applications

the hidden input's value is null

When utilizing Material-UI GridListTile within a component in React, the style attributes may be lost

I am encountering difficulties displaying the image and CSS files from another folder in my HTML with Node.js

Utilize resources from webpack's bundled npm package assets

Methods like jQuery blink(), strike(), and bold() offer dynamic ways to manipulate

Having trouble with Express Get Routes - keeps showing 404 error

How to utilize a parameter value as the name of an array in Jquery

Toggle the visibility of the identical div

What could be the reason for Jest's failure to execute tests involving npm packages?

While the Navbar component functions properly under regular circumstances, it experiences difficulties when used in conjunction with getStaticProps

Attempting to execute a PHP script through a JavaScript if statement

Vue - unable to display component CSS classes in application when using class-style bindings

Steps to resolve eslint error in cases of using the node: protocol for importing Node.js built-in modules

Dealing with the challenges posed by middleware such as cookie access and memory leaks

Ways to Export HTML to Document without any borders or colorful text