Article posted Sat Feb 25 2023

Scripts: Simplify Angular Development with Docker

This example script shows how it is possible to create a new docker image using nginx, and install the latest version of Angular, as well as giving the choice of setting up a github within the image.

The script assumes that you have a custom Nginx configuration file named default in the same directory as the script. If you have a different file name or location, you'll need to modify the script to suit your needs. Also, you'll need to enter your GitHub username and email in the GITHUB_USERNAME and GITHUB_EMAIL variables respectively. If you don't want to set up GitHub, you can leave those variables empty.

Please only use these scripts as a reference and starting block for your own scripts. This information is provided as an example of how someone could achieve automation using Angular and Docker.

# Prompt for installation directory
echo "Enter the directory to install Angular to (e.g. /var/www/html):"

# Prompt for Docker image directory
echo "Enter the directory to store the Docker image (e.g. /home/user/docker):"

# Define variables
NODE_VERSION=$(curl -sL | grep -o 'v[0-9]*\.[0-9]*\.[0-9]*')
ANGULAR_VERSION=$(npm view @angular/core version)

# Create Dockerfile
cat > Dockerfile <<EOF
FROM node:${NODE_VERSION}-alpine
RUN apk add --no-cache nginx git
RUN npm install -g @angular/cli@${ANGULAR_VERSION}
RUN mkdir -p ${INSTALL_DIR}
COPY . .
RUN rm /etc/nginx/conf.d/default.conf
COPY ${NGINX_CONF_FILE} /etc/nginx/conf.d/
RUN adduser -D -g 'www' www \
    && chown -R www:www /var/lib/nginx \
    && chown -R www:www ${INSTALL_DIR} \
    && mkdir /run/nginx \
    && chown -R www:www /run/nginx \
    && git config --global "${GITHUB_USERNAME}" \
    && git config --global "${GITHUB_EMAIL}"
USER www
RUN ln -s ${INSTALL_DIR} /var/www/html
CMD ["nginx", "-g", "daemon off;"]

# Build Docker image
docker build -t "${DOCKER_IMAGE_NAME}" "${DOCKER_IMAGE_DIR}"

# Run Docker container
docker run -d -p 80:80 "${DOCKER_IMAGE_NAME}"