1. Create projects

npm install -g create-react-app 
create-react-app  myProject
yarn start
Copy the code

2. Install the technical library used by the project

npm install react-app-rewired customize-cra /1 rewire
            antd-mobile babel-plugin-import /2The UI library postcss pxtorem /3Px rem library1:2The node - sass/proportion4CSS extension language sass react-router-dom /5Http-proxy-middleware /6HTTP proxy library --saveCopy the code

3. Define or modify scaffold configuration

Method 1: Expose the WebPack configuration file

// This command is irreversible
npm run eject
Copy the code

Method 2: Customize scaffold configuration

  • Step1: create a file in the root directoryconfig-overrides.js
// Here is where I need some configuration information
 const {override, fixBabelImports, addPostcssPlugins, addWebpackAlias } = require('customize-cra');
    module.exports = override(
      // add webpack alias
      addWebpackAlias({
        [The '@']: path.resolve(__dirname, 'src'),'components']: path.resolve(__dirname, 'src/components')}),// babel-plugin-import
      fixBabelImports('import', {
        libraryName: 'antd-mobile'.style: 'css'
      }),
      // postcss-pxtorem
      addPostcssPlugins([require('postcss-pxtorem') ({rootValue: 16.propList: [The '*'].// propWhiteList: [],
        // selectorBlackList: ['weui-']})))Copy the code
  • Step2: modifypackage.json
 "scripts": {-"start": "react-scripts start",
      +   "start": "react-app-rewired start",
      -   "build": "react-scripts build",
      +   "build": "react-app-rewired build",
      -   "test": "react-scripts test --env=jsdom",
      +   "test": "react-app-rewired test --env=jsdom",
      -   "eject": "react-scripts eject"
    }
Copy the code

4. Write a JS that gets the root FontSize in real time

const baseSize = 32
function setRem() {
    const scale = document.documentElement.clientWidth / 750;
    document.documentElement.style.fontSize =
        baseSize * Math.min(scale, 2) + 'px'
}
setRem();
window.onresize = function() {
    setRem()
}

// This file is introduced in 'index.js'
Copy the code

5. Configure the local proxy

Method 1: Simple configuration

Add to package.json file

{
    "proxy": "http://www.baidu.com"
}
Copy the code

Method 2: Usehttp-proxy-middleware

  • Step1:srcCreate one in the directorysetupProxy.jsfile
const proxy = require('http-proxy-middleware');

module.exports = function(app) {
/ / when the request: localhost: 3000 / API proxy to http://192.168.2.233:3000/api
  app.use(
    proxy('/api', {
      target: 'http://192.168.2.233:3000'.changeOrigin: true.pathRewrite: {
        '^/api': ' ',}})); };Copy the code

6. Create environment variables

  • Adding Environment Variables In .env in the root of your project
PUBLIC_URL=/front HTTPS=false REACT_APP_WEBSITE_TITLE = Welcome # also works # REACT_APP_VERSION = ${npm_package_version} REACT_APP_VERSION = $npm_package_versionCopy the code
  • Reference to the environment variable defined inindex.htmlIn the
<title>%REACT_APP_WEBSITE_TITLE%</title>
Copy the code
  • Reference defined environment variables in javascript
. render() {return (
    <div>
      <small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
      <form>
        <input type="hidden" defaultValue={process.env.REACT_APP_WEBSITE_TITLE} />
      </form>
    </div>
  );
}
Copy the code

7. Deploy the project

  1. performnpm run build
  2. Local preview (one of the ways)
yarn global add serve
serve -s build If this command does not exist, you need to configure environment variables
Copy the code

8. Code is deployed to the server

Here is using Nginx to provide static services, the directory involved below is also my own server address, for reference only

Nginx is deployed in the root directory

  • Enter the/etc/nginx/conf.dIn the directory, modify the filedefault.conf
server { listen 80; // Listen on port 80 server_name test.com; // Your domain name or IP address location / {// root directory root /usr/local; // Front-end file path index index.html; Try_files $uri $uri/ /index.html; }}Copy the code
  • After modification, restart nginx:nginx -s reload
  • Access:Domain name | IP addressCan be

Nginx is deployed to a subdirectory

  • Enter the/etc/nginx/conf.dIn the directory, modify the filedefault.conf
server {
  listen  80;
  server_name  test.com; // Your domain name or IP address

  location /demo { // Subdirectories
    alias  /front/demo; The React project configures the property PUBLIC_URL=/demo in the environment configuration file. The contents in the build directory packed by the react project are stored in the demo directory on the server
    index  index.html;
    try_files $uri $uri/ /demo/index.html; }}Copy the code
  • After the modification, restart the nginx service:nginx -s reload
  • Access:Domain name | IP address/ demo can