With the Docker image we created, we can run our project on any cloud provider that offers container services. However, there are other ways to deploy our Angular project.
One of these alternatives is Azure Static Web Apps, a service that specializes in web page design and allows automatic integration with GitHub. Let’s see it in practice in our project.
The first requirement is that your project is on GitHub, as shown in the following screenshot:
Figure 12.10 – GitHub repository for frontend project
If you have copied the project repository, place the gym-diary folder in your own GitHub project.
To configure the Azure service, go to the account portal and search for Static Web Apps.
Click on the Create Static Web App button and the service form will be presented to you.
In the first part, we have the following fields:
- Subscription: Select your Azure subscription.
- Resource Group: Create or define a group for this service. In Azure, every resource must be linked to a resource group.
- Name: Provide a name for your frontend project.
- Plan type: Select the tier of your environment. The more resources, the higher the cost, but for our example, we will just use the free plan.
Figure 12.11 – Azure Static Web App creation
- Source: In this field, we identify whether our project is on GitHub or in the Azure repository.
- Organization: The name of the GitHub user or organization that you want to select the repository from. It is important that your user has high access permission, such as maintainer or admin.
- Repository: Azure will list all the repositories that you have access to in the selected organization..
- Branch: The branch of the repository that you want to deploy.
Figure 12.12 – Deployment details configuration
In the second part, we have the specific configuration for our project using Angular:
- Build Presets: The Azure service supports several frontend technologies. Here, in this case, we will choose Angular.
- App location: We must indicate within GitHub which folder contains the Angular project, as our project is in the root of the repo. We can leave it as /.
- Api location: This is an optional field if you want to point to a backend service deployed in Azure. Here, in this example, we are going to leave it blank.
- Output location: We must place the location where the build is generated within the repository. In the case of our project, we will set dist/gym-diary/.
Figure 12.13 – Preset settings
Once done, click on Review and Create, and on the next screen, confirm the operation. Azure will begin processing, and once ready, it will display the created service dashboard:
Figure 12.14 – Service dashboard created
In the URL field, you will see the URL created by Azure for our project. Select it and our system will be presented as soon as the deploy status is Ready. So, we have our project up and running in the cloud. You can configure other settings, such as adding your own URL, although remember that some settings are not available in the free plan.
The most interesting thing about this feature is that it implements a GitHub action in our repository:
Figure 12.15 – GitHub action
What is a GitHub action? It is a GitHub feature that allows the creation and execution of scripts to automate tasks, such as, in our example, deploying to the Azure service.
With our configuration, the Azure wizard created and ran the script in our GitHub repository.
A bonus is that our generated script is configured to execute and deploy with each push we make to the repository, updating our application deployed in the cloud.
Summary
In this chapter, we explored the techniques and capabilities of Angular when deploying our application to production.
We started by uploading our backend to the cloud, where it will be available for our frontend application.
Then, we adapted our application to differentiate the development environment and the production environment using the Angular feature of environment.ts files.
We explored the ng build command and all the tasks that Angular performs for us to make our application as lean as possible to be faster for our users.
We learned about Docker and how we can package our Angular application to run on a web server such as Nginx regardless of the type of machine our application runs on.
Finally, we learned about another way to deploy to the cloud with the Azure Static Web Apps service and saw how it automates this process by creating a GitHub action script.
In the next chapter, we will explore the latest Angular innovations, including Angular Signals.
No Responses