Forem: Vladislav Guleaev

Jest Tutorial: Unit Tests

Vladislav Guleaev — Mon, 21 Sep 2020 17:16:49 +0000

Hello everyone 👋! A new video is released on my YouTube channel! Waldev channel is mostly focused on tutorials about JavaScript and Web related technologies. 🚀

This time I decided to make tutorial about Jest. Since there are not so many tutorials about Unit Testing. This topic deserves more views, please watch it here:

Please subscribe to my Waldev channel if you are interested 🎥. Thank you!

I appreciate any support and feedback you can give, otherwise I can't improve and be better. 💖

NextJs Tutorial (Nextjs SSR, Bulma, Css Modules, GitHub Api, Vercel)

Vladislav Guleaev — Tue, 23 Jun 2020 17:48:04 +0000

Hello everyone 👋! Recently I launched my own youtube channel focusing on tutorials. It mostly JavaScript and Web related technologies. 🚀

I started with tutorial series about Nextjs. You can watch it here:

Please subscribe to my Waldev channel if you are interested 🎥. Thank you!

I appreciate any support and feedback you can give, otherwise I can't improve and be better. 💖

Dockerize a React app with Node.js backend connected to MongoDb

Vladislav Guleaev — Sun, 05 Jan 2020 13:06:57 +0000

Hello dear coder, welcome to my last tech article of series dedicated to Node.js and Docker. Hope you enjoy!

Problem:

We already now how to use Docker together with Node and Mongo from previous article in this series. In order to complete our MERN stack application we need to add frontend part. In our case, frontend will be implemented using React. Let's learn how to create full working application with frontend, backend, database and run everything in Docker!

1. Clone backend Node.js

In previous part of this series we created a Node.js app using MongoDb with Docker. For this tutorial we will need the same project. Clone source code from here or run this command:

git clone https://github.com/vguleaev/Express-Mongo-Docker-tutorial.git

After cloning is done, rename folder from test-mongo-app to api. This will be our backend.

To test that everything works, open api folder and run npm install. After dependencies are installed, let's check if everything works. 🍾

docker-compose up

This command will use our docker-compose.yml to pull mongo image and start express server connected to MongoDb.

If everything is ok you should see in console something like this:

web_1    | Listening on 8080
web_1    | MongoDb connected

Open in browser this endpoint http://localhost:8080/users and you should get an empty array as response. Which is correct because our database is completely empty for now.

2. Create React app

Time to develop our frontend part. Go up to parent directory and run:

npm i create-react-app -g
create-react-app ui

Right now our folder structure should look like this:
...
├── / api
└── / ui
(Where api is cloned backend app and ui is newly created React app.)

To be sure that everything works let's open ui folder and start React app:

cd ui
npm start

You should see basic React app at http://localhost:3000. 🎈

3. Dockerize React app

In ui folder create a .dockeringore file:

node_modules
.git
.gitignore

(Without this file, our docker build command will be just hanging on Windows.)

Also create a Dockerfile file in ui folder:

FROM node:8
# Create app directory
WORKDIR /usr/src/app
# Install app dependencies
COPY package*.json ./

RUN npm install --silent
# Copy app source code
COPY . .

#Expose port and start application
EXPOSE 3000
CMD ["npm", "start"]

Let's test that React works in docker. First we will build the image with tag react:app:

docker build -t react:app .

Now run our tagged image and use the same port for docker:

docker run -p 3000:3000 react:app

Open http://localhost:3000 and you should see React served from Docker. 👍

⚠️ If you just close like you usually do with Ctrl+C container won't stop. To stop container from running do docker ps command.

CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                    NAMES
06c982ce6ae9        react:app           "docker-entrypoint.s…"   12 days ago         Up About a minute   0.0.0.0:3000->3000/tcp   strange_montalcini

Then pick desired id and stop container.

docker stop 06c982ce6ae9

4. Call api from React app

Open ui folder and install axios

cd ui
npm i axios

