Deploying Your Angular Application on Apache: A Step-by-Step Guide

Building and deploying an Angular application on an Apache server can seem challenging for first-timers. This guide will walk you through each step, ensuring your environment is correctly set up and your Angular application is seamlessly deployed. Whether setting up a personal project or a production environment, follow these steps for a successful deployment.

1. Setting Up the Environment

Before deploying your Angular app, it’s essential to have the proper environment setup. This includes installing a Node Version Manager (NVM), Node.js, npm (Node Package Manager), Angular CLI, Git, and Apache HTTP server. Below are the steps to prepare your environment.

2. Installing Node Version Manager (NVM)

Node Version Manager (NVM) helps manage multiple versions of Node.js on your server. To install NVM, use the following command:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

Once installed, verify by running:

nvm –version

3. Installing Node.js and npm

With NVM installed, you can easily install Node.js and npm (which comes bundled with Node.js). To install the latest version of Node.js:

nvm install node

Check the installation by running:

node -v

npm -v

4. Installing Angular CLI

The Angular CLI is essential for building Angular applications. To install it globally on your machine, run:

npm install -g @angular/cli

Confirm the installation by checking the version:

ng version

5. Installing Git for Repository Access

To clone your repository on the server, Git needs to be installed. If Git is not already installed, you can do so using:

sudo apt-get install git

Verify Git installation with:

git –version

6. Installing Apache HTTP Server

Apache will serve your Angular application. Install the Apache server on your machine by running:

sudo apt-get install apache2

Once installed, start the Apache server:

sudo systemctl start apache2

To ensure that Apache starts on boot:

sudo systemctl enable apache2

7. Deploying the Angular App

Now that the environment is set up, it’s time to deploy your Angular application.

7.1 Cloning the Repository to the Server

Navigate to the directory where you want to store your Angular app, then clone your repository from GitHub:

git clone https://github.com/yourusername/your-angular-app.git

Change the directory into the cloned repository:

cd your-angular-app

7.2 Building the Angular Application

Before deploying, you need to build the Angular project for production. Run the following command:

ng build –prod

This will create a dist directory with all the compiled files for your application.

7.3 Copying the Build Files to the Apache Directory

After the build process is complete, copy the contents of the dist folder to the Apache server’s web directory:

sudo cp -r dist/your-angular-app/* /var/www/html/

Ensure the permissions are correct for Apache to serve the files:

sudo chown -R www-data:www-data /var/www/html/

7.4 Starting the Apache Server

If the Apache server is not already running, start it with the following command:

sudo systemctl start apache2

Visit your server’s IP address or domain name in a web browser to view your Angular application.

Conclusion

With the proper setup, deploying an Angular application on an Apache server is straightforward. After configuring Node.js, Angular CLI, and Apache, your application should be live and accessible via your web server.