How to Deploy an Angular App on DigitalOcean in 2024?

Angular is an open-source web application framework developed by Google. It is widely used for building dynamic single-page applications (SPAs) and supports the development of mobile and desktop applications as well. Angular is written in TypeScript, a superset of JavaScript, and follows the Component-Based Architecture.

Here are some key features of Angular:

TypeScript: Angular uses TypeScript, which adds strong typing to JavaScript, making it more scalable and easier to maintain.
Component-Based Architecture: Angular follows a modular structure based on components. Each component encapsulates different parts of the user interface, behavior, and data.
Directives: Angular provides powerful directives like ngIf, ngFor, ngSwitchCase, etc., which allow developers to manipulate the DOM, add or remove elements dynamically, and enhance application functionality.
Dependency Injection: Angular has built-in support for Dependency Injection (DI). It allows for efficient management and sharing of dependencies within an application, making it easier to create and test components.
Reactive Programming: Angular leverages Reactive Extensions for JavaScript (RxJS) to provide a powerful way of handling and managing asynchronous data streams within an application.
Routing: Angular provides a robust routing framework that allows developers to create single-page applications with multiple views and navigate between them.
Support for Mobile and Desktop: Angular supports cross-platform development. With frameworks like Ionic or NativeScript, developers can build native mobile applications using Angular. Additionally, Angular also provides tools for building desktop applications using Electron.
Testing: Angular comes with built-in tools for testing, including unit tests, integration tests, and end-to-end (e2e) tests. It encourages writing testable code and provides tools like Karma and Protractor for running different types of tests.

Angular has a large and active community, which means there are numerous resources, libraries, and extensions available for developers. It also provides extensive documentation and updates, making it easier for developers to learn and use Angular effectively.

How to deploy an Angular on DigitalOcean?

To deploy an Angular application on DigitalOcean, you can follow these steps:

Create a droplet: Sign in to your DigitalOcean account and navigate to the Droplets section. Click on "Create Droplet" and select the appropriate options for your project (e.g., distribution, droplet size, region).
SSH into the droplet: Once your droplet is created, you will receive an email with the login credentials or you can retrieve the root password from the droplet's page in the DigitalOcean control panel. Use an SSH client (e.g., Terminal on MacOS, PuTTY on Windows) to connect to your droplet using the provided IP address and root credentials.
Update the droplet: Run the following commands to update your droplet:

1	apt update apt upgrade -y

Install Node.js and npm: Angular applications require Node.js and npm to run. Install Node.js by running the following commands:

1 2	curl -fsSL https://deb.nodesource.com/setup_14.x \| bash - apt install -y nodejs

Clone your Angular project: Clone your Angular project repository from a Git provider (e.g., GitHub) using the git clone command. Navigate to the project directory.
Install project dependencies: In the project directory, run npm install to install the project dependencies specified in the package.json file.

1	npm install

Build your Angular project: Build the production-ready version of your Angular application using the following command:

1	ng build --prod

Install a web server: To serve your Angular application, you will need a web server. Install Nginx by running the following command:

1	apt install -y nginx

Configure Nginx: Open the Nginx configuration file using a text editor:

1	nano /etc/nginx/sites-available/default

Replace the existing configuration with the following configuration:

server {
    listen 80;
    server_name http://your_domain.com;
    root /path/to/your/app;
    # eg. root /home/admin/helloWorld/dist
    index index.html index.htm;

    location / {
        try_files $uri $uri/ /index.html;
        # This will allow you to refresh page in your angular app.
    }
}

Restart Nginx: Restart Nginx for the changes to take effect by running the following command:

1	systemctl restart nginx

Access your application: Open a web browser and enter your droplet's IP address. You should see your Angular application deployed on DigitalOcean.

Note: Make sure your domain name is properly configured and pointing to your droplet's IP address (e.g., by setting up DNS records) if you want to access your application using a domain name.