Latest Questions
  1. /
  2. Latest Articles
  3. /
  4. Code
  5. /
  6. TypeScript
  7. /
  8. Azure Static Web Apps configuration using Azure Functions

Viewed 862 times

Azure Static Web Apps configuration using Azure Functions

This project shows you how to take advantage of the configuration feature of Azure Static Web Apps by using Azure Functions.

 

You can download the code or see the code at GitHub.

This project was built using the Starter Application HERE as the starting point.

When you deploy an application to Azure Static Web Apps, let it be Angular, React, or Vue, you will most likely need to update the application’s configuration without having to recompile or redeploy.  This is where the configuration section of the Azure Static Web Apps comes into place.  The question is, how can a static web application get the configuration from Azure and what is the structure needed?  The answer is by using Azure Functions to serve up the configuration as an API inside your static web application, as well as including the location of the Azure Function in the build definition of the application.

If you are not familiar with how to deploy applications to Azure Static Web Apps, be sure to check out my previous article on Building and deploying Angular applications using GitHub and Azure.

 

Setting up the Azure Function

The first thing is to create the Azure Function for serving the configuration as an API.  We will use Angular as our example.  In Visual Studio Code, open your Angular application, then press F1 to open the Command Palette and type Azure Static Web Apps: Create HTTP Function as shown below (install the Azure Functions extension if prompted):

Select JavaScript as the language, and “settings” as the function name:

  • language: Javascript
  • function name: settings

Your application will now have an extra api folder with structure as below, this is the Azure Function:

Add the configuration you would like to use in local.settings.json.  In the example I added a configuration called apiCustomer that I would like my application to be able to read:

Update index.js with code as below, which will return the apiCustomer configuration:

The process.env object can read the Values property in local.settings.json, therefore we use it to read the configuration.  If you have 2 configurations then the response from context.res.body would be config1, config2, and so on:

 

Update Angular 

Typically the configurations for Angular applications are in the environment.ts file, which has the drawback of not being able to change the configuration once it has been built for deployment.  In another words, the configurations in environment.ts is set at compile time rather than runtime.  Instead we want to set the configuration at runtime by reading the configuration from the Azure Function.

To do so, first add the AppConfigService service, which will read the configuration served by the Azure Function on {applicationURL}/api/settings:

then add the APP_INITIALIZER from angular core in app.module.ts, along with the AppConfigService, the initConfig function and the provider:

With the APP_INITIALIZER, the application will be able to read the configuration before the application is run.  To read the configuration, you can just call the get() method of the AppConfigService, which is done in the CustomerService:

 

Test run the Angular application and Azure Function Locally

Before pushing to Azure, you want to make sure it can read the configuration locally on your computer. First install the Azure Static Web Apps CLI:

then install Azure Functions Core Tools:

then build the application:

test run the application along with the Azure Function API with the command below, which will run the application on localhost:4280, and you can also see the Azure Function API on localhost:4280/api/settings

local application shown below:

local Azure Function API shown below:

 

Deploying to Azure

If you are not familiar with how to deploy Angular applications to Azure Static Web Apps, be sure to check out Building and deploying Angular applications using GitHub and Azure.

In GitHub, under the workflows folder, set the build definition with the path below, which includes the path to the Azure Function as the api_location:

After the application is deployed by GitHub Actions, you should be able to see the Azure Function registered on the Azure Portal:

 

Important: The configuration you have saved in local.settings.json will not be deployed by GitHub, since by default it is being ignored by .gitignore in the Azure Function.  Once you have confirmed that the Azure Function is in Azure, all you have to do is add the configuration in the Configuration section of the Azure Portal as shown below:

 

Below you can see the application in Azure:

And the configuration from Azure Function at {applicationUrl}/api/settings:

And that’s all, hope you will find this information useful in setting up your static web applications in Azure.

Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
About Author
© All Rights Reserved 2020
0
Would love your thoughts, please comment.x