We will change App component a bit to have a button to create users and show list of users ids. We will call /user-create and /users GET endpoints from our Nodejs app.

Paste this into App.js file:

import React, { Component } from 'react';
import logo from './logo.svg';
import axios from 'axios';
import './App.css';

const apiUrl = `http://localhost:8080`;

class App extends Component {
  state = {
    users: []
  };

  async createUser() {
    await axios.get(apiUrl + '/user-create');
    this.loadUsers();
  }

  async loadUsers() {
    const res = await axios.get(apiUrl + '/users');
    this.setState({
      users: res.data
    });
  }

  componentDidMount() {
    this.loadUsers();
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <button onClick={() => this.createUser()}>Create User</button>
          <p>Users list:</p>
          <ul>
            {this.state.users.map(user => (
              <li key={user._id}>id: {user._id}</li>
            ))}
          </ul>
        </header>
      </div>
    );
  }
}

export default App;

Since we run frontend on port 3000 but backend is running on port 8080 we are going to have a CORS problem. To avoid it go to api project and install cors package.

npm i cors

Then use it in server.js file:

const express = require('express');
const app = express();
const connectDb = require('./src/connection');
const User = require('./src/User.model');
const cors = require('cors');

app.use(cors());
// ...

5. Run React and Node together in Docker

Final step! Now remove docker-compose.yml from directory api and create docker-compose.yml in root folder. Paste this:

version: '2'
services:
  ui:
    build: ./ui
    ports:
      - '3000:3000'
    depends_on:
      - api
  api:
    build: ./api
    ports:
      - '8080:8080'
    depends_on:
      - mongo
  mongo:
    image: mongo
    ports:
      - '27017:27017'

Our root folder structure now looks like this:
...
├── / api
├── / ui
└── docker-compose.yml

We have one docker-compose that describes what services we want to run in Docker. In our case we have three services: ui, api, mongo. 🐋

For each service will be created docker image using Dockerfile in each project. We specify the path in line build. (e.g. build: ./ui)

For mongo we don't have project to build image, because we use predefined image from docker hub. (e.g. image: mongo)

We also specify ports and dependencies. In our case first will be started mongo on port 27017, because api depends on mongo. Second container is api on port 8080 because ui depends on it. Last container is ui which starts on port 3000.

Finally from root folder run all services with one command! 🧙

docker-compose up --build

Open http://localhost:3000/ and click on button to create users. Open Developer tools to have a look at calls. Now we run both frontend and backend from docker!

6. Use React production build

Right now we start our React app with development server which is probably not what we want to use in production. But we can easy fix this problem.

We simply need to change our Dockerfile in ui project. We will start a production build and serve it using nginx server. Replace everything with this:

# build environment
FROM node:12.2.0-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json /app/package.json
RUN npm install --silent
RUN npm install react-scripts@3.0.1 -g --silent
COPY . /app
RUN npm run build

# production environment
FROM nginx:1.16.0-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Since we now expose port 80, we need to change it from 3000 to 80 in docker-compose.yml.

  ui:
    build: ./ui
    ports:
      - '80:80'
    depends_on:
      - api

Now run again magic command to start everything in docker 🔮

docker-compose up --build

Open http://localhost/ and you should see exactly the same working application but now React is running in production mode.

See the source code here. Enjoy!

Congratulation you successfully dockerized React, Nodejs and Mongodb! 🎉🎉🎉

🚀 If you read something interesting from that article, please like and follow me for more posts. Thank you dear coder! 😏

NSQ Tutorial: Build a simple message queue using NSQ

Vladislav Guleaev — Fri, 22 Nov 2019 08:58:47 +0000

Hello dear coder, welcome to my tech articles series dedicated to NSQ. There are not so many tutorials about this technology so I decided to make one. Hope you enjoy!

Why NSQ?

NSQ is a realtime distributed messaging platform written in Go and created by wellknown service bit.ly.

It's plain and simple comparing to similar systems (like RabbitMQ), easy to use and has a good intuitive admin UI. If you have never used any Message Queue system before, NSQ is the best option to understand its principles.

