Creating a Dockerfile for Angular

This lesson discusses how to create a Dockerfile for Angular and then compress it in a tarball.

We'll cover the following

Authors can set up their own custom environments for code executions for a course. A custom environment can be set up by providing a tarball containing:

  1. Dockerfile

  2. Resources required to build the docker image.

All the live and non-live code execution can then be configured to execute in the custom environment created by the author.

In this tutorial, let’s run an angular application.

Building Tarball for Angular

You have to perform this step locally (on your PC).

Here are the steps to build tarball for an angular project:

Step 1: Create a folder named Demo anywhere in your local directory.

Step 2: Create an empty Dockerfile in Demo folder.

Step 3: Add the following contents in the Dockerfile:

The resources (i.e. the code for the angular application) required to build the docker image will be downloaded from a GitHub repo in the Dockerfile.

# Base image
FROM ubuntu:18.04
# Installing Required Packages
RUN     apt-get update && \
        apt-get upgrade -y && \
        apt-get install -y git curl
# Installing NodeJS
RUN     curl -fsSL https://deb.nodesource.com/setup_14.x | bash - && \
        apt-get install -y nodejs
# Creating the educative directory and downloading the code for the application in it
RUN     mkdir /educative && \
	cd /educative && \
        git clone https://github.com/arqambinrehan/angular_demo.git
# Installing Angular cli and node modules in angular directory
RUN     npm install -g @angular/cli && \
        cd /educative/angular_demo && \
        npm i
Dockerfile

Note:

  • The base image ubuntu:18.04 provides the 18.04 version of ubuntu.
  • However, you can use your own base image if you wish.

Step 5: Now we will convert this Demo folder to a tarball.

Run the following command on your personal terminal. Make sure your terminal points to the Demo directory.

This will create angular.tar.gz in the previous directory:

tar -czvf ../angular.tar.gz ./*

Please note that the Dockerfile must be nested directly inside our tarball. So the structure of our tarball looks as follows:

Press + to interact
-angular.tar.gz # this is the tarball we create
--Dockerfile # dockerfile nested directly in the tarball

That’s it. Our tarball is ready.

angular.tar.gz

Now, let’s run the project on the Educative platform.