Today’s tech news flash

Global demand for personal computers (PCS) soared in the first quarter of 2020, after strict enforcement of lockdowns around the world prompted a surge in remote working and learning, foreign media reported. But the crisis also caused major delays in production and logistics, resulting in an 8 per cent year-on-year decline in global PC shipments and a 21 per cent plunge in Apple’s Mac.

Author’s brief introduction

This article is from Principal I’s contribution. He shares his process of building a personal website with Flutter. I believe it will be helpful to everyone! Thanks also to the author for his excellent article.

Principal I’s blog address:

https://www.jianshu.com/u/77699cd41b28

The paper

There was a time when you had the urge to build a personal website. I had this idea since the first time I started blogging, but it didn’t fit. Until I saw that Flutter had Web support, I thought, it’s time, must and must be done

https://github.com/ibaozi-cn/ibaozi

Instead of building on this website, I applied for a new domain name, Jetpack.net.cn, after reading my previous blog, until I made an online generation tool for the Android Jetpack template project. I applied for this in order to integrate Android Jetpack. Provide an easy to remember domain name.

Of course, I also have another project, which is to create a Jetpack for Flutter ecology. This blog is the first step of this project, which is completely open source for everyone. Let the students who read my blog build a website with me and learn about Flutter technology.

Environmental requirements

Flutter

You need to switch beta versions to support Web development. Environment Building skip to the previous blog: Environment Building of The Flutter series.

https://www.jianshu.com/p/ab2bbcdc54d0

Node

Skip to download: download | Node. Js.

https://nodejs.org/zh-cn/download/

Environment configuration: Node.js installation configuration.

https://www.runoob.com/nodejs/nodejs-install-setup.html

Scaffolding: Express generator.

https://expressjs.com/zh-cn/starter/generator.html

For details, see below.

Flutter Project creation

Pretend you’ve set up the environment.

step 1

Open the terminal and switch the Flutter branch.

Flutter channel beta flutter upgrade flutter config --enable-web Flutter Devices Chrome • Chrome • web-javascript • Google Chrome 78.0.3904.108Copy the code

After executing the commands line by line and finally seeing Chrome, congratulations.

step 2

Open Android Studio.

The name and description of the project are briefly modified. Next, the next step.

Change the package name, then Finish, and wait for a while.

The project was created successfully. This is the end of the post blog slowly introduced the details of each development.

Node project Creation

We directly open the Terminal of the Flutter project.

mkdir node

mkdir server

cd node/serverCopy the code

Go to the Server directory and now your Node environment should be ready to start building projects using the Express generator.

NPM install express-generator-g express --view=pug myappCopy the code

Change myApp to your own project name. And you’ll see when you’re done.

The following:

cd myapp
npm i
npm startCopy the code

Browser try http://localhost:3000 see the following ok.

Start project association

step 1

Implemented in the Flutter project.

flutter build webCopy the code

Build the Web package, which eventually generates the Web package in the Build folder, which contains the relevant files for the site.

step 2

Copy the files from the Web package to the node project’s public file.

I created a public_flutter_web and recommend you do the same for future file differentiation.

step 3

Change Express, because the default express is to display the views package of web pages, and the default is not HTML implementation. Delete all the files in the following figure.

Open app.js file, delete the delete tag part, add the add tag part:

step 4

Save the changes, restart the service NPM start, and open http://localhost:3000 again. See the following:

And that’s it, Nono, for a lazy person, we’re going to write some scripts to help the project build automatically.

step 5

Since the Node project directory is too deep and cumbersome to run on the command line, let’s write a shell script to help me out. Create a bin folder in the root of the Flutter project to hold our script.

Right-click New File and name it test_start_node.sh.

#! /usr/bin/env bash
node node/server/bin/wwwCopy the code

It’s easy. This script will help us start the Node service. And of course we have the flutter term

Order to build some scripts, automatic copy files to the specified directory and so on, these slowly fill up after oh.

The last

To upload the code to Github:

https://github.com/ibaozi-cn/flutter-jetpack

The last

Log on to your cloud server and download the project to the server through Git. Here we need tools to assist our service deployment. I choose PM2 + Nginx to get my service started.

Here is not detailed, there is a sea on the net, you need to wave. Leave a message if you have any questions. I can help you. Finally, with PM2 and NGINx, the project worked perfectly. Ibaozi.cn is still available. We will use ibaozi.cn and we will move to jetpack.net.cn later.