Creating and deploying an Angular application on Serverless Containers

• compute
• serverless
• angular

Angular is a development platform that can scale from single-developer projects to enterprise-level applications. The platform is built on TypeScript, a superset of JavaScript, and provides features such as:

• A component-based framework for building scalable web applications
• A collection of libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more
• A suite of developer tools to develop, build, test, and update code

Creating a demo application

1. Run the command below to create a new Angular application. It initializes a new project and creates the files required to build the application.

   ng new demo-appCopy

   Important:

   Make sure angular-cli is installed on your local machine. If you have not installed it yet, run sudo apt install angular-cli on Ubuntu/Debian Linux based machines or install it using Homebrew on MacOS: brew install angular-cli.

2. Enter the application directory:

   cd demo-appCopy

   Run the command ls to see a list of the applications’ files:

   README.md          node_modules       src                tsconfig.spec.json
   angular.json       package-lock.json  tsconfig.app.json
   karma.conf.js      package.json       tsconfig.jsonCopy

3. Type the following command to run the development server:

   ng serveCopy

4. Open a web browser and point it to http://localhost:4200 to see the Angular application:

   

   Press CTRL+C in your terminal to stop the development server.

5. Add a nginx-configuration.conf file inside the demo-app directory and add the following content to it:

   # Expires map
   map $sent_http_content_type $expires {
       default                    off;
       text/html                  epoch;
       text/css                   max;
       application/json           max;
       application/javascript     max;
       ~image/                    max;
   }
   server {
     listen 80;
     location / {
         root /usr/share/nginx/html;
         index index.html index.htm;
         try_files $uri $uri/ /index.html =404;
       }
     expires $expires;
     gzip  on;
   }Copy

   The configuration file above contains information about expiration headers for images and other content (CSS, HTML, etc.) and switches gzip compression on to improve the performance of the application.

6. Create a Dockerfile named Dockerfile in the applications’ directory and copy the following information into it:

   # Build and compile the frontend
   FROM node:latest as build-stage
   WORKDIR /app
   COPY package*.json /app/
   RUN npm install
   COPY ./ /app/
   RUN npm run build -- --output-path=./dist/out --configuration production
   # Get the compiled app ready to be served with Nginx
   FROM nginx:latest
   COPY --from=build-stage /app/dist/out/ /usr/share/nginx/html
   COPY ./nginx-configuration.conf /etc/nginx/conf.d/default.confCopy

Building and publishing the Docker image

1. Run the following command to build the Docker image:

   docker build -t demo-app:latest .Copy

2. Tag the Docker image:

   docker tag demo-app:latest rg.fr-par.scw.cloud/demo-namespace/demo-app:latestCopy

   Tip:

   • Make sure you replace demo-namespace with the name of your Container Registry namespace.
   • Make sure that the privacy settings of your namespace are set to public.

3. Push the image to the registry:

   docker push rg.fr-par.scw.cloud/demo-namespace/demo-app:latestCopy

Deploying the application on Serverless Containers

1. Click Containers in the Serverless section of the side menu of the Scaleway console. A list of your container namespaces displays.

2. Click the name of the namespace in which you want to deploy the application. The list of your containers displays.

   Tip:

   If you do not have a container namespace yet, click + Create a namespace to create a new one.

3. Click Deploy a Container. The container deployment wizard displays.

   Provide the following information to deploy the container:

   • Choose the pushed image in your registry’s namespace and set the port value to 80.
     
   • Choose a name and an optional description for the container
   • Define the container’s resources
   • Configure the scaling of your application
   • Leave the other options at their default values

4. Click Deploy a Container to deploy your application. Your application displays in the list of containers:

   

5. Click on the container’s name. The container information page displays. Click the Container Settings tab. The container endpoint displays in the container information block.

   

Copy the endpoint URL and open it in a web browser. The Angular application displays. It can now automatically scale based on the application’s load and within the ranges set for the deployment.