How to create-react-app icing on the cake, to meet the actual needs?

create-react-app is a one-page application scaffolding React official offer us, based on webpack configure the related functions, babel, image processing, thermal load, css modular, css preprocessor into the code divider, production build, test, Wait. In this document the Create-REACT-App . It is strongly recommended to take a look.

We recommend using npx create-react-app myapplocal installation instead of a global installation, in order to better manage the project.

The front section

To a certain extent, the scaffolding official has been close to perfect, the next expansion to make it more perfect.

The default scaffolding webpack tedious complex configurations to hide, the purpose is to allow developers to focus on the project. But also it provides a command npm run ejectto the exposed configuration, but this behavior is irreversible.

We have to do is icing on the cake, carried out without exposing the relevant configuration.

Modify the default startup port number: 3000

In practice, for example, there are multiple applications, then the port number conflict is common, then how to modify the default port number it?

1. Installation npm install --save-dev cross-env, ensure compatibility, because the window does not support directPORT=5000 node scripts/start.js
2. package.json file before starting the command addedcross-env PORT=设置的端口号

"scripts": {
    "start": "cross-env PORT=5000 node scripts/start.js"
  },

Installation Library

• axios
• react-router-dom
• redux、react-redux
• antd
• ...

Packaging the modified resource path relative path

In practical applications, the need to use resources packetized relative path, simply package.jsonfollowing configuration:

{
    "scripts": {
        ...
    },
    "homepage": "."
}

Extended configuration webpack

Use react-app-rewired , the installation of this tool, the new file config-overrides.js file in the project root directory. At this point we can be configured in a variety of webpack of which ~

but! After the react-app-rewired2.x, injectBabelPlugin way is no longer supported, you need to install the customize-cra.

Specifically, ant design has been given an official document of the latest solutions. Go to detailed view. https://ant.design/docs/react/use-with-create-react-app-cn

This way is our recommended way. Because without generating more additional files, configure and tend to be more simple and controllable manner.

Specific steps:

First, install react-app-rewired:

npm install react-app-rewired --save-dev

Package.json then modify the file as follows:

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

Next, install the customize-cra:

npm install customize-cra --save-dev

Then add in the root directory config-overrides.js file and configure, configuration, refer to customize-cra document :

1. project we react most common component library antd, we need to configure on-demand loading:

Use babel-plugin-import, it is a demand for loading babel plug assembly code and style.

npm install babel-plugin-import --save-dev

Configuration webpack:

/* config-overrides.js */
+ const { override, fixBabelImports } = require('customize-cra');

+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd',
+     libraryDirectory: 'es',
+     style: 'css',
+   }),
+ );

1. antd custom theme

In accordance with the requirements of configuration topics, custom themes need to use less variable override feature.

Installation less and less-loader

npm install less less-loader --save-dev

Configuration webpack:

/* config-overrides.js */
- const { override, fixBabelImports } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
-   style: 'css',
+   style: true,
  }),
+ addLessLoader({
+   javascriptEnabled: true,
+   modifyVars: { '@primary-color': '#1DA57A' },
+ }),
);

This takes advantage modifyVars less-loader to carry out the theme configuration. Of course, the value of modifyVars here can also be a theme file.

1. After the package we find a static folder have a lot of css and js map files, then the sourcemap how close it?

/* config-overrides.js */
const { override, fixBabelImports, addLessLoader } = require("customize-cra");

+ process.env.GENERATE_SOURCEMAP = "false";

module.exports = override(
  fixBabelImports("import", {
    libraryName: 'antd',
    libraryDirectory: "es",
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#1DA57A' },
  })
);

1. Other configurations

const { override, fixBabelImports, addLessLoader, addWebpackAlias, useBabelRc, addDecoratorsLegacy } = require('customize-cra');
const path = require('path')

// 关闭 sourcemap
process.env.GENERATE_SOURCEMAP = "false";

module.exports = override(
  // 按需加载
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    // style: 'css' // 按需加载
    style: true // antd 自定义主题 less
  }),
  // antd 自定义主题 less 变量覆盖全局 依赖 less、less-loader
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      '@primary-color': '#814a96'
    }
  }),
  // 配置别名
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src'),
    'components': path.resolve(__dirname, 'src/components'),
    'pages': path.resolve(__dirname, 'src/pages')
  }),
  // 允许使用.babelrc文件进行Babel配置。
  useBabelRc(),
  // 装饰器 依赖 @babel/plugin-proposal-decorators
  addDecoratorsLegacy()
)

npm install @babel/plugin-proposal-decorators --save-dev

proxy agent

Front-end cross-domain process.

SetupProxy.js new file in the src directory

Install http-proxy-middleware:

npm install http-proxy-middleware --save-dev

Configuration setupProxy.js

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    proxy('/api', {
      target: 'http://xx.xx.xx.xx:8000/',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    })
  )
}

The rear end portion

In practice, determining the needs of the front and rear ends are often simultaneous development, for providing an interface, the back end is not so in a timely manner, but this time how the front in the absence of back-end interface case, it can develop properly, ensure that the function normal.

The answer is: mock data.

So how do mock data, many ways, such as the use easymock analog interface data online, of course, the best way is to build their own service node, analog interface and data, more flexible, but also to upgrade technology, some knowledge of the back-end, better communication and exchange.

In the new folder src directory server-node, then in the following as an inlet index.js a build file.

Installation Library

• also
• koa-router
• koa body
• ...

koa knowledge, study on their own.

Restart, heat load

And the front end, like, change the file, it will automatically restart.

Installation nodemon:

npm install nodemon --save-dev

Placed package.json

scripts: {
  server: 'nodemon server-node/index.js'
}

Probably these, there are better suggestions or arrangements, please exhibitions ~ ~