Use create-react-app with express to quickly build a React development environment

Recently, I temporarily took over a project and needed to quickly build the front-end and back-end environments. Because it was done separately from the framework used by the team, a more mature solution was preferred to quickly start the react environment, which saved many troubles in configuring webpack.

Introduction to Scaffolding

In this environment, Facebook provides a set of React development solutions that do not require configuration, namely create-react-app . This scaffolding has already done the basic webpack configuration, with automatic updates, error prompts and other functions. It only needs to be created and started to develop quickly.

At this time, another riser in the front-end community had to be advanced: yarn .

Yarn, like npm, is a NodeJS package management tool. Why choose to use yarn? The description on the official website is:

Yarn caches every package it downloads, so it doesn't need to be downloaded repeatedly. It also parallelizes operations to maximize resource utilization, so installation is faster than ever.

Yarn uses a checksum to verify the integrity of each installed package before the code is executed.

Yarn installs using a well-formed but concise lockfile and a precise algorithm that guarantees that what works on one system will run the same way on other systems.

The reason for choosing Yarn is also because its speed improvement is faster than npm, using yarn add <package-name>, adding and yarn remove <package-name>deleting node packages (corresponding npm installand npm uninstall.

Another point is that after yarn is updated, it is integrated createand passed yarn create, which can quickly start a project.

• yarn create react-app my-app

• yarn create react-native-app my-app

• yarn create next-app my-app

---

how to use

Suppose we need to create a demo-appproject:

1. Create a directoryyarn create react-app demo-app

   • After a while, yarn will create a directory for us, pull dependencies, wepack configuration is called through yarn, you can see that the directory structure is very clean
     

   • There will be a clear prompt after installation
     

2. Start developing:cd demo-app && yarn start

   • At this time, a page with the default port of 3000 will be launched. If the port conflicts, you will be prompted whether to choose another port.

   • Enter the srcdirectory to start developing
     

3. When you need to publish after the development is complete, run yarn buildto compile and publish the builddirectory

   • After the creation is completed , a buildfolder will be automatically generated, and the js and css files will be placed in the static directory.
     

   • Just publish the builddirectory

The trilogy is completed, and many configuration problems are omitted in the middle, which brings great convenience to the project that needs to be built quickly. Of course, the default configuration may not be able to meet all requirements, and create-react-appit also provides developers with throwing all configuration items yarn eject. If you need to adjust the content of webpack, you need to use this command. However, this will also make it impossible to roll back. The official update is faster, if it is not necessary, it is recommended to use the built-in behavior directly.

---

Build server-side applications with Express

If you need express to build a server-side application during the project development process, then the development mode needs to be adjusted slightly.

1. First create a serverfolder and initialization package.jsonfile called:

   • mkdir server && cd server && yarn init

2. Add dependency package

   • yarn add express body-parser nodemon babel-cli babel-preset-es2015

   • Mainly used express, body-parser, nodemon(detect node.js changes and restart automatically, suitable for development stage), babel-cliand babel-preset-es2015(for development with es6)

3. modify package.json, addnpm scripts

    {
      "scripts": {
        "start": "nodemon --exec babel-node -- ./server.js",
        "build": "babel ./server.js --out-file server-compiled.js",
        "serve": "node server-compiled.js"
      }
    }

   • Used here to nodemondetect node.js changes during development and automatically restart

   • When released build, it is babelcompiled into es5 files by

create-react-appA static resource server will be started, so what should I do when the server side needs to be performed at the same time?

Let's go back and modify demo-appthe directory package.json.

create-react-app4 segments will be added by default scripts:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

We need startto buildadjust and so that we can start the front-end development page and the back-end service at the same time. This package is imported here concurrentlyto execute two commands:

yarn add concurrently

package.json:

"scripts": {
    "react-start": "react-scripts start",
    "start": "concurrently 'yarn react-start' 'cd server && yarn start'",
    "react-build": "react-scripts build",
    "build": "concurrently 'yarn react-build' 'cd server && yarn build'",
  },

In this way, as long as we execute, we yarn startwill start webpack and nodeman in the server folder synchronously.

Proxy

If we use fetch(/api/data)such a request on the front-end page, it will be sent localhost:3000/api/datato , which cannot be achieved. To point to the server side, you need to specify proxy:

Assuming that the server-side express has started port 5000, you need package.jsonto increase it in:

"proxy": "http://127.0.0.1:5000"

At this time, when you use the fetch(/api/data)request, it will point tolocalhost:5000/api/data

Let's start developing easily~