Aotoo-hub: An integrated big front-end architecture solution

At the end of the year, open source a set of our big front-end architecture aotoo-Hub, friends are very cool to use.

GITHUB — I heard the star folks are going to get rich next year

Aotoo-hub is a big front-end solution that has been launched. During the two years of iteration, from WebPack-1 to WebPack-4, there were not too many times of reconstruction from the pure front-end scaffolding to the integrated node end overall scheme, from complex to simplified. Aotoo-hub is always pursuing a simple, easy-to-use and deployable integrated front-end development experience. We are either in the process of refactoring or in the process of refactoring (to maintain consistency).

Aotoo-hub is a set of front-end and node end love each other, you have me, I have you in the big front-end solution. F sister is responsible for static resource compilation and sharing, while N brother is responsible for service, routing and rendering. Together, they build templates, blooming their beauty and talent in the world.

All of a sudden, I found that my imagination is also quite big. After all, a complete big front-end solution needs to solve the problems of the development and deployment of front-end and node ends, and integrate both ends into an organic whole, while also taking into account the engineering implementation. Throughout our aotoo-Hub development iterations, we followed these principles

generality

Support as many open source frameworks as possible so that we can choose the right open source framework for different businesses. Aotoo-hub currently supports React, Vue, and Alpha. In the future, it may be possible to add app frameworks such as RN or FLUTTER?

fusion

The organic integration of front-end and Node not only provides a better experience, but also enables front-end and node to share static resources, deploy homogeneous components, simplify Resful routing, etc. The integrated design makes the development, deployment, and maintenance of projects simple and easy to maintain. Maybe you’ll use a Node framework like Egg or Nest for backend support. Maybe a better solution is Java, Go, PHP, etc.

Ease of use

Aotoo-cli is a set of command tools specifically designed for AOtoo-Hub, which makes aotoo-Hub easier to use

Start the default project

# installation aotoo - cli
$ npm install -g aotoo-cli  # aotoo -v Check whether the installation is successful

# new workspace
$ aotoo init oneWorkspace  Create directory oneWorkspace and initialize the project environment

Start the default project
$ cd oneWorkspace
$ aotoo dev
Copy the code

New project

# installation aotoo - cli
$ npm install -g aotoo-cli  # aotoo -v Check whether the installation is successful

# new workspace
$ aotoo init oneWorkspace  Create directory oneWorkspace and initialize the project environment

# New project
$ cd oneWorkspace
$ aotoo create newProject  Create a project named newProject

# Start the project development version
$ aotoo dev newProject  # then open browse http://localhost:3000

# build project
$ aotoo build newProject Static resources are CDN

# Start production project
$ aotoo build newProject
$ aotoo start newProject  Start with Node
$ pm2 start index.js -- --start newProject  # Start production projects with PM2

Copy the code

Right? The command line shouldn’t be too complicated. Ok, here is a brief introduction to AOtoo-Hub, followed by a brief introduction to the process of creating a project and initializing the file structure of the project

To prepare

Support system

mac osx
linux
~~windows~~, mainly/and\The problem of

The global environment

node-gyp
node-pre-gyp

$ npm install -g node-gyp
$ npm install -g node-pre-gyp
Copy the code

1. Create a workspace

Creating a workspace is actually a process of preparing the compilation environment. We will prepare the compilation files, project directories, and project configuration files

Create a new namespace
$ aotoo init wp-1
Copy the code

aotoo.config.js

Aotoo-hub configuration file, you can set the initial directory of the project, version number and other configuration information here, the configuration content is roughly as follows

const path = require('path')
const pakg = require('./package.json')
const ROOT = __dirname
const version = pakg.version
module.exports = {

  // Version information, specified by the version of package.json
  // By default, all project outputs are based on this version value
  The version information is used to generate the version directory under dist
  version: version,

  // Node's environment variable NODE_ENV
  mode: process.env.NODE_ENV,

  // Workspace root address
  // Will be used when aoToo is installed, and the Node side (directory level is very deep) will be used
  ROOT: ROOT,

  // The original root directory for all projects
  src : path.join(__dirname, 'src'),

  // Configure the default project information
  // Applets must use this configuration
  // When we do not use the start, name and other command options, aotoo-hub will look for the project whose startup is true and try to start it
  The command line can simplify projectName once we have configured the default project
  apps: [
    {
      // Project name, same as SRC project project directory
      // Every project must have its own unique name
      name: 'aotooSample'.// Whether to start the project
      startup: true.// Specify the project stream directory
      src: path.join(ROOT, 'src/aotooSample'), 

      // The default static resource output address is SRC /dist
      // Here you can manually specify the directory you want to output
      // dist

      // Specify the port address of the project
      // Specify the project port. The value can be null. The system automatically assigns the port address
      port: 8400}}]Copy the code

The build directory

Contains all compiled files

SRC directory

SRC is the source directory of the default AOtoo-Hub. All new projects will be generated in this sub-directory

AotooSmple directory

Aotoo-hub is one of our demo projects and is the default project of AOtoo-Hub for your reference

Start the default project in development mode
$ aotoo dev
Copy the code

2. New projects

Let’s start a new project

$ cd wp-1
$ aotoo create newProject
Copy the code

Project initial directory

Complete Project Catalog

The initial directory is a stripped-down version of the project that retains the most basic files and directories. The complete directory is shown below

