This article describes the process and problems I encountered from environment configuration to the successful deployment of React to the local Apache server.

Environmental installation

Installation node. Js. I use VSCode for coding, this is based on personal preference.

Engineering to create

 npx create-react-app my-app
 cd my-app
 npm start
Copy the code

This completes the project initialization.

For details on how to develop and code, read the Learn React section. Of course, it is recommended to start the study phase by reading everything up to the “Advanced Guide”.

hello world

This is done in the project directory

 npm start
Copy the code

You can see the effect in the browser that pops up automatically.

build

To deploy the code to the server, you need to package it. This can be a painful process, and there will be a number of problems, so be prepared. It took me about five or six hours from the first package to a successful deployment.

Executed first

 npm run build
Copy the code

If you succeed, congratulations, you are the chosen one. You can skip the following section and go straight to the “deploy” section. If not, that is normal, the following should help.

webpack.config.js

See if your project root directory has the webpack.config.js file. If not

 npx webpack-cli init
Copy the code

Follow the prompts and the webpack.config.js file will be created in the project root directory.

There are several points of concern

// const HtmlWebpackPlugin = require("html-webpack-plugin"); const config = { entry: "./src/index.js",//1. Output: {path: path.resolve(__dirname, "dist"), clean: true //2. DevServer: {open: true, host: "localhost",}, plugins: [new HtmlWebpackPlugin({template: "Index.html ",// automatically generates the index.html template. If there is no index.html file in the build result, but the default template is not compatible with react. }}}}}}}}}}}}}}}}Copy the code

HtmlWebpackPlugin.apply

TypeError: Cannot read property ‘tap’ of undefined at htmlWebpackplugin.apply.

A: Package. json file

"HTML - webpack - plugin" : "^" 5.3.1, / / replace with "HTML - webpack - plugin" : "^ 4.4.1",Copy the code

Support for the experimental syntax ‘jsx’ isn’t currently enabled

Check the project root directory to see if there is a.babelrc file. If not, create one and fill in the file

 {
   "plugins": ["@babel/syntax-dynamic-import"],
   "presets": ["@babel/preset-env", "@babel/preset-react"]
 }
Copy the code

These are just a few of the problems I encountered. If you run into problems, take your time, read the error messages, Google, read the documentation, and be sure to find a solution.

The deployment of

If the build is successful, you are ready for the final step. It is deployed to Apache because the MAC system comes with it. First will just pack good dist directory files are copied to/Library/WebServer/Documents.

Next to execute

 sudo apache start
Copy the code

Type localhost in the browser address bar and you’ll see your page.

Here’s an extra pit I ran into. If you have more than one page on your site, you’re likely to run into a 404 problem on every other page. I encountered this problem with react-router-dom routing. The root cause is that React is a single-page application that overwrites whatever address it accesses to the root directory of index.html.

Htaccess: sudo vi. Htaccess: sudo vi. Htaccess: sudo vi. Other do not understand can be a simple study of VIM.

Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} ! -f RewriteRule ^ index.html [QSA,L]Copy the code

Then go to /etc/apache2, open https.conf, search for rewrite_module, delete the first “#” and save. Restarting the Server

 sudo apache restart
Copy the code

I should be able to jump smoothly this time. Take the React tour.