Back To Module Home

Building a Full-Stack Application Using the MEAN Stack

0% completed

Let's Start MEAN Stack Development

Node and Angular CLI Versions Course Project Overview: Course Management App Quiz: Introduction to the MEAN Stack

The Angular Frontend - Designing the App

Angular Overview Understanding the Folder Structure Services, Interceptors, and Guards Forms and Routers Create and Serve the Angular Project Adding Bootstrap 5 and Font Awesome Create Navbar Designing the Home Page Designing and Adding Forms to our Registration Page Designing and Adding Forms to our Login Page Designing the Create Course Page Designing the Edit Course Page Designing the Course List Page Add Routes to the Application Summary: Designing the Angular Application Quiz: The Angular Front-end Design

MEAN Stack Assessment 1 (The Frontend)

The Backend: Adding NodeJS to our Project

Node.js Overview

Understanding the Folder Structure

Creating a Project

Setting up the .env file and Git Ignore File

Setting up the Start Scripts and Running the Server

Adding CORS, Express, and Morgan Middleware

Creating Error Handler Middleware

Quiz: Adding Node.js to our Project

Challenge: Creating a Web Server

Solution Review: Creating a Web Server

Setting up Mongo DB

MongoDB Atlas Overview Setting up MongoDB & IP Whitelist Setup Schemas and Models for Users and Course Collection Connect to MongoDB Database Using Mongoose Quiz: Setting up Mongo DB

Working with RESTful API

REST API Overview Creating the Login and Register API using Express Creating REST API for the Course Management Application Create, Deploy, and Test the REST API on Heroku Quiz: Working with RESTful API Challenge: Making POST and GET Requests to a Public REST API Solution Review: Making POST and GET Requests to Public REST API

MEAN Stack Assessment 2 (The Backend)

Angular Services, The HttpClient Module, Providers and Dependency

Overview of Services in Angular Overview of HTTPClient in Angular Overview of Dependency Injection Implement the User Service Implement the Course Service Quiz: Service, HttpClientModule, and Dependency Injection Challenge: Displaying Data from a REST API Solution Review: Displaying Data from a REST API

Implementing User Authentication

Create FormBuilder and Validators for the Register Page Consuming REST API for the Register Page Creating FormBuilder and Validators for the Login Page Consuming REST API for the Login Page.Implementing User Authentication Status in the Navbar Adding the canActivate Route Guard to the Router Module Adding Token Interceptors to Authenticate Requests in Angular Quiz: Implementing User Authentication Challenge: Making a Reactive Form Valid Solution Review: Making a Reactive Form Valid

Implementing CRUD Functionality in the Frontend

Implementing Functionality to Add a New Course Fetching Courses Created from the Database Setting up the Activated Route to Update a Course Consuming REST API for the Edit and Delete Functionality Quiz: Implementing CRUD Functionality in the Frontend

Toast Notifications, Preloaders and Deployment

Add Toast Notification to Components Adding Preloaders to Components Deploying the Angular Project with Netlify Quiz: Toast Notifications, Preloaders, and Deployment

Appendix

Installation of the MEAN Stack Technologies Installing the Express Framework and npm Packages Setting up the Express, CORS, and the Morgan Middleware Installation and Set up of an Angular Application Installation of ngx-toastr Installation of ngx-spinner Installation and Set up of Heroku CLI

Conclusion

...

/

Setting up the Start Scripts and Running the Server

Setting up the Start Scripts and Running the Server

Learn how to start up the server for any project.

Previously, we set up our backend’s structure and architecture and installed all the necessary npm packages. To start our Node.js application in this lesson, we need to require the Express framework in our server.js file. However, before we do that, let us set up the server port.

Setting up the port

Inside our .env file, we configured our server to run on port 5000, which means we’ll create a variable in our server.js file to have access to this port. Following is how we do ...