How to Deploy Angular App on Web Server | Node.js Express Server

Deploying an Angular app on a web server requires a few essential steps to ensure that your app runs smoothly and efficiently. In this article, we will discuss how to deploy an Angular app on a web server using a Node.js Express server.

Step 1: Build Your Angular App

The first step in deploying your Angular app is to build it using the Angular CLI. Open your terminal and navigate to the root directory of your Angular app. Run the following command to build your app:

ng build --prod

This command will build your Angular app and generate a dist folder containing all the necessary files for deployment.

Step 2: Create a Node.js Express Server

Next, you will need to create a Node.js Express server to host your Angular app. Create a new file named server.js and add the following code:

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

            app.use(express.static(__dirname + '/dist/your-angular-app'));

            app.get('/*', function(req, res) {
                res.sendFile(path.join(__dirname + '/dist/your-angular-app/index.html'));
            });

            app.listen(process.env.PORT || 8080);
        
    

Replace ‘your-angular-app’ with the name of your Angular app’s directory. This code configures the Express server to serve the static files from the dist folder and directs all other routes to your Angular app’s index.html file.

Step 3: Deploy Your App

Once you have built your Angular app and created your Node.js Express server, it’s time to deploy your app to a web server. This can be done using various hosting providers such as Heroku, AWS, or Firebase.

For example, if you are using Heroku, you can deploy your app by running the following commands in your terminal:

        
            heroku login
            git init
            git add .
            git commit -m "Initial commit"
            heroku create
            git push heroku master
        
    

These commands will initialize a new Git repository, commit your app’s files, create a new Heroku app, and deploy your app to the Heroku server.

Conclusion

Deploying an Angular app on a web server using a Node.js Express server is a straightforward process that can be achieved with just a few simple steps. By following the steps outlined in this article, you can successfully deploy your Angular app and make it accessible to users on the web.