Wp - 1 └ ─ ─ the SRC └ ─ ─ newProject ├ ─ ─ component / / component │ └ ─ ─... ├── SSR /sync /...... ├── ├─...... ├ ─ ─ js/js/front end business directory │ └ ─ ─ index. The js ├ ─ ─ CSS/CSS/front end business directory │ └ ─ ─ but styl ├ ─ ─ HTML / / to the template directory for the front-end business, general template will be automatically generated, such as the need to customize screen version, Is generated according to the rules of the same name custom template │ └ ─ ─ index. The HTML └ ─ ─ server / / the source at the node directory │ ─ ─ pages / / koa2 control layer │ └ ─ ─ index. The js └ ─ ─ the plugins / / ├ ──...... custom plugin directory for nodeCopy the code

Pay attention to

All files and directories starting with an underscore are ignored during compilation, such as _abc/ or _abc.js

Configs directory

The project environment configuration folder stores multiple environment configuration files, such as test 1, test 2, and production environment configurations. All environment configurations are merged with the common default.js configuration file in application

Js directory

Store the public JS, business JS directory

Vendors directory Common JS, common CSS, are automatically imported by templates. We divide the common JS into two vendors. JS and common. JS, and the common CSS has only one common. CSS vendors. The *.styl introduced in common.css: Vendors. JS (AOtoo – Hub only supports Stylus) is automatically generated by WebPack according to the business JS, and webPack separates it into common styles, which are also automatically imported into dist by the template: Compile to generate dist/**/js/vendors
Dist /**/js/*.js all templates, styles automatically generated basis, because all files in the JS directory are treated as independent business JS files, will be automatically called by each business page dist: compilation generates dist/**/js/*.js
Aotoo-hub automatically generates a template file (based on js/*.js) containing a div with id=root. If you need a special template, create it in a file with the same name as *.js, for example, SRC /.. / js/ABC js corresponding SRC /.. Dist /**/ HTML /*.html
CSS directory Non-essential directory, passively generated, AOtoo-Hub automatically generates stylus files (introduced according to js/*.js) dist: Compiled to generate dist/**/ CSS /*.css
The Component directory is a non-essential directory, the directory where components are stored, an alias directory that we can import components from the front-end on the Node side

  import someComponent from 'compoent/someComponent'.Copy the code

Sync directory is not a necessary directory, isomorphic service module directory, an alias directory, we in the node end, the front-end can easily introduce components

  import someMoudle from 'sync/someMoudle'.Copy the code

The node side of AOtoo-Hub is implemented based on the open source library AOtoo-koa-Server. The default new project is a pure front-end project, but some projects have SEO requirements that require us to start the Node side to render the page
```
  # Start the project with node
  $ aotoo dev newProject --server
Copy the code
```
The new project has a default DemoIndex page, and the Node side of the new project will automatically help you set up all the environment required by the Node side and create it at the same timepages/index.jsThe default DemoIndex page
- configs.js
  
  This file will be launched based onsrc/newProject/configs/The environment configuration in the directory is automatically created, so if you want to modify the configuration, go tosrc/newProject/configs/In the
- index.js & lib.js
  
  aotoo-hubConfigure the server environment for you inlib.jsIf you need to extend the configuration, such as using the new KOA2 plug-in, it is recommended to changeindex.jsFile, see lib.js
- pages/*.js
  
  Here is nodeside business JS, andsrc/js/*.jsThe service name is the same, for examplesrc/newProject/js/abc.js= >server/pages/abc.js

    // server/pages/abc.js
    // This file is contro layer file in KOA2 framework MVC
    // Aotoo-hub takes over the rendering method, so you only need to return the data part required for rendering, oridata
    Return oridata * CTX {context} koa2 CTX variable * * * get: method = get * post: method = POST * put: method = PUT */
    module.exports = function (oridata) {
      return {
        get: function name(ctx) {
          oridata.title = 'AOToo-HUB Multi-project Full Stack Scaffolding'
          oridata.root = '123'
          ctx.redirect('/docs')
          // return oridata
        }, 
        post: function name(ctx) {
          return oridata
        }
      }
    }
Copy the code

Dist The file location where the front-end static resources are compiled
- 1.0.3 /
  
  Version directory, according to the version information in aotoo.config
  - dev/
    
    The project is in development mode and production mode uses/Pro directory
    - HTML/HTML template compilation output directory
    - Mapfile. json Resource mapping file

3. Start the project

Single project start

Build and start the front end
$ aotoo dev newProject

# if node is required (this command takes effect once and lasts a lifetime, and does not require '--server' for subsequent startup)
Build and start the Node side
$ aotoo dev newProject --server

# production build
$ aotoo build newProject

# start node only (compile complete)
$ aotoo start newProject

Compile or start with the environment
$ aotoo start newProject --config env_test
Copy the code

Multi-project launch

The production environment supports multiple open projects and will automatically assign ports to each project (not specified). The development mode is subject to nodemon’s unfriendly function to multiple open, and will report an error (pM2 can be replaced). It is also very simple to start multiple open projects, you can refer to the above configuration of AOtoo.config. js, and start the startup: False Set startup: true to aotoo dev or a group of project names, aotoo dev –name aaa –name BBB

Today I have a general introduction to AOtoo-Hub. Please issue if you have any questions. Since I have social laziness, I may not be able to answer the questions in time.

Aotoo-hub: An integrated big front-end architecture solution

generality

fusion

Ease of use

To prepare

Support system

The global environment

1. Create a workspace

aotoo.config.js

The build directory

SRC directory

AotooSmple directory

2. New projects

Project initial directory

Complete Project Catalog

Pay attention to

Configs directory

Js directory

3. Start the project

Single project start

Multi-project launch

Related Posts

CSS Best Practices (part 1)

Read the source code from Redux

Webpack Loaders,