React: Use express script library

I. Introduction

The ability we all know, is very powerful server functions, it has access to all the resources of the browser is not available. Server can be very safe and secure access to data. Users can take advantage of these additional advantages on the service side rendering initial content advantage. In the last chapter has been introduced to create a local Web server and back-end React client-server data communication via Express scaffolding, although this is feasible, but the process is quite complicated, because we need to start the two servers were . Is there a program with a single line command to start two servers simultaneously. The answer is yes . You can express script library and concurrently with the use, concurrenly is a plug-in can be started simultaneously by two server configuration commands.

 

Second, the installation

1, the installation script express

// install express react in the current project 
npm install express --save

2, installed concurrently plug

// install concurrenly react in the current project 
npm install concurrenly --save

  

Three, Server

Since the use of express back-end server, you need to create a server project, create server.js file in the root directory of the project, as follows

// Import express the script library 
const express the require = ( ' express ' ); 

const Logger = (REQ, RES, Next) => { 
    the console.log (req.method} {$ `Request for $ {}` req.url) ; 
    the Next () 
}; 

const sayHello = (REQ, RES) => 
    res.status ( 200 ) .send ( " <h1> the Hello World Express <h1 />! " ); 

// create a Web server app, through. user () function and the two intermediate logger sayHello in series.
// First, Logger will be associated with each request information to the console
 // server then returns the HTML sayHello call request response information 
const App = Express () 
    .use (Logger) 
    .use (sayHello);

app.listen(3000, ()=> console.log(`Receive app running at 'http://localhost/3000'`));

 

Fourth, the project

 

5, configuration 

Configuring package.json, so that it can start the two servers at the same time [Note: express Server default listen port: 3000], there is a change of place see the red part

{
  "name": "react-demo",
  "version": "0.1.0",
  "private": true,
  "license": "ISC",
  "dependencies": {
    "concurrently": "^5.0.2",
    "events": "^3.0.0",
    "express": "^4.17.1",
    "flux": "latest",
    "isomorphic": "0.0.11",
    "isomorphic-fetch": "^2.1.1",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-redux": "^7.1.3",
    "react-router-dom": "^5.1.2",
    "react-scripts": "0.9.x",
    "redux": "^4.0.4",
    "redux-thunk": "^2.3.0",
    "uuid": "^3.3.3"
  },
  "devDependencies": {
    "redux-logger": "^3.0.6"
  },
  "scripts": {
    "client": "react-scripts start",
    "server": "nodemon server.js",
    "start": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

 

Sixth, start

// React Express client-server and back-end servers are up and 
yarn start