How to setup a development environment using Node JS and Docker

Welcome to the second part of this series of tutorials for projects created by Creative Tim & Under Development Office!

We’re going to setup the development environment for Material Dashboard React, which should be just as simple as the Argon Dashboard (which used EJS for templating) yet with some minor additions to have React up and running.

Since we’re going to use NodeJS and Docker again, if you’ve followed the first step of the previous tutorial you can skip the Prerequisites needed for starting/using Material Dashboard React.

Follow the prerequisites installation here: https://medium.com/udevoffice/how-to-setup-a-development-environment-using-node-js-and-docker-argon-dashboard-c5bc4fb6aee7

1. Prerequisites

NodeJs
Git (optional but useful)
An IDE (Visual Studio Code)
Docker
Material Dashboard React

Assuming that you’ve successfully managed to install all the required prerequisites, we’ll go to the next step, which is the project configuration!

2. Project configuration

Let’s make use of all the things that we’ve installed so far and get to work!
First of all, start Visual Studio Code then go to File -> Open -> Desktop to select the initial working folder. Then open up the terminal inside the IDE, so we can safely stay within it and not tab out of multiple apps: View -> Terminal and in the bottom part of the screen (in the terminal), type mkdir Projectsto create a folder named Projects, then access it via terminal using cd Projects command.

We are going to use Material Dashboard React for this, live preview here.

Head to the Creative Tim website, create an account if you haven’t already and download the archive or use GIT, as we did in the previous article, using the following command in the VS Code terminal

git clone https://github.com/creativetimofficial/material-dashboard-react-nodejs.git

This will clone (download) the Material Dashboard React archive and unzip it into a folder named material-dashboard-react-nodejs-master which will become the project folder or also called Root Directory.

Now that we have a project to work with let’s start with installing the required dependencies. This time, compared with Argon Dashboard, we’ll have to do it twice, because the frontend and backend are treated as two separate applications that communicate with each other to form the dashboard as a whole.

You should have seen until now that there are two folders inside the material-dashboard-react-nodejs-master folder:

material-dashboard-api
material-dashboard-react-app

OPTIONAL — Stopping and deleting containers

First of all, we will check to see if we have any containers created or running, especially on the ports that we’ll use (5433 and 6380) using the following command:docker ps -a

Looks like we have some PostgreSQL and REDIS containers already running on the default ports

In this case, we should first start by stopping them. For that, we’ll either select what containers to stop by running docker stop cc8b 4c54 command (cc8b is the container ID for PostgreSQL and 4c54 is the ID for REDIS, in my case) or docker stop $(docker ps -a -q)to stop all of them.

After running the stop command, we should have a list of container IDs that have been stopped

Let’s assume that we have more containers, some of them that we do not want to remove as they would not interfere with our stuff. We’ll only remove the ones that can cause us problems. We can achieve that just as we did with stopping, but instead of docker stop we’ll use docker rm CONTAINERID (we can also use the first 3 or 4 characters of a container ID, instead of the whole string)

docker rm cc8b 4c54 to only remove PostgreSQL and REDIS containers in my case and docker rm $(docker ps -a -q) to to remove all containers.