Setup components of MEAN stack
In our previous section, we learned about the architecture of MEAN stack, how its components are connected with each other, and some of the MEAN stack features. This section will set up our MEAN Stack framework or set up the MEAN stack components, i.e., MongoDB, ExpressJS, AngularJS, and NodeJS.
Installing Node
We need NodeJS because we will write and run the NodeJS code for our project. It is required for our server-side logic, and even angular also needs it. A framework that has a more complex build workflow is referred to as Angular. So, we need Node for the NodeJS code. This NodeJS code is written for our back-end and for the Angular build workflow.
So, we will go to the https://nodejs.org/en/ link and download the latest version of Node from there.
After downloading the Node’s executable file, we will install the NodeJS by simply running its executable file.
Angular CLI
We will also use another tool that is Angular CLI or Angular Command Line Interface. We need a lot of tools to compile and optimize our code because of the more complex build workflow. The CLI gives us a project setup where we can focus on writing our Angular code and our logic, nothing else. We will install the Angular CLI in the following way:
1) We will use the npm, i.e., Node Package Manager, to install the CLI tool globally on our system. The Node Package Manager is installed automatically when we install the NodeJS. So, if we have NodeJS, we will have npm. We will run the following command for installing CLI:
2) After installing the Angular CLI, we will create a new Angular project with the CLI, and then we will add MongoDB, Node, and Express to that project later. First, we will navigate into that folder where we want to create the project, and then we will create a project using the ng new command in the following way:
When we run this command, it will ask us two questions, i.e., “would you like add Angular routing?” and “Which stylesheet format would you like to use?”. If you want to include angular routing, press ‘y,’ and use CSS format in the project.
3) After creating the project successfully, we will navigate to the project folder and run the following command:
This command is used to bring up a development-only server. We will not use this server to deploy our project or application. So, this is a development-only server which allows us to preview our application.
4) This command will give us a real web server running on our machine. We will go to our browser and visit the address given by it. In this URL, we will see a screen look like below:
Installing IDE
Now, we want an IDE or some advanced text editor to make change some changes in our application. These advanced text editor makes working with our code much easier. We will install the visual studio IDE because it is free, pretty powerful, and highly extensible. It is available for Windows but also for Mac and Linux. We will go to the https://code.visualstudio.com/ link and pick up the installer version if it doesn’t auto-select the right-one automatically.
After downloading the installer, we will run it and install it. After installing it, we will open it, and it should look like this:
We will go to the File menu and open our first-app project from there, which will look like as:
Now, we first need to install a certain extension. So, we will go to the view menu and click on the extensions. We will search for Angular Essential and install it in our IDE. The Angular Essential is an amazing collection of different extensions that enhance the IDE to work. We will also search for the Material Icon Theme.
After that, we will go back to the View explorer, and it will look something like this:
We have set our Angular, Node and IDE successfully. In the next section, we will edit our application using this IDE.