How to Manage and Run a Full-Stack Angular Application within a Monorepo

Managing a full-stack Angular application within a monorepo can streamline development and improve project organization. A monorepo allows you to keep all related codebases—such as front-end, back-end, and shared libraries—in a single repository. This approach simplifies dependency management, versioning, and collaboration across different parts of your application.

To effectively manage a full-stack Angular application in a monorepo, start by structuring your repository to clearly separate different components and services. Use tools like Nx or Lerna to handle package management, dependency graph visualization, and build automation. Ensure each part of your application is modular, with well-defined boundaries and communication protocols between components.

Running and testing your full-stack application within a monorepo involves configuring your build and deployment pipelines to handle the entire codebase. Set up scripts and tools to build, test, and deploy each component of your application seamlessly. By integrating continuous integration and continuous deployment (CI/CD) practices, you can ensure that changes are automatically tested and deployed, maintaining the stability and reliability of your application.

What is Monorepo?

A monorepo is a unified repository that houses multiple related projects, offering significant advantages for version control. This approach contrasts with the polyrepo method, where different projects are managed in separate repositories. By consolidating all related projects into a single repository, monorepos facilitate more streamlined development processes and easier dependency management.

Key characteristics of Monorepo

• Consolidated Repository for Various Projects: All code for different projects, services, libraries, and more is stored within a single repository.
• Centralized Version Control: A single version control system, such as Git, manages all projects, ensuring uniformity and consistency across the entire codebase.
• Shared Dependencies and Tools: Common dependencies and tools are shared across projects, eliminating the need for duplication.
• Efficient Code Sharing and Reuse: Simplifies the process of sharing and reusing code among various projects.
• Integrated Build and CI Pipeline: A single build and continuous integration (CI) pipeline can be established for all projects, streamlining the build process and testing.

Running Full-Stack Applications using Monorep

Running a full-stack application within a monorepo requires structuring both the frontend framework (such as Angular) and the backend code (e.g., Node.js/Express server) in a single repository. This approach ensures that all components of the application are managed together, simplifying development and version control.

Here is a step-by-step guide to creating and running full-stack applications using Monorepo

Step 1: Setting up Monorepo

• Create a new directory for your project.
• Initialize it using a package manager such as 'npm'.

mkdir full-stack-app
cd full-stack-app
npm init -y

Step 2: Creating backend and frontend project

For creating frontend we are using Angular framework. In the following way, we can create a new angular application.

ng new angular project --routing --style=scss

To set up a backend project using Node.js and Express, follow these steps to create a basic Node.js application server.

mkdir backend
cd backend
npm init -y
npm install express

Step 3: Integrate with the Backend

On the backend, we will set up a basic server using Express.

To do this, create an index.js file where you'll write the server code for your backend.

index.js

const express = require("express");
const app = express();
const cors = require("cors");
const PORT = 8080;
 //Using middleware for getting json(Javascript Object Notation) response. 
app.use(express.json());
//cors for preventing malicious website to prevent access sensetive information.
app.use(cors());
app.get("/api", (req, res)=>{
	res.json("Hello this is from backend side");
});
app.listen( PORT, ()=>{
	console.log(`Server is listening on port ${PORT}`);
}); 

Step 4: Integrating with angular frontend

For the Angular front-end, we’ve already set up the Angular application in Step 2. In this step, we will connect the front-end with the backend by making API calls, receiving responses, and logging them to the console.

The most effective method for making API calls is to create a service within the Angular application. Therefore, we will generate an API service named api.service.ts.

ng generate service service/api

Having already established the Angular application in Step 2, our next task is to connect it with the backend. This involves making API requests, handling the responses, and displaying them in the console.

The recommended approach for making API requests in Angular is to create a dedicated service. Thus, we will develop an API service file named api.service.ts.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(private _http : HttpClient ) { }
  getData(){
    return this._http.get('http://localhost:8080/api');
  }
}

To use the HttpClient service for making HTTP requests, you must include the HttpClientModule in your app.module.ts file.

Below is the code for configuring app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In the Angular component, we utilize the service to make API requests and log the query results to the console.

Here is the code for app.component.ts:

import { Component } from '@angular/core';
import {HttpClient} from "@angular/common/http"
import { tap } from 'rxjs';
import { ApiService } from './service/api.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'frontend';
  constructor(private _http: HttpClient,private _apiService : ApiService){
    this.getData()
  }
  getData(){
   this._apiService.getData().subscribe({
    next: (data)=>{
      console.log(data);
    },
    error: (error)=>{
      console.error(error.message);
    }
   })
  }
}

In this way, our angular frontend source code will be there.

Running Backend and Frontend application using one command

To run both the backend and frontend applications simultaneously with a single command, you can use the npm-run-all package.

Install the package to enable parallel execution of the bot application and other processes.

npm install npm-run-all

Then, we will go into the global level package.json and in script, we will add a script for running frontend and backend applications.

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start:frontend": "cd frontend && ng serve",
"start:backend": "cd backend && node index.js",
"start": "npm-run-all --parallel start:frontend start:backend"
},

Once you've completed the tutorial, open your command line interface (CLI), navigate to the root directory, and execute the following command:

npm run start 

Once our application has executed successfully, you should navigate to localhost:4200, which is the default port for Angular applications, to view the results in the console.

A MEAN Stack Application

Single Language Development: JavaScript is used throughout the entire stack, from the client-side to the server-side, and even for database operations. This unification simplifies the development process and allows developers to be more versatile.

JSON Everywhere: Data flows seamlessly between layers of the application in JSON format, which JavaScript and MongoDB naturally support.

Asynchronous and Non-blocking: With Node.js and its event-driven architecture, MEAN stack applications can handle numerous concurrent connections efficiently without blocking.

MVC Architecture: Angular follows the MVC pattern, which helps in separating concerns, making the codebase more manageable and modular.

Real-time Data: MEAN stack applications can handle real-time data updates effectively, which is crucial for modern applications such as chat applications, live dashboards, etc.

Building a MEAN Stack Application

Set Up MongoDB

Set up MongoDB and configure it to manage your application data. Utilize Mongoose, an Object Data Modeling (ODM) library, to define data schemas and interact with MongoDB within your Node.js application.

Develop Server-Side with Node.js and Express.js

• Develop a Node.js application.
• Utilize Express.js to configure routes, manage requests, and serve static files.
• Establish a connection to MongoDB using Mongoose.
• Create API endpoints to handle CRUD operations.

Create the Front-End with Angular

• Initialize an Angular project using the Angular CLI.
• Create components, services, and modules to construct the user interface.
• Leverage Angular’s HttpClient module to interact with the Express.js backend.
• Integrate and Deploy:
• Conduct thorough testing of the full-stack application to ensure seamless integration of all components.
• Employ containerization tools like Docker to streamline and standardize the deployment process.
• Deploy the application on cloud platforms such as AWS, Azure, or Heroku.

Example Use Cases

• Content Management Systems (CMS): Overseeing content with real-time updates and managing user roles effectively.
• E-commerce Platforms: Efficiently managing extensive data and user interactions.
• Real-Time Applications: Developing chat applications, collaborative tools, and live dashboards.

Conclusion

In this blog, we explored how to build full-stack applications by using Angular for the frontend and Node.js-like technologies for the backend, all within a unified repository known as an Angular monorepo. We also learned how to manage and run these full-stack applications with a single command.

Overall, this guide provided a comprehensive overview of setting up and executing full-stack applications using a Monorepo approach.