Concept of Message Queue:

Message Queue is an implementation of the publisher/subscriber architectural pattern which is used for communication between different parts (applications, services, etc) of your system.

In basic words, when an event happens (e.g. new user is created), a message is published to a message queue. Any services that are interested in that event is subscribed to that message.

As soon as message is published, interested service (consumer) receives a message and does some actions. (e.g. send an email to new user).

1. Download NSQ

Go to https://nsq.io/deployment/installing.html and download nsq binary for your OS.

Open extracted folder and there you can see different executables:

nsqlookupd.exe
nsqd.exe
nsqadmin.exe
.. and many others but they are not so important for us

2. Run nsqlookupd

Open extracted directory in shell/command terminal you prefer and run:



./nsqlookupd

You should see the following output:



$ ./nsqlookupd
[nsqlookupd] 2019/10/21 13:21:18.830625 INFO: nsqlookupd v1.2.0 (built w/go1.12.9)
[nsqlookupd] 2019/10/21 13:21:18.832649 INFO: TCP: listening on [::]:4160
[nsqlookupd] 2019/10/21 13:21:18.832649 INFO: HTTP: listening on [::]:4161

Which says that nsqlookupd is running and has two interfaces:
one is using TCP with port 4160 and another is using HTTP with port 4161.

To check that it works we can open browser and access http://localhost:4161/topics



{
    topics: [ ]
}

This is the answer you should get and its fine. Right now we don't have any topics registered yet.

You can also get all channels, producers for specific topic, nodes of nsqd, create topics, chanels, etc. Find more in documentation here.

Basically nsqlookupd is a discovery service that helps consumers to find nsqd producers for specific topic.

nsqlookupd is the daemon that manages topology information. Clients query nsqlookupd to discover nsqd producers for a specific topic and nsqd nodes broadcasts topic and channel information.

3. Run nsqd

Now run in shell nsqd:



./nsqd

You should see the following output:



[nsqd] 2019/10/21 13:39:56.997863 INFO: nsqd v1.2.0 (built w/go1.12.9)
[nsqd] 2019/10/21 13:39:56.998861 INFO: ID: 791
[nsqd] 2019/10/21 13:39:57.000861 INFO: NSQ: persisting topic/channel metadata to nsqd.dat
[nsqd] 2019/10/21 13:39:57.011825 INFO: HTTP: listening on [::]:4151
[nsqd] 2019/10/21 13:39:57.011825 INFO: TCP: listening on [::]:4150

4. Publish a message

Now it's time to publish our first message to queue. Open postman or any other tool to make HTTP calls and do a request to POST:http://localhost:4151/pub?topic=test
with a JSON body



{
  "text": "some message"
}

/pub is an NSQ endpoint to create messages. It requires a query param called "topic". Topic represents a name of the message, any message published with the same topic will be consumed by every listener of this topic. 📨

If the request is 200 OK, our new topic will be created automatically. You will a notification about that in console of nsqd:



[nsqd] 2019/10/21 13:49:04.740353 INFO: TOPIC(test): created
[nsqd] 2019/10/21 13:49:04.740353 INFO: NSQ: persisting topic/channel metadata to nsqd.dat

Another line says that information about created topic was persisted to a metadata nsqd.dat file.

Open nsqd.dat file in bin directory with any text editor and you will see your topics there. But we have a much better option to view topics and maintain them. Time to use NSQ Admin.

5. Start NSQ Admin

Now run in shell nsqadmin:



./nsqadmin

You will see an error in console ❌



[nsqadmin] 2019/10/21 14:18:04.255018 FATAL: failed to instantiate nsqadmin - --nsqd-http-address or --lookupd-http-address required

Error says that you need to provide an address to nsqd or nsqdlookup. Let's do it!



 ./nsqadmin --nsqd-http-address localhost:4151

