Web application creation with Nodejs with Docker

Premise

Knowledge of completing the Nodejs course of Progate. You can use Docker. Introduction to Docker with VS Code

Target audience of this article

I learned Nodejs at Progate. People who want to make their own project next time

What to do in this article

--Create a Nodejs environment with Docker --Creating a project --Installing the library --Check the page on your browser

environment

Docker VSCode Node 14.15 Git

Creating a project

First, create a project folder in a suitable location. In this article, I created it with the name nodejs-sample-app.

Then open that folder with VS Code.

Create the following files

docker-compose.yml

version: "3"
services:
    node:
        image: node:14.15
        volumes:
            - .:/project
        tty: true
        working_dir: /project
        command: bash

Specify 14.15 for the Node version.

Enter the container and check the version.

root@cf2295d42525:/project# node -v
v14.15.4

Then you are ready to make a project.

From here you can build your project using the npm command.

Type the following command to create a file called package.json in your project.

$ npm init -y

npm init reference

root@cf2295d42525:/project# npm init -y
Wrote to /project/package.json:

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

package.json is OK if you know various information of Nodejs project

Next, create a js file that is called first in the web application. Create as follows in the same hierarchy as package.json

app.js

console.log("Hello nodejs");

Then check if it is executed by the following command

root@cf2295d42525:/project# node app.js
Hello nodejs

OK when Hello nodejs is displayed

Then change package.json as follows

package.json

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Fixed main Added comma at the end of test, added scripts.start

Then, npm start will call the command specified in scripts.start.

root@cf2295d42525:/project# npm start

> [email protected] start /project
> node app.js

Hello nodejs

This is a paragraph.

You should git init at this timing.

express installation and routing

install express

$ npm install express

The following is added to package.json

{
...
  "dependencies": {
    "express": "^4.17.1"
  }
}

Then you will have a folder called node_modules and a file called package-lock.json.

node_modules contains the installed package. I don't want to push this, so I create a gitignore and stick it in.

.gitignore

node_modules/

Since the difference is displayed by installing, commit here.

Create a routing

app.js

const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send({message: "ok!"});
});

const port = process.env.PORT || 3000
app.listen(port, () => console.log(`server started port ${port}`));

When you do npm start, it will be displayed as follows.

root@cf2295d42525:/project# npm start

> [email protected] start /project
> node app.js

server started port 3000

However, as it is now, it cannot be opened in the browser

It is necessary to describe port in docker-compose.

docker-compose.yml

version: "3"
services:
    node:
        image: node:14.15
        volumes:
            - .:/project
        tty: true
        working_dir: /project
        ports:
            - "3000:3000"
        command: npm start

Added ports and changed to run npm start when the container is launched.

After editing docker-compose, you need to recreate the container. Delete the container once and execute the following

$ docker-compose up -d

Check the log to see if it is running properly as a server

nodejs-sample-app(main)$ docker-compose logs       
Attaching to nodejs-sample-app_node_1
node_1  | 
node_1  | > [email protected] start /project
node_1  | > node app.js
node_1  | 
node_1  | server started port 3000

It seems to go.

Check with browser

ejs

Install to use ejs

$ npm install ejs

Create a views folder and create an ejs file in it

views/index.ejs

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>
<body>
    <p><%= message %></p>
</body>
</html>

app.js

const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.render("index.ejs", {message: "Uoooooooo"})
});

const port = process.env.PORT || 3000
app.listen(port, () => console.log(`server started port ${port}`));

Render ejs with render and embed "message"