Skip to content

Azure Static Web Apps

Azure Static Web Apps were announced at the Build conference this year and they allow you to host your static websites for free. You can use HTML, plain Javascript of front-end frameworks like Angular or React. The website retrieves data, if needed, from Azure Functions. A great feature of Azure Static Web Apps is that you don’t have to configure your CI/CD pipeline. This is done for you by Azure and Github using Git Actions.

Today, I want to show how to create a React front-end and how to retrieve data from an Azure Function. You can find the code of the React demo here and the code of the Azure Function demo here.

Azure Functions

Azure Function is an event-driven serverless feature which can be used to automate workloads or connect different parts of an application. They can be flexible scaled and they offer different triggers, for example, run some code when a message is written to a queue when a web API call was made or many more. You can use different programming languages like Javascript, Node.js, or .Net Core.

Azure Functions offer a consumption plan, where you pay what you used, a premium plan, or an App Service plan. I like the consumption plan because it gives you 400,000 GB/s for free every month. This should be more than enough for small projects.

Creating an Azure Function in the Azure Portal

To create an Azure Function in the Azure portal, search for Function App, and click on Create. In the Basics tab of the creation process, enter your basic information like the resource group, the region, and the runtime.

Create an Azure Function
Create an Azure Function

In the next screenshot, you can see a summary of all my provided information. Note that I selected Windows as my operating system. First I wanted to use Linux but for whatever reason, I couldn’t deploy to the Linux Azure Function.

Reviewing the Azure Function before creating it
Reviewing the Azure Function before creating it

Click on Create and the Azure Function deployment starts.

Creating an Azure Function using Visual Studio

To create my Azure Function, I am using Visual Studio 2019. You can also use Visual Studio Code. If you want to use Javascript for your Azure Function, you even have to use VS Code since Visual Studio only supports C#. Create a new project and select the Azure Functions template.

Select the Azure Function template
Select the Azure Function template

In the next window select HTTP trigger and set the Authorization level to Anonymous. This configuration starts the code execution every time an HTTP request is received.

Select Http trigger and set the Authorization level to Anonymous
Select HTTP trigger and set the Authorization level to Anonymous

After the Azure Function is created, I change the code so it returns a JSON list of products:

public static class Function1
    {
        [FunctionName("Function1")]
        public static async Task<IActionResult> Run(
            [HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = null)]
            HttpRequest req,
            ILogger log)
        {
            var products = new List<Product>
            {
                new Product
                {
                    Name = "Phone",
                    Price = 999.90m,
                    Description = "This is the description of the phone"
                },
                new Product
                {
                    Name = "Book",
                    Price = 99.90m,
                    Description = "The best book you will ever read"
                },
                new Product
                {
                    Name = "TV",
                    Price = 15.49m,
                    Description = "Here you can see an awesome TV"
                }
            };

            return new OkObjectResult(JsonConvert.SerializeObject(products));
        }
    }

The Product class has the following properties:

public class Product
    {
        public string Name { get; set; }

        public decimal Price { get; set; }

        public string Description { get; set; }
    }

Start the application and a console window will appear telling you the URL of your function. Enter this URL into your browser and you should see the JSON list displayed.

Testing the Azure Function locally
Testing the Azure Function locally

Deployment of the Azure Function

You can deploy the Azure Function directly from within Visual Studio. You can deploy to an existing Azure Function or even create a new one. Since I already created one, I will deploy it to this one. To make things even easier, I will download the publish profile from the Function in the Azure portal by clicking on Get publish profile on the Overview tab.

Download the publish profile of the Azure Function
Download the publish profile of the Azure Function

After you downloaded the publish profile, in Visual Studio right-click on your project and select Publish. This opens a new window, select Import Profile and then select your previously downloaded publish profile.

Import the downloaded publish profile
Import the downloaded publish profile

After the publish profile is imported, click on Publish and the Azure Function will be published to Azure.

Configuring and Testing of the Azure Function

In the Azure portal, click on the Functions tab of your Azure Function. There you will see your previously deployed function.

The published function appears in the Azure Portal under Functions
The published function appears in the Azure Portal under Functions

Click on the Function (Function1 in my case) and then click on Test. This opens a new panel where you can send a request to your function to test its functionality.

Call the Azure Function to test its functionality
Call the Azure Function to test its functionality

Click on Run and the JSON list of your products should be displayed in the Output tab.

The function returns the JSON with products
The function returns the JSON with products

Next call the function from your browser. The URL is <YourAzureFunctionName>.azurewebsites.net/api/YourFunction. Enter the URL in your browser and you will see the JSON displayed.