Now you will see a message that nsqadmin is running:



 [nsqadmin] 2019/10/21 14:21:41.223806 INFO: nsqadmin v1.2.0 (built w/go1.12.9)
 [nsqadmin] 2019/10/21 14:21:41.224804 INFO: HTTP: listening on [::]:4171

Open in browser this address http://localhost:4171

You should be able so see one topic "test" there. Also if you go Nodes tab you can see that our nsqd instance is running and connected. 👍

If you press on Lookup tab you will see a warning. This is because now we are connected directly to nsqd avoiding using the nsqdlookup which is not recommended by creators of NSQ.

Now run this command with specific lookupd address:



$ ./nsqadmin --lookupd-http-address localhost:4161

Open NSQ Admin UI and click Lookup tab... seems to be ok. But check Nodes tab again. Wait.. zero nodes? Why?

Right now we connected nsqadmin to nsqlookupd but nsqd instance is not connected to anything. So our chain is broken 💥!

Correct dependencies should be nsqadmin -> nsqlookupd <- nsqd. Let's fix it.

Just close nsqd instance and run it again specifying nsqlookupd address:



./nsqd -lookupd-tcp-address localhost:4160

This time we should use TCP address of lookupd, which port is 4160.

Refresh Admin UI and everything should work again. Both tabs work perfect! ✨

6. Create consumer application

We need to have a basic application to consume our messages. Let's create a simple Node.js app for that goal.

Create a new folder with any name and run following commands:



npm init -y
npm i express nsqjs

Express library is needed to create an http server and nsqjs is a official client library provided by NSQ team. link here

Create server.js file



const express = require('express')
const nsq = require('nsqjs')
const app = express()
const port = 3000

const reader = new nsq.Reader('test', 'test', {
  lookupdHTTPAddresses: 'localhost:4161'
})

reader.connect()

reader.on('message', msg => {
  console.log('Received message [%s]: %s', msg.id, msg.body.toString())
  msg.finish()
})

app.listen(port, () => console.log(`NSQ Consumer is listening on port ${port}!`))

In our project directory run:



node server.js

Your will receive all queued messages now. Consumer app console should show this:



NSQ Consumer is listening on port 3000!
Received message [0c6020dfa34cf000]: {
  "text": "some message"
}

That happened because our message waited in queue until it was consumed.

In NSQ admin if you select Nodes you will see that new ClientHost is connected now for some seconds ago.

7. Test receiving messages

Keep server.js running and now make a request with POSTMAN to publish new message to topic "test"

POST http://localhost:4151/pub?topic=test
with a body



{
    "text": "CONNNCTED!!! YEAH!!"
}

You should see it in a console immediately. Congrats! 🎉 You have a working message queue system. 🖅 🖅 🖅

⚠️ NOTE: If you press Counter in NSQ Admin you will see that now its not zero anymore.

If you send messages to other topics you wont see it because we subscribed our consumer app to only one topic which is "test".

🚀 If you read something interesting from that article, please like and follow me for more posts. Thank you dear coder! 😏

photo by [Anastasia Dulgier](https://unsplash.com/@dulgier?utm_source=medium&utm_medium=referral) on Unsplash

Dockerize a Node.js app connected to MongoDb

Vladislav Guleaev — Fri, 28 Jun 2019 13:32:28 +0000

Hello dear coder, welcome to my tech articles series dedicated to Node.js and Docker. Hope you enjoy!

Problem:

You already know how to use Docker together with Node from previous article in this series. I know that we all love MERN/MEAN stacks. Our next step is to understand how Node and Mongo connects to each other running inside containers. Lets’ go!

1. Install MongoDb locally

Time to get into some document db stuff. First of all download MongoDb server from here.

If you haven't change anything during install, it should also install a thing called MongoDb Compass Community.

This is a great tool to inspect, change, add or remove data in collections in MongoDb. You can connect to the local instance by using default address and port like on this image below or connect to any other server.

To connect locally just press connect. Inside you can see some default collections and you can play around. We will need MongoDb Compass a bit later.

2. Connect to MongoDb through Express app

In this tutorial I will be using my favorite editor Visual Studio Code. You will also need Nodejs and Docker installed. In my case I’m using Windows, so I got Docker for Windows from here.

Now run following command:



mkdir test-mongo-app && cd test-mongo-app && npm init -y && code .

Time to install dependencies. We will need express and mongoose packages.



npm i express mongoose

Create file called server.js inside root folder.

Also don't forget to change your package.json to run server.js file at start.



{
  "name": "test-mongo-app",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "mongoose": "^5.6.1"
  }
}

