Build React simulation data development environment using Express, Create-react-app, MongoDB

Feed

Recently completed a Vue project, involving more than 6,000 users and other data, in order to realistically perform data simulations at the front end, all copies of the full amount of data are placed in the Api.json. This causes the entire Api.json file to be too large, and the editor will stutter every time the modification is made.

After the completion of the project is to be able to put a large number of simulation data in the database for management, using NODEJS to operate the database. By the way, skillfully Nodejs.

Using the technology Stack Express

Nodejs is currently the most popular background frame. The website's description of Express is an opportunity for the node. JS platform, a fast, open, minimalist web development framework. Advantages are easy to start, high performance, and strong extensibility:

1. Easy to get started: Nodejs was originally designed to develop a happy Web server, but a relatively low-level API would discourage many novices. Express has a modest encapsulation of web development-related modules, shielding a lot of complex and cumbersome technical details, so that the development of this only need to focus on the development of business logic, greatly reducing the cost of entry and learning.
2. High performance: Express is only moderately packaged and extended on Web application-related NODEJS modules, to a large extent avoiding the performance loss caused by over-encapsulation.
3. Strong extensibility: Based on the development mode of middleware, the expansion of Express application, module splitting is very simple, flexible, and strong extensibility.

Create-react-app

React+redux and Vue+vuex are now the most popular two building WebApp front-end building framework, which react backed by the tree, the first technology to implement the virtual Dom and efficient diff algorithm, so that it has high performance. At the same time, the code logic is very simple.

Create-react-app is a set of non-configurable react development programs that Facebook officially offers, and is currently the most popular way to build react applications. This scaffold has been done the basic Webpack configuration, with Automatic Updates, error prompts and other functions, just need to create, start can be quickly developed.

Before use we need to install in the global:

NPM Install Creat-react-app-g

Mongodb

MongoDB and node. JS are particularly well-matched because MongoDB is a document-based, non-relational database that is stored in Bson (the lightweight binary format of JSON), the commands for managing databases such as additions and deletions, and the JavaScript syntax are similar to those used by front-end classmates.

Yarn

With a development environment built from the ground up, it's all about the early adopters of the yarn that Facebook introduced this year.

Yarn, like NPM, is a NODEJS package management tool.

Yarn caches every package it downloads, and all does not need to be downloaded repeatedly. It can also parallelize operations to maximize resource utilization, so the installation is faster than ever.

Yarn verifies the integrity of the package with a checksum before the code for each installation package executes.

Yarn is installed with a well-formed, concise lockfile and an exact algorithm to ensure that the running and installation processes on one system run on other systems in the same way.

Start creating

Suppose we need to create a Test-app project:

1. Create a project directory

Create-react-app Test-app

Wait a moment, yarn will create a directory for us, pull away the required dependencies, webpack configuration through yarn to call, you can see the directory structure:

The console will have a clear message when the installation is complete:

2. Start development

CD Test-app && yarn Start

This will start the default port of 3000 page, if the port conflicts, you will be prompted whether to choose another port

Enter the SRC directory for development

3. When the development is complete and needs to be published

Run yarn build to compile, publish the build directory

Creation completes automatically builds the build folder, placing the Js,css file in the static directory

The basic creation and release of the react application process, the middle omitted a large number of configuration problems, to the need to quickly build projects to bring great convenience. Of course, the default configuration may not be able to meet all the requirements, Create-react-app also provides yarn eject that throws all the configuration items for developers to use, if you need to adjust the Webpack content, you need to use this command. However, this can also lead to the inability to roll back. The official update is faster, and if it is not needed, it is recommended to use the built-in behavior directly.

Build service-side applications with Express

The development model requires some minor tweaks because it requires express to build server-side applications during project development.

1. Create a folder called Server and initialize the Package.json file

mkdir Server && CD server && yarn init

2. Add Dependency Packages

Yarn Add Express body-parser Nodemon babel-cli babel-preset-es2015

Mainly used in Express, Body-parser, Nodemon (Monitoring node. JS Change Auto-restart, for development phase), BABEL-CLI and babel-preset-es2015 (for use with ES6 development)

Executive Express

Express

The Express build Nodejs server module is generated in the server folder.

3. Modify Package.json

Here I am operating when the Nodemon module is not successfully downloaded and needs to be executed separately:

Yarn Add Nodemon

Download down the Nodemon module.

The default scripts generated by Express are:

"Scripts": {    "start": "Node./bin/www"  }

Change it to:

"Scripts": {    "start": "Nodemon--exec node./bin/www"  }

4. Create-react-app starts a static resource server, what do you need to do when you need to do the server side?

We'll be ghost-headed to modify the Package.json in the Test-app directory.

Create-react-app will default to 4 paragraph scripts:

"Scripts": {    "start": "React-scripts start",    "build": "React-scripts Build",    "test": "React-scripts test--env=jsdom",    "eject": "React-scripts Eject"}

We need to make adjustments to start and build so that we can start both the front-end development page and the backend service at the same time. Introduce concurrently this package here to execute two commands:

Yarn Add concurrently

Package.json:

"Scripts": {    "React-start": "Node Scripts/start.js",    "start": "Concurrently \" yarn React-start\ "\" CD server && yarn start\ "",    "react-build": "Node Scripts/build.js",    "Build": "Concurrently \" yarn react-build\ "\" CD server && yarn build\ "",    "test": "Node Scripts/test.js--env=jsdom "}

In this way, we simply execute yarn start and synchronize the startup Webpack with the Nodemon under the server file.

Reference URL:

1190000009857965

Http://www.cnblogs.com/xiaohuochai/p/7189074.html

Build React simulation data development environment using Express, Create-react-app, MongoDB