Test the function call in the browser
Test the function call in the browser

If we create the React app now and try to call the Azure Function, it won’t work. The reason why it won’t work is that CORS is not configured and therefore the request will be blocked. The configure CORS, open then the CORS tab, and enter http://localhost:3000. This will be the URL of the React app during the development.

Configure CORS
Configure CORS

I also tried * to allow all requests but it didn’t work for me.

Create the React App which will be deployed using Static Web Apps

You should have basic knowledge of React. If you are new to React, take a look at the documentation to install node.js and npm.

Open a new Powershell window and create a new react app with the following command:

npx create-react-app react-static-web-app

This will create a react project, named react-static-web-app. Go inside the project folder in Powershell and open Visual Studio Code with the following code:

code .

I will change the application to call my Azure Function and then display the returned list with Bootstrap cards. First, I create a new folder, called components, and create a new file inside this folder called products.js. Then I add the following code to the new file:

import React from 'react'

const Products = ({ products }) => {
    return (
        <div>
            {products.map((product) => (
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">{product.Name}</h5>
                        <h6 class="card-subtitle mb-2 text-muted">{product.Price}</h6>
                        <p class="card-text">{product.Description}</p>
                    </div>
                </div>
            ))}
        </div>
    )
};

export default Products

This method takes a list of products and displays every item. The next step is to implement the Azure Function call in the App.js file.

import React, { Component } from 'react';
import Products from './components/products';

class App extends Component {
  render() {
    return (
      <Products products={this.state.products} />
    )
  }

  state = {
    products: []
  };

  componentDidMount() {
    fetch('https://staticwebappwolfgang.azurewebsites.net/api/Function1')
      .then(res => res.json())
      .then((data) => {
        this.setState({ products: data })
      })
      .catch(console.log)
  }
}

export default App;

Lastly, I add the Bootstrap css file in the index.html file which is located in the Public folder.

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Open a new terminal in VS Code and start the application with:

npm start

This automatically opens your browser and should display your product list.

Testing the react app with the data from the Azure Function
Testing the React app with the data from the Azure Function

Check in the React app into Github and let’s deploy it with Static Web Apps.

Create Static Web Apps

In the Azure portal, search for Static Web App and click on Create to start the deployment process.

Create a Static Web Apps
Create a Static Web App

On the Basics tab enter a name, select a region, and select your Github repository and branch. Note the region is only the initial region for the deployment. After the deployment, Static Web Apps deploys your application globally to give your users the best possible user experience.

Configure the Static Web Apps
Configure the Static Web App

On the Build tab, I removed the Api location because I have my Azure Function already deployed. The Static Web Apps are still in preview and I couldn’t deploy a C# Azure Function because the build failed. The build demanded that the direction of the function must be set in the function.json file. With C#, you can’t edit the function.json file because it is created during the build. I was able to deploy a Javascript Azure Function using Static Web Apps though.

Configure the location of the app and api
Configure the location of the app and api

On the following screenshot, you can see all my entered information. Click on Create and the deployment process starts.

Overview of the Static Web Apps before creation
Overview of the Static Web App before creation

After the deployment is finished, you can see the URL of the Static Web App and also a link to the created Github Action.

Overview of the published Static Web Apps
Overview of the published Static Web App

Click on GitHub Action runs and you will be redirected to the Action inside your Github repository.

The Git Action is building your application
The Git Action is building your application

Click on the CI/CD pipeline and you can see more detailed information.

The Git Action run finished
The Git Action run finished

Before you can test your deployed React app, you have to enter its URL in the CORS settings of your Azure Function. You can find the URL on the overview tab of your Static Web Apps.

Add the URL of the Static Web Apps to the CORS Setting of the Azure Function
Add the URL of the Static Web App to the CORS Setting of the Azure Function

After you entered the URL in the CORS settings, call it in your browser and you should see your React app displaying the list of products.

Testing the Static Web Apps with the Azure Function
Testing the Static Web App with the Azure Function

Conclusion

Static Web Apps are a great new feature to quickly deploy your static website and host it globally. The feature is still new and in preview therefore it is no surprise that everything is not working perfectly yet. Once all problems are solved, I think it will be a great tool for a simple website, especially since it is free.

In my next post, I will show you how to host your website for free and also extend the Azure Function to be able to read data from a database.

You can find the code of the React demo here and the code of the Azure Function demo here.

Published inCloudProgramming

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    RSS
    Follow by Email
    LinkedIn
    Share