Good. Let's create a basic express app with two routes. One for reading Users from the database and second is for adding dummy user data to it.

First of all check if everything works with just express server.



// server.js
const express = require("express");
const app = express();

const PORT = 8080;

app.get("/", (req, res) => {
  res.send("Hello from Node.js app \n");
});

app.listen(PORT, function() {
  console.log(`Listening on ${PORT}`);
});

You can run npm start to test it. If you see the message "Listening on 8080" everything is ok. Also open http://localhost:8080 and check if you can see the hello message.

There is a nice thing called nodemon. It auto rebuilds our project when any changes happened in source code. Let's use it! 😀



npm install --save-dev nodemon

Add a new command in package.json. So we use it for development.



  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },

Now use run npm run dev while development instead of npm start.



npm run dev

You will notice difference in the console, because now nodemon is watching for any changes in your project and if needs, rebuild it. Change something in server.js and you will notice 😉

Now create folder src in root of the project. Here we will add all the rest files.

Let's create a User model for mongoose. Create file names User.model.js



// User.model.js
const mongoose = require("mongoose");

const userSchema = new mongoose.Schema({
  username: {
    type: String
  }
});

const User = mongoose.model("User", userSchema);

module.exports = User;

Good! Here we defined a model for our document db. User model has only one field username which is a string. Enough for now :)

Let's add a file called connection.js for connection to the database.



// connection.js
const mongoose = require("mongoose");
const User = require("./User.model");

const connection = "mongodb://localhost:27017/mongo-test";

const connectDb = () => {
  return mongoose.connect(connection);
};

module.exports = connectDb;

Please notice that mongo-test will be the name of our database (cluster).

Now modify a bit server.js and start the app. You should see message in the console that MongoDb is connected.



// server.js
const express = require("express");
const app = express();
const connectDb = require("./src/connection");

const PORT = 8080;

app.get("/users", (req, res) => {
  res.send("Get users \n");
});

app.get("/user-create", (req, res) => {
  res.send("User created \n");
});

app.listen(PORT, function() {
  console.log(`Listening on ${PORT}`);

  connectDb().then(() => {
    console.log("MongoDb connected");
  });
});

Yeah! 🎉 We connected Express app with local MongoDb instance!

3. Implement read and write to MongoDb

We should implement two routes for reading and adding new users.
Open server.js file and first of all import our model on the top:



// server.js
const User = require("./src/User.model");
// ...

Then implement both routes below like this:



// server.js
app.get("/users", async (req, res) => {
  const users = await User.find();

  res.json(users);
});

app.get("/user-create", async (req, res) => {
  const user = new User({ username: "userTest" });

  await user.save().then(() => console.log("User created"));

  res.send("User created \n");
});
// ...

Be attentive here we are using async/await pattern. If you are curious about this find it here.

Basically we implemented two routes /users and /user-create. ✋ Yeah, yeah, I know that create should be done through the POST http verb but just to make testing easier and escape configuring seed method for db.

Now it's time to test! 🔍 Open in browser this link http://localhost:8080/user-create to create a dummy user record in db. Open this link http://localhost:8080/users to get all users as JSON in browser.

After doing that you can go back to MongoDb Compass and check users collection here. You should see this

4. Dockerize Node and MongoDb

Add Docker file to the root folder.



touch Dockerfile

Paste following inside it:



FROM node:8
# Create app directory
WORKDIR /usr/src/app
# Install app dependencies
COPY package*.json ./

RUN npm install
# Copy app source code
COPY . .

