Use simple scaffolding tools like VUE – CLI, egg enterprise-level architecture and code specification. For beginners, the experience is even better. Finally, we decided to use Next. Js as SSR rendering of React and Koa as back-end rendering to achieve isomorphic rendering and isomorphic development.

Analysis: The purpose of the Next. Js project is to focus on just one layer of SSR rendering. Not if we’re going to do development. Lack of unit testing, coverage testing, esLint testing of code, automatic formatting of prettier code style, packaging analysis, and most importantly, easy to use.

1.0 aims to be easy to get started – start with trial and error

Determined the general scheme, immediately began to practice, stepped on a lot of pits, the implementation of the following scheme:

  • Koa: Integrate the KOA backend architecture (plan to develop an optional Egg).
  • SSR Rendering: Next. Js easy to use rendering scheme.
  • CSS compiler: support the introduction of LESS, SASS, CSS development, external resource reference.
  • Css-in-js: Styled – JSX Integrates the SASS solution, making it easy to write CSS styles quickly.
  • Syntax detection: ESLint checks syntax rules and prettier code style, integrates TypeScript for stricter syntax and uniform code style.
  • Unit test: The React unit test based on Jest + Enzyme greatly reduces the difficulty of writing unit tests and requires no more configuration.
  • Syntax compatibility: Supports className and class in React. The CSS, LESS, Sass, and Styled – JSX support automatic prefix complement for autoprefixer
  • Code optimization: support package module analysis NPM Run Analyze :bundles; The source Maps.

2.0 is perfect in detail – directory structure optimization

Why would I strive for perfection in my directory structure? In fact, when I was doing this, I was thinking about three questions,

  1. What is the easiest directory structure to get started with?
  2. Late project development is not bloated?
  3. What directory is suitable for collaborative code development?

Reference vuE-CLI, React many projects, some more bloated projects, repeated optimization.

# file directory├─build/ ├─config/ ├─server/ │ ├─helpers/ │ ├─middleware/ │ ├─ exercisestest/ │ └ ─ index. Ts │ └ ─ routes. The ts ├ ─ SRC │ ├ ─ components / │ ├ ─ constants / │ ├ ─ pages / │ ├ ─ redux / │ ├ ─ static / │ └ ─ utils / │ └ ─ index. The TSX └ ─test/ └ ─. Babelrc └ ─...Copy the code

3.0 Endless problems – continuous iteration

The whole frame comes down, let oneself benefit a lot, but still not perfect. There are still many problems in my heart that need to be solved:

  1. Backend framework optional: The backend cannot be koA only, can also be Egg, or Java
  2. MVVM framework Optional: Not only React, but also Vue
  3. Error monitoring Optional: Whether to enable error monitoring
  4. SSR-Cli: To solve the preceding three problems, you need to develop easy-to-use configuration tools
  5. . , etc.

Next. Js +Koa’s ReactSSR enterprise solution practice ReactSSR