How to Deploy Angular SPA in NodeJS with Docker

The blog post will walk you through the steps to deploy an Angular SPA in Node.js using Docker. By the end of this tutorial, you’ll have a fully functional Angular SPA running in a Docker container, ready to be deployed to production. That being said Angular single page applications can be deployed in many ways.

1. Nginx
2. NodeJs
3. S3
4. Github pages
5. Edge server etc…

If you have angular universal application, then check out my other blog post

Create the project

Create an angular project or use my Github project as reference. For brevity steps to create new angular project have been excluded

• First build the app with ng build command. This will create a dist folder with all the compiled files.

ng build

• Install express server via below command

pnpm install express

• Create a new file server.js in the root directory of your project and add the following code:

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

// instruct server to use dist folder
app.use(express.static(path.join(__dirname, 'dist')));

// for all requests send index.html
app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
});

// run the application on port default or 4200 port
const port = process.env.PORT || 4200;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

This will serve content from dist folder and runs in node js server on a given port.

• Now run the project using command

node server.js

• Go to http://localhost:4200/ to access the application

Dockerize the application

Prerequisites:

• A basic understanding of Docker and containerization
• Docker installed on your local machine

Here is the final docker file for reference

##### Install dependencies only when needed ######
FROM node:18-alpine AS builder

# Make /app as working directory
WORKDIR /app

# Enable PNPM
RUN corepack enable && corepack prepare pnpm@latest --activate

# Files required by pnpm install
COPY package.json pnpm-lock.yaml ./

## Install dependencies
RUN pnpm install --frozen-lockfile

# Copy the source code to the /app directory
COPY . .

## Build the application
RUN pnpm build --output-path=dist --output-hashing=all

######  Use Node alpine image  ######
FROM node:18-alpine

# Make /app as working directory
WORKDIR /app

# Copy dist folder, server.js and node_modules from build stage
COPY --from=builder /app/dist /app/dist
COPY --from=builder /app/server.js /app/server.js
COPY --from=builder /app/node_modules /app/node_modules

# Start Node services
CMD node /app/server.js

The first step in containerizing our Node.js application is to create a Dockerfile. The Dockerfile contains the instructions to build a Docker image that will be used to run our application in a container.

In our example, we’ll use a multi-stage Docker build that separates the build process and the application runtime. The comments on Dockerfile are self explanatory.

Stage1 : Builder

1. Create /app folder in temporary node container, copy package.json, pnpm-lock.yaml files and install dependencies
2. Then copy source code and build the project into dist folder

Stage2 : Deployer

1. Create /app folder in final nodejs image, copy dist, server.js and node_modules from builder stage
2. Run the application using node server.js command

Build the Docker image

After creating the Dockerfile, the next step is to build the Docker image. To do this, navigate to the directory containing the Dockerfile and run the following command:

docker build -t angular-nodejs-docker .

This will build the Docker image and tag it with the name angular-nodejs-docker. You can replace angular-nodejs-docker with any name you prefer.

Run the Docker container

After building the Docker image, we can run the container using the docker run command. Here’s an example command:

docker run -p 4200:4200 angular-nodejs-docker

This command starts the Docker container and maps port 4200 on the host machine to port 4200 in the container. The angular application deployed on Node.js should now be accessible at http://localhost:4200.

Conclusion:

In this blog post, we explored how to use Docker to build and run a angular application on Node.js container.