Multipages generator released today 👏! Mom no longer need to worry about mobile terminal H5 website construction!

Update: RECENTLY I released a redux simplified development framework Booto, you can have a look, juejin.cn/post/684490…

The Multipages-Generator (MG) is a web scaffold designed for mobile H5 that allows you to develop h5 with the right posture, fast motion, focus on business, have fun and have a quick release process.

This article is suitable for readers 👨👨👧👦

At present, H5 pages are common in mobile apps with over 100 million users, such as Handtao, JINGdong, Toutiao and Meiyou. They are quick to update, flexible and easy to share and spread. Here are a few examples of h5 among them :(hand wash, pomelo). These apps are embedded with hundreds, thousands of H5 pages. What is the framework behind their development of the H5?

If you also want to develop some H5, or simple React, vue applications, do some advertising, do some interaction and marketing, post to wechat moments to spread, then how to quickly build and release these H5?

If you are a beginner of front-end work, build such a multi-page H5 website, what kind of architecture is the right way to open?

If you want to learn with ear webpack, vue, nodejs, es6, alternative MERN framework, that this article is also suitable for you!

Most importantly, if you’re sick of mobile adaptation, mobile performance optimization, and you just want to focus on feature development, this article is for you!

How long would it take you to build an H5 page from scratch and publish it online?

Tock tock tock tock! ~ You may need to do the following events 😥?

• Set up the server project, divide the directory structure, configure the database mysql, mongodb, redis;
• Set up front-end engineering and divide directory structure
• The front-end and the server are divided into dev, test and PROD environments
• Front-end configuration webpack to do compilation, multiple H5 is multi-page, you may have to flip webpack multi-page configuration scheme
• Ok, ready to start development, mobile H5 still has adaptation issues, ios has Retina display, android needs to be compatible with older models
• Developed, to produce a release compiled, production of static files on the server? No, CDN upload is better
• The next step is to deploy, single instance is easy to hang, do cluster publishing or introduce PM2 to do cluster publishing
• The front end was not familiar with Linux and released most of the day
• Error check log, toss back and forth for half a day
• Toss toss for a long time, finally online, can forward the circle of friends ~

You know how long it’s gonna take to do that. There is a solution to this problem, the multipages-Generator is available.

servingmultipages-generator! 🧖

Multipages-generator is an EXPRESs-generator NPM module that generates multi-page H5 website architecture templates with one click. It is mainly for mobile H5, or simple vue, React, Angular application website architecture template; In fact, this architecture template is also the epitome of the website architecture of app development by Taobao, Toutiao, Meizu and other companies. Note that it is an architecture, a mobile solution, not a ready-made deployable web site template.

His main characteristics are complete and fine, comprehensive, he basically all the development of H5 needs, fine is developed out of the webpage high performance (better in the future), good mobile phone adaptation. If so, please go to Github.

A screenshot of h5 production, using multipags-Generator to develop the following H5, I estimated that it only takes 1 hour.

You can also use mobile chrome, wechat, Taobao scan to open the experience

You can test its performance, android, iHone 4/5/6/7/8, iphoneX, etc.

The Multipages generator supports the following features:

• Support webpack to compile multiple pages, you can compile the specified project, also can compile all projects
• Front-end compilation supports hot updates
• Compiled web page performance has been optimized, in line with best practices (not perfect, add the full content of Taobao performance optimization later)
• Support development and Producton environment differentiation
• Producton environment can be configured to produce CSS, JS, and images automatically compiled and uploaded to OSS server
• Webpack compiled HTML templates support templating engines such as EJS
• Use Node.js for service, nodemon hot update
• Pm2 cluster startup is supported
• 🔥 (new) Added mobile Flexible layout solution, suitable for different screen sizes and DPI, added postCSS support
• 🔥 (new) supports production release mode, configures qiniuyun CDN, uploads compiled JS, CSS, images and other resource files to CDN

The installation

NPM global installation can be used:

npm install multipages-generator -g

Create and run 📽

Step 1: Run multipages-generate to create a website

multipages-generate

Copy the code

Step 2: Enter your project name when prompted

? Project name: < Input Project name >Copy the code

Step 3: Enter the project name and download the dependency package

   cd{your project name} NPM run installCopy the code

Step 4: Start the front-end and server environments

NPM run watch:viewport NPM run watch:viewport NPM run start NPM run startCopy the code

After four steps, your default browser automatically open the page (if not, manually access localhost: 2000) = = note that currently find examples viewport material picture (in/apps/viewport/assets/imgs directory) after the global installed coding problem. Does not affect the operation, but if you want to see the demo page above please download material pictures from my network backup, extract on/apps/viewport/assets/imgs directory to replace all the wrong picture = =

More appropriate demos will be used in the future

Operation and development

Starting the server

If the above steps have not been performed, run the following command

    npm run start
Copy the code

Front end hot start project ViewPort

Open another terminal black window

    npm run watch:viewport
Copy the code

A page will open, if not manually open http://localhost:2000

Note:

This application needs to start two services, one is the server node.js (port 4000 by default), one is the front end (browser-sync, default 2000) here in order to make the development more pleasant, start the front end service, with hot update performance, each update automatically compiled and output to the corresponding directory of the Express project. Project deployment does not require startup;

Add a new item

There are two facemerge and Viewport projects in the apps directory. A new project, XXX, is added. For the directory structure, refer to viewport

├─ Facemerge │ ├─ Assets │ ├─ CSS │ ├─js │ ├─ ├─ voicemergeCopy the code

    "watch:facemerge": "rimraf public &&cross-env ENV=dev PROJECT_NAME=facemerge node ./tools/webpack.watch.js"
Copy the code

The startup method is the same as the development Mode Startup Project FacEmerge described above

release

Once you’ve developed it, post it online. Here’s a 30-minute tutorial for Posting it online. But only for personal play, not for production. But in fact the core idea used in the enterprise is this + cI automation deployment;