I am going to redesign one website that I developed in 2010-2011 and thinking to develop it in MEAN stack. I think it would be helpful for students and beginners if I list down all the steps during my development. So here is the deal:

• I will start designing the website in Angular 5 and use node.js to run it on a server. It would be a static website with no database and we will use it as our baseline.
• Next, I will deploy it on DigitalOcean virtual private server with my existing domain.
• Later, we will develop the small content management system to control the website content dynamically, we will secure content management access with username and password and call it admin section.
• We will use MongoDB as our backend database and will learn how we can use Mongoose (MongoDB object Modeling) to validate and insert the data.
• We will use Express.js to expose the RESTful APIs and Passport.js with JWT to authenticate the request on the server-side (node.js). 

Please remember, this is not a pre-developed planned project, I may need to add or remove the code during development when required, so be ready for that. It may take several weeks to complete the series as I am doing it part-time. At the end of the complete series, you would be able to create the professional MEAN stack application.

Still interested?

Optional

Though I will explain every step of development it would be a great help if you read my following articles to get a basic understanding of Angular and node.js:

• Angular 2/4 in ASP.NET MVC & Web API – Article Series
• MEAN Stack with Angular 4, Auth0 Auth & JWT Authorization

Setup Development Environment

     Please make sure you have the following software installed on your system for the static website, we will install more software later when start implementing the dynamic website with MongoDB:

• Visual Studio Code
• Node.js
• Once node.js is installed open your command prompt and type command node -v to check the successful installation and node version.
• Open the command prompt and run the command: npm install -g @angular/cli to Install Angular CLI. Angular CLI is a command-line interface to create the Angular projects, components, classes, Interface and create the build. 
  

Let’s Start

1. The very first step is to create the folder for your website, go ahead and create a folder wherever you want on your computer. I am going to create the folder with the name mazharnco and in this folder create one more folder server. The server folder is for node.js.
2. Next, we would use Angular CLI to create an Angular 5 project. Open the command prompt ( Ctrl+ R for Run, then cmd to open the command prompt)
3. Browse the newly created project folder e.g. cd c:/projects/mazharnco and run the command: ng new mazharncoweb an wait for few minutes. This command will generate the basic Angular 5 project and download all required packages in a node_modules folder. Cool, it really gives us a baseline to start our project development.
4. For now, forget about server the folder. Let’s explore the mazharncoweb folder, you would see a few folders and files in there. Let’s understand the important one:
   1. node_modules: All packages/libraries having certain functionality facilitating our Angular application development, in fact, everything is a library in Angular. Later, if we need any functionality, we will install a package that can help us. Just google what you need e.g. search angular share social and you would find  social-share-ng2 link, it would clearly tell you how to install and use this package.
   2. src: In src folder we have two more folders; app and assets. In assets folder, you would save all static files e.g. images, third-party CSS and any other helping file. The app folder will contain all components, modules, and services of our application. usually, I create more folders in the app folder to separate my application’s modules, you will see it in later steps.
   3. environment: The environment folder has two files environment.prod.ts and environment.ts where you can put environment-specific settings. If you are from the .NET background, this is same as app.config and app.Relase.config etc. We will use it in later steps.
   4. Rest is helping files to configure and run the application.
5. Cool, so I have already designed the website on paper, we are skipping that part and jumping straight to development. Open your Visual Studio Code and select File -> Open The folder menu item, locate the mazharnco folder and click Select Folder button. On the left Explorer panel you should see two folders mazharncoweb and server. (if you don’t see Explorer panel, select View from the top menu and then Explorer menu item)
6. If you pull the bottom bar on the right panel (if it is not already up), you would see PROBLEMS, OUTPUT, DEBUG CONSOLE, and TERMINAL tabs. I mostly use TERMINAL that is actually a command prompt, you can open as many command prompt panels as you want by clicking on + on the right corner and delete them by clicking on the dustbin icon. Use the drop-down menu to switch between different open panels. Usually, I use two panels, one for Angular and second for Node.js but for now since we are only developing an Angular application, just one panel is one. We will run Angular CLI commands to create different components and builds, run and open the application on the server.
7. Since we already have created a basic Angular application through Angular CLI, in TERMINAL tab, enter the command: cd mazharncoweb and then ng build serve -o to build and open the application in your default browser. Give it some time and you would see running application with http://localhost:4200 in your browser with some default Angular page. That means our Angular application is working fine.
8. So I just tried step 7 and got this error: Error: Cannot find module '@angular-devkit/core' …., to fix it I followed the following instructions:
   1. Run the command: npm update -g @angular/cli
   2. Run the command: npm install
   3. It starts working, let me know if you still have an issue. (this issue shouldn’t come if you just installed Angular CLI following previous steps)
9. Next, we will add an Angular Material package, this package has some cool UI components that we would use in our application e.g. form control, textbox, date control, card, etc. In the Chrome browser, the modal pop, textbox, dropdown, etc. controls are resembling with Angular Material UI controls. 
10. Let’s install the Angular Material Components: (follow steps)
    1. Drag the bottom panel up, do cd mazharncoweb folder (if it is not already pointing there).
    2. Run the command: npm install --save @angular/material @angular/cdk
    3. Run the command: npm install --save @angular/animations
    4. Edit the mazharncoweb -> src -> style.css file and add the line: @import "~@angular/material/prebuilt-themes/indigo-pink.css“;
    5. Run the command: npm install --save hammerjs
11. After installing Angular Material package, let add it in AppModule so that we can use it in our application. Edit src -> app -> app.module.ts file and replace its content with the following: 

12. To save time, I added all UI components in the import section, you can remove unused components at the end of your project development.
13. Next, edit the src -> app -> main.ts and replace its content with the following: 

14. As per our Angular Material installation steps, let’s add the Material Icons link in index.html. Your final src -> index.html should like the following. We will add other crap later:

<!doctype html>
<html lang="en">
<head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <meta charset="utf-8">
  <title>Mazhar and Co</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

15. I think that’s good for the environment now. Run the command ng serve -o and check if you don’t get any error and able to see the default Angular CLI page in a browser.
16. Let’s continue development in Part 2.