Post
Ask Question

Azure Static Web Apps - Adding API Using Azure Functions

In the previous article, Azure Static Web Apps, we learned about Static Web Apps in Azure and learned through a step-by-step tutorial to create static web app in Azure. Moreover, we’ve also learned about Azure Functions in Azure Serverless. In this article, we’ll dive deeper into Azure Static Web Apps and learn to add and publish API using Azure Functions to Azure Static Web Apps.  

Before we start with this tutorial, it is integral that you Create a Static Web App following the previous Azure Static Web Apps article. Once the static web app is created in Azure, you can see the URL link as follows.  

When we open the app’s repository, the folder structure for the app and Static Web Apps Github workflow should be within the folder, .github/workflows.  

Creating an API 

Now, for the static web app API, let us create a project of Azure Function. We use the Static Web Apps Visual Studio Code extension for this which creates the project named as API at the very root of the repository.    

├── .github
│   └── workflows
│       └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml
│
└── (folders and files from your static web app)

Step 1

Press the F1 Command in order to open the Command Palette.  

 

Step 2 

Check for Azure Static Web Apps: Create HTTP Function.  

 

If in case, the option is not available, check in to Install the Extension from the Marketplace.   

 

Step 3 

Use the following values when prompted.  

Prompt  Value 
Select a language  JavaScript 
Provide a function name  Message

With this, Azure Function project is now generated which has the HTTP triggered function. The structure of the project would look similar to the following.  

├── .github
│   └── workflows
│       └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml
│
├── api
│   ├── message
│   │   ├── function.json
│   │   └── index.js
│   ├── host.json
│   ├── local.settings.json
│   └── package.json
│
└── (folders and files from your static web app)

Step 4 

Now, the message function is updated in order to return a message to the frontend in the api/message/index.js 

module.exports = async function (context, req) {
    context.res.json({
        text: "Hello from the API"
    });
};

Step 5 

For Frameworkless structure, we update the frontend app in order to call the API at /api/message and hence to display response message.  

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Vanilla JavaScript App</title>
</head>

<body>
    <main>
    <h1>Vanilla JavaScript App</h1>
    <p>Loading content from the API: <b id="name">...</b></p>
    </main>

    <script>
    (async function() {
        const { text } = await( await fetch(`/api/message`)).json();
        document.querySelector('#name').textContent = text;
    }())
    </script>
</body>

</html>

Step 6 

Now, using the command line tools of bash, we run the frontend and the API locally. First, we install the Azure Static Web Apps CLI and Aure Functions Core Tools V3.  

npm install -g @azure/static-web-apps-cli 

npm install -g azure-functions-core-tools@3 

Step 7 

As we are working without any Frameworks like Angular, Vue and React, we do not need to build the app. For all other frameworks, we need commands to build which is performed in specific folders.  

Step 8 

Now, we start the app through the Static Web Apps CLI to run the API and frontend app together.  

We use the ‘start’ command to start the Static Web Apps CLI in the root of the repository. 

swa start src --api-location api   

Next, the app can be accessed from http://localhost:4280/ as the CLI process has started. We can see that the API has been called in the page this displaying, “Hello from the API” as we instructed above.  

Finally, we type Ctrl + C in order to stop the CLI.  

Adding the API location to Workflow 

We need to update the repository’s GitHub Action Workflow with the appropriate location of the API folder before deploying the App to Azur.  

Step 9 

We can open the workflow using similar link like this - .github/workflows/azure-static-web-apps-<DEFAULT-HOSTNAME>.yml. 

Now, the properties of the api_location can be set to API and we save the file.  

Changes in Deployment 

Every software work demands changes. Software itself is an iterating and evolving process. Here, we commit and push our code the GitHub repository in order to publish any changes to our static web app in Azure.  

Using F1 key, we open the Command Palette and select the Git: Command All command. When we get prompted for commit message, press ‘add API’ which will then commit all the changes we make to the repository. We can also select Git: push command from the same command palette using F1 which pushes any changes to the repository and moreover, support for building and deploying the apps to trigger GitHub actions for the Static Web App. Finally, we can open the repository in GitHub and check the status and monitor the workflow. As the run of the workflow is completed, we can check our changes in our static web app visiting it.  

Conclusion 

Thus, in this article, we learned about adding API to our Azure Static Web Apps.   We went through a step-by-step tutorial to create the AI through Azure Functions for the Static Web app we learned to create in previous article Azure Static Web Apps. We updated the app to call API for the framework less approach. Next, we run our app and API together using CLI for Static Web Apps. Lastly, we also learned to add location of the API in the workflow along with the process to publish any changes. 


Similar Articles