#Expose port and start application
EXPOSE 8080
CMD [ "npm", "start" ]

We can simply build our express app with this command



docker build -t mongo-app .

But.. this will only run our express app, but not together with MongoDb. That's why we need a docker-compose file. 🐳

Now create another file called docker-compose.yml and paste this:



version: "2"
services:
  web:
    build: .
    ports:
      - "8080:8080"
    depends_on:
      - mongo
  mongo:
    image: mongo
    ports:
      - "27017:27017"

We defined 2 services in this file. One is our node app running on port 8080 and the other is mongodb instance.

⚠️ Before you run next command, please make sure that you changed connection string to mongo db in connection.js file.



const connection = "mongodb://mongo:27017/mongo-test";

We replaced localhost with mongo which is very important. Because we should tell the app that we want to access MongoDb from docker internal virtual network and not the local one.

Now run the magic command 🔮



docker-compose up

Open a browser on http://localhost:8080/users and http://localhost:8080/user-create to see our app running in Docker.

(In case anything doesn't work, try to stop/remove image and containers, rebuild it by ruining docker compose-up again and if mongo image is not pulled from hub try to re-login in into docker hub or restart docker for Windows)

See the source code here. Enjoy!

🚀 If you read something interesting from that article, please like and follow me for more posts. Thank you dear coder! 😏

Create Classic Card Layout with Flexbox CSS

Vladislav Guleaev — Tue, 25 Jun 2019 20:55:36 +0000

Hello dear coder, welcome to my tech articles series dedicated to CSS and Flexbox. Prepare your keyboard for some codding!

Problem:

(You don't use use CSS very often or you always forget the basic layout tricks.)
You want to build a trivial card with header and two columns. Left column is a bit smaller for an avatar and right column is for any other details.
Let's learn it now and forever! (Sorry Bootstrap)

Here is a our UI mockup:

1. Start with HTML skeleton

Let's define core elements on a page. We will need a header, photo, and content.

Create a styles.css file in the same directory and add some colors to it

Now add more content inside inside it. We need a random image and some dummy text.

Together with some styles

2. Create layout using Flexbox

We want to make photo on the left and content on the right. In order to do it, let's create a class called row.



.row {
    display: flex;
}

Now wrap photo and content with a new div with class row.



      <div class="row">
        <div class="photo">
          <img class="img" src="https://picsum.photos/200" />
        </div>
        <div class="content">
          <h3>Joe Doe</h3>
          <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting
            industry. Lorem Ipsum has been the industry's standard dummy text
            ever since the 1500s, when an unknown printer took a galley of type
            and scrambled it to make a type specimen book.
          </p>
        </div>
      </div>

Your result should look like this:

Looks like we already did what we wanted. But don't need to hurry.

3. Divide row evenly

We want to separate row into two columns of the same size. Like we split row into two parts.

Create class column and wrap both photo and content with a new div



.column {
  flex: 1;
}

This bassicaly tells flex div to treat every element inside as even. So we will have row divided into two columns. If we create another class and change number to 2, one column will be bigger than another.



      <div class="row">
        <div class="column">
          <div class="photo">
            <img class="img" src="https://picsum.photos/200" />
          </div>
        </div>
        <div class="column">
          <div class="content">
            <h3>Joe Doe</h3>
            <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting
              industry. Lorem Ipsum has been the industry's standard dummy text
              ever since the 1500s, when an unknown printer took a galley of
              type and scrambled it to make a type specimen book.
            </p>
          </div>
        </div>
      </div>

Now result looks a bit better, but still not perfect.

4. Adjust card for mobile view.

For now our row will be always inline. We need to wrap to that class another css property to make it wrap if it cannot be fitted as single line in the screen.



.row {
    display: flex;
    flex-wrap: wrap;
}

flex-wrap does the thing and at mobile view every column will be displayed as single rows.

5. Set photo smaller

Last thing we need to impove here is to make photo column always smaller than right one. This is because we know exact size of the photo. So photo should be always smaller than details content.

Add two more classes to wrap our main elements




.details-container {
    flex: 2;
}

.avatar-container {
    flex: 1;
}

And html should look like this:



      <div class="row">
        <div class="avatar-container">
          <div class="photo">
            <img class="img" src="https://picsum.photos/200" />
          </div>
        </div>
        <div class="details-container">
          <div class="content">
            <h3>Joe Doe</h3>
            <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting
              industry. Lorem Ipsum has been the industry's standard dummy text
              ever since the 1500s, when an unknown printer took a galley of
              type and scrambled it to make a type specimen book.
            </p>
          </div>
        </div>
      </div>

Now it's better but photo container does't have enough space. We can use flex-basis property to setup initial size of this container.



.avatar-container {
    flex-basis: 250px;
}

And now result is awesome!

I really ❤️ codesandbox so I created a demo for you here. Enjoy!

🚀 If you read something interesting from that article, please like and follow me for more posts. Thank you dear coder! 😏

Dockerize a Node.js app with VS Code

Vladislav Guleaev — Sun, 23 Jun 2019 20:05:01 +0000

Hello dear coder, welcome to my tech articles series dedicated to Node.js and Docker. Hope you enjoy!

Problem:

You have never used Docker before and you are a JavaScript developer. You want to understand how to use containers together with Node. Lets’ go!

1. Setup

In this tutorial I will be using my favorite editor Visual Studio Code. You will also need Nodejs and Docker installed. In my case I’m using Windows, so I got Docker for Windows from here.

Next command creates a new folder with name test-node-app, then creates npm package file and opens folder in VS Code.



mkdir test-node-app && cd test-node-app && npm init -y && code .

Also please install express to create a server.



npm i express

2. Create basic Node app

Open package.json file and modify it like this:



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

Now add new file with name server.js:

Super basic basic basic app is ready. Now let’s test it locally. Run this command inside app folder:



npm start

You should see following in the console and will be able to access the server on the link http://localhost:8080/

3. Prepare Docker file

To build our image we need a docker file. Create a file with name Dockerfile



touch Dockerfile

And paste this inside:



FROM node:8

# Create app directory
WORKDIR /usr/src/app

# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
COPY package*.json ./

RUN npm install

# Bundle app source
COPY . .

EXPOSE 8080

CMD [ "npm", "start" ]

This file tells docker to download Node.js of version 8, create directory for the app, copy there package.json files, run npm install for node_modules, tells which port this app wants to use and finally runs it with npm start.

Uhhh.. a lot yeah? 😮

We will also need a file called .dockerignore. Create and paste following inside:



node_modules
npm-debug.log

4. Build an Docker image

First of all, build our image with this command.



docker build -t test-node-app .

Wait until it finishes and now we can see new image created.



docker images

If you are using VS Code, you can install a very nice Docker extension. It adds a button to side panel which opens Docker explorer. Here you can see all available images and containers. From there you can run, stop and remove containers which is pretty useful.

If you want to remove an image run this:



docker rmi <image id>

5. Run Docker container (finally)

Time to run a container based on our image (our application in isolated environment). The important thing is that we need to tell docker how to map the port. Now we run our container and map 8080 port to 49165.



docker run -p 49165:8080 -d test-node-app

Which means we can now access the app by this url http://localhost:49165/

There is another very useful command to see all running containers:



docker ps

You can stop container by right click in VS Code Docker Extension or by this command:



docker stop <container id>

Now if you run docker ps again you will not see your container running. If you want to see stopped containers you need to add —all flag to the command like this:



docker ps -a

If you still have some questions you can easy refer to official documentation here.

🚀 If you read something interesting from that article, please like and follow me for more posts. Thank you dear coder! 😏

Is it worth to switch from Medium to Dev.to?

Vladislav Guleaev — Mon, 10 Jun 2019 08:50:37 +0000

I want to continue make posts about programming. More like tutorials. Medium was ok for that, but there is Dev.to. I want to ask you about advantages of this platform and how popular is it nowdays?