Before preparing our gym diary project for production, let’s first upload the backend to a cloud service so that our page has access to the data.
We chose the Azure service for this book, but the concepts in this chapter can also be applied to other cloud services, such as AWS (https://aws.amazon.com) and GCP (https://cloud.google.com).
The backend of this example does not use a database and was built using the NestJS framework (https://nestjs.com/), which actually has an architecture completely inspired by Angular, but for the backend! This framework allows you to add cloud deployment capabilities with Azure. To prepare your backend for deployment, in the command line of your operating system, in the project folder (/gym-diary-backend), run the following commands:
npm install @schematics/angular
nest add @nestjs/azure-func-http
The first command installs the Angular Schematic package, which will be used to build the application.
The nest add command has the same functionality as Angular’s ng add command, and here, in addition to installing the dependencies for deployment on Azure, it also configures and creates the necessary files for this task.
With the tools from the Technical requirements section installed, we first need to create an Azure Functions project. To do this, let’s go to the Azure portal in the Function App menu option:
Figure 12.1 – Function App menu option
Azure has several ways to run a backend service, and one of the simplest is through Azure Functions. With it, we can upload our service without needing to configure a server, as the provider will take care of these details.
We then need to perform some basic configurations. To do this, we will click on + Create. Once done, we will be presented with the following screen:
Figure 12.2 – Azure Functions service configuration
In the Subscription field, you need to choose your Azure subscription. In the Resource Group field, you can select a group that you already have; if you don’t have one, you can create a new one and enter its name. The Function App name field is important as it will initially be the address of your endpoint. It is possible to buy a specific URL or place this API behind an Azure API gateway (https://azure.microsoft.com/en-us/products/api-management), although this is not required for our example. We will deploy directly from the code, so leave Do you want to deploy code or container image? as Code. The project’s runtime stack should be set to NodeJS, version 18 LTS. For the project region, select one close to you, or East US, which is the default option. Finally, Operating System should be set to Linux. The Hosting options and plans option should be set to Consumption (Serverless) as we do not need any more specific features in this case.
Figure 12.3 – Hosting options and plans
Once we are done filling in all the necessary information, click on Review + Create. On the next screen, confirm your information and execute the creation:
Figure 12.4 – Azure Functions service created
To publish our backend to the created service, we will use the VS plugin. Open the backend project, left-click, and select Deploy to Function App…, as shown in the following figure:
Figure 12.5 – VSCode extension for publishing Azure Functions
The extension will get the list of services created from your account, so select the one we created from the AZURE panel.
Figure 12.6 – VSCode AZURE panel
After publication, the Azure service will point you to a public URL with your service. Access it in a browser with the /exercise endpoint to check whether the service is live.
The return of the published URL should be a list similar to the following:
{“items”:id”:”30″,”description”:”Plank”},{“id”:”29″,”description”:”Dumbbell Bench Press”},{“id”:”28″,”description”:”Seated Leg Curl”},{“id”:”27″,”description”:”Cable Curl”},{“id”:”26″,”description”:”Glute Bridge”},{“id”:”25″,”description”:”Skull Crusher”},{“id”:”24″,”description”:”Arnold Press”},{“id”:”23″,”description”:”Inverted Row”},{“id”:”22″,”description”:”Chest Fly”},{“id”:”21″,”description”:”Hanging Leg Raise”},{“id”:”20″,”description”:”Side Lateral Raise”},{“id”:”19″,”description”:”Front Squat”},{“id”:”18″,”description”:”Seated Row”},{“id”:”17″,”description”:”Romanian Deadlift”},{“id”:”16″,”description”:”Bicep Curl”},{“id”:”15″,”description”:”Calf Raise”},{“id”:”14″,”description”:”Tricep Dip”},{“id”:”13″,”description”:”Push-up”},{“id”:”12″,”description”:”Leg Curl”},{“id”:”11″,”description”:”Incline Bench Press”},{“id”:”10″,”description”:”Hammer Curl”}, {“id”:”9″,”description”:”Lunges”},{“id”:”8″,”description”:”Dumbbell Curl”},{“id”:”7″,”description”:”Pull-up”},{“id”:”6″,”description”:”Shoulder Press”},{“id”:”5″,”description”:”Bench Press”},{“id”:”4″,”description”:”Leg Press”},{“id”:”3″,”description”:”Barbell
Row”},{“id”:”2″,”description”:”Squat”},{“id”:”1″,”description”:”Deadlift”}],”hasNext”:false}
One last configuration we must do is configure the service’s CORS to enable our local application to connect to the cloud service. In the Azure console, click on the created service and then on the CORS tab and set the Allowed Origins field to *:
Figure 12.7 – CORS configuration
With our backend service online, we will focus on how to access it from our application in the next section. An important point is to always remember to turn off the service in Azure so as not to incur unnecessary costs when going through this book’s examples in your Azure account.
No Responses