Professional Application Development in MEAN Stack - Part 1

• Download source on GitHub

Content

Part 1: Basic Project Setup

Part 2: Create Layout and Home Page

Introduction

I am going to redesign one website that I developed in 2010-2011 and thinking of developing it in MEAN stack. I think it would be helpful for students and beginners if I list down all 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 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 the following articles that I wrote 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 we 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 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 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 and 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 folder. Let's explore the mazharncoweb folder, you would see few folders and files in there. Let's understand the important ones:
   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 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 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 .NET background, this is the same as app.config and app.Relase.config, etc. We will use it in later steps.
   4. Rest are 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 Folder menu item, locate the mazharnco folder and click Select Folder button. On left Explorer panel, you should see two folders, mazharncoweb and server. (If you don't see Explorer panel, select View from 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 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 have already 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 arise if you just installed Angular CLI following the previous steps.)
9. Next, we will add 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 Chrome browser, the modal pop, textbox, dropdown, etc. controls are resembling 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 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:
    JavaScript

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import {
      MatAutocompleteModule,
      MatButtonModule,
      MatButtonToggleModule,
      MatCardModule,
      MatCheckboxModule,
      MatChipsModule,
      MatDatepickerModule,
      MatDialogModule,
      MatExpansionModule,
      MatGridListModule,
      MatIconModule,
      MatInputModule,
      MatListModule,
      MatMenuModule,
      MatNativeDateModule,
      MatPaginatorModule,
      MatProgressBarModule,
      MatProgressSpinnerModule,
      MatRadioModule,
      MatRippleModule,
      MatSelectModule,
      MatSidenavModule,
      MatSliderModule,
      MatSlideToggleModule,
      MatSnackBarModule,
      MatSortModule,
      MatTableModule,
      MatTabsModule,
      MatToolbarModule,
      MatTooltipModule,
      MatStepperModule
    } from '@angular/material';
    
    import { AppComponent } from './app.component';
    
    @NgModule({
      declarations: [
        AppComponent
    ],
      imports: [
        BrowserModule,BrowserAnimationsModule,
        MatButtonModule,
        MatCheckboxModule,
        MatCardModule,
        MatInputModule,
        MatRadioModule,
        MatSelectModule,
        MatTabsModule,
        MatSortModule,
        MatPaginatorModule,
        MatTableModule,
        MatSnackBarModule,
        MatIconModule,
        MatDialogModule,
        MatAutocompleteModule,
        MatGridListModule,
        MatMenuModule,
        MatProgressBarModule,
        MatExpansionModule,
        MatTooltipModule,
        MatSlideToggleModule,
    ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

12. To save time, I added all UI component in 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 contents with the following:
    JavaScript

    //main.ts
    import { enableProdMode } from '@angular/core';
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    import 'hammerjs'; Added for Angular Material
    import { AppModule } from './app/app.module';
    import { environment } from './environments/environment';
    
    if (environment.production) {
      enableProdMode();
    }
    
    platformBrowserDynamic().bootstrapModule(AppModule)
      .catch(err => console.log(err));

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:
    HTML

    <!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 are able to see default Angular CLI page in a browser.
16. Let's continue with development in Part 2.