Build a Simple Web App with Express & Angular

Building a simple web app using Express and Angular is a great way to understand the fundamentals of full-stack development. Express, a minimalist web framework for Node.js, handles the backend, while Angular, a powerful front-end framework, provides the structure for the client-side application.

In this article, we'll see the process of creating a basic web app that connects an Express backend with an Angular frontend.

Prerequisites

Before diving into the tutorial, make sure you have the following tools installed:

• Node.js (version 16.x or later)
• npm (version 7.x or later)
• Angular CLI (version 16.x or later)

Steps To Setup and Build Web App

Step 1: Set up the project

First, we will create a new project directory and initialize it as an npm package. Open your terminal and navigate to the location where you want to create your project. Run the following command to create a new directory:

mkdir my-app

you can replace my-app with the name of your choice. Next, navigate to the new directory using:

cd my-app

 & initialize it as an npm package by running the following command:

npm init -y

This will create a package.json file in the root of your project, which will contain all the necessary information about your project and its dependencies.

Step 2: Install Angular & Express

Next, we will install angular and express for our project. Run the following command to install Angular and Express:

npm install @angular/cli express

Step 3: Create the Angular client

We will use the Angular CLI (Command Line Interface) to create the Angular client. Run the following command to generate a new Angular project:

ng new client  

Project Structure

Step 4: Create the Express server

Now, we will create the Express server. Create a new file called "server.js" at the root of your project. In this file, we will set up our Express server. First, we will update the Express server to handle requests from the Angular client. In the "server.js" file, add the following code to handle CORS (Cross-Origin Resource Sharing) and to allow the Angular client to make requests to the Express server:

//server.js

const express = require('express');
const app = express();

// handling CORS
app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", 
               "http://localhost:4200");
    res.header("Access-Control-Allow-Headers", 
               "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

// route for handling requests from the Angular client
app.get('/api/message', (req, res) => {
    res.json({ message: 
            'Hello GEEKS FOR GEEKS Folks from the Express server!' });
});

app.listen(3000, () => {
    console.log('Server listening on port 3000');
});

Step 5: Update the Angular client

Next, we will update the Angular client to make requests to the Express server. In the "src/app" directory, create a new file called "api.service.ts". In this file, we will create a service that will handle the requests to the Express server.

//api.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
    providedIn: 'root'
})
export class ApiService {
    constructor(private http: HttpClient) { }
    getMessage() {
        return this.http.get(
            'http://localhost:3000/api/message');