A website will mainly consist of a front end and a back end. In simple terms, the front end mainly consists of a screen plus an operator interface, including html, css, and javascript. The back end handles the user request control response, such as login registration, membership back office, etc. And so on, where the backend has various languages such as PHP, Java, ASP.NET, Node.js, Python, Ruby, and so on.

In this era of front-end and back-end separation, most of the Node.js servers will be opened to the front-end router. If you use the javascript framework (react, vue, and angular), you will need the server side render, and handle the screen together. With the rendering of the data, the original backend is simply responsible for API creation.

Here we will use Node.js with express and MySQL to create a simple website router.

node.js

express create router

1.First create a folder and create a package.json

1
2
3
4
5
6
7
// create folder and movein create package.json
mkdir node-express
cd node-express
npm init -y

//install express
npm install express --save

2.create app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// use express method
var express = require('express');
var app = express();

// use express get method
// create root router and print hello world
app.get('/', function(req, res){
res.send('hello world');
});

// check running enviroment
var port = process.env.PORT || 3000;

// create
app.listen(port);

// only print hint link for local enviroment
if(port === 3000){
console.log('RUN http://localhost:3000/')
}

express get
express listen
express METHOD

3.node app.js,open http://localhost:3000/
press command node app.js execute file

1
node app.js

node hello world
Successfully saw the Hello world, so we have established a very simple node server. However, the hello world printed here is only a pure string and does not have an html schema.

  1. Create a corresponding html file with a dynamic router

The ejs template is used here to facilitate us to access the data passed by node.js.

1
2
// install ejs
npm install ejs-locals --save

Create ejs corresponding files.
file structure

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// create ejs
var engine = require('ejs-locals');
app.engine('ejs',engine);
app.set('files','./files');
app.set('view engine','ejs');

...

// modify router use file name
app.get('/', function(req, res){
res.render('index');
});

app.get('/about', function(req, res){
res.render('about');
});

After the input is complete, execute node app.js to complete the router with the corresponding file.
nodedemo

express static

connect MySQL

Let’s try to concatenate MySQL and do a complete backend service. If your computer does not have MySQL installed, remember to install it first.mac install mysql tutorialwindwos install mysql tutorial
Ps.mysql remember to install the following version 5.7, just run it again to download to 8.0.x version, sequel pro connection to a bunch of problems, maybe it does not support the new version.

1.Install MySQL for node.js

1
2
// install MySQL tool
npm install mysql --save

express with mysql
node.js mysql

2.Create data in MySQL, connect SQL with express
sqldata
Added to the app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
...
var mysql = require('mysql');

// connect MySQL
var connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : '',
database: 'test'
});

// select MyGuests table and print all colums
connection.query('select * from MyGuests', function(err, rows, fields) {
if (err) throw err;
console.log('The solution is: ', rows);
});

Executing node app.js will see the printout of the data. This will successfully connect to MySQL in express. Next we will add this information to the express router. Let us use the data in the page.

  1. Set the data just sql to about page
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // create object
    var data = {};
    connection.query('select * from MyGuests', function(err, rows, fields) {
    if (err) throw err;
    // set data to object
    data.user = rows[0];
    });

    app.get('/', function(req, res){
    res.render('index');
    });

    app.get('/about', function(req, res){
    // add data property to about page
    res.render('about',{data: data.user});
    });

4.Modify about.ejs use setting data

1
2
3
4
5
<h2>Name:<%- data.id %></h2>
<h2>firstname:<%- data.firstname %></h2>
<h2>lastname:<%- data.lastname %></h2>
<h2>email:<%- data.email %></h2>
<h2>registert date:<%- data.reg_date %></h2>

5.Compile
expressdata

You’ll find that the page has got MySQL data, which completes a very basic backend architecture.

source code

Deployed on Heroku

In addition, deploying the newly-written node.js on the Internet, Heroku has a free-to-use solution, so here is heroku.

First you need to install heroku cli, then register your account, add “start”: “node app.js” to package.json in the project, and add the file Procfile.

heroku node deploy tutorial

1
2
3
4
5
6
7
8
9
10
11
12
// file package.json

"engines": {
"node": "6.2.2"
},
"scripts": {
"start": "node app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},

// file Procfile
web: node app.js

Start to deploy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//login account
heroku login

//use git
git init
git add .
git commit -m "init node"

// create heroku repo
heroku create

// push remote
git push heroku master

heroku ps:scale web=1

heroku open

After the deployment is completed, you can see the content.heroku deploy

In fact, the file structure should be separated. For fast demo and simplification, all the operations are written in a file. The router and MySQL logic should be separated. Then other tools are introduced to facilitate our operation. Make the architecture clearer and better manage it. Good deal with the next version.

After that, you should consider using mongoDB, not everyone has to install MySQL locally. Then write API to make CRUD, and then do server side render with node.js or next.