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
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.
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
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
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
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.
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.