30 Days of Static Web Apps - Day 3 - API-Enabling SWA

Overview

This blog post walks through creating a React Azure Static Web App with an Azure Function App API backend. The React website gets a random number from a Azure Function App and displays on the Random Number button. The gif below shows the React websites behaviour.

Background

I have been learning Azure Static Web Apps over a long period of time, a few years now, and I am documenting my journey through 30 Days of Static Web Apps: #30DaysOfServerless | Azure Static Web Apps

Day 3 focuses on building and deploying an Azure Static Web App with a backend API.

My walkthroughs tend to be a little more in-depth than the tutorials provided in the 30 Days of Static Web Apps series because I do not always follow them exactly as written. I often take the time to explore the configuration, deployment, and implementation details in more depth to improve my understanding of how everything works together in real-world scenarios.

This post is based on #03: API-Enabling SWA | Azure Static Web Apps.

Step 1: Install Dependencies

1. Visual Studio Code (VS Code)

2. VS Code Extensions

   1. Azure Static Web App

   2. Azure Functions

3. NVM (my current version during this blog is 1.1.11)

4. Node (my current version during this blog is 22.22.3)

   1. nvm install 22.22.3

5. Azure Static Web Apps Command Line Interface (SWA CLI)

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

Step 2: Create a React Website

1. Create a working directory Day03a-BuildingSWA-FunctionAppsApi

2. Open VS Code and Open the Day03a-BuildingSWA-FunctionAppsApi folder

3. Open a new terminal, ensuring it is a CMD terminal and not a PowerShell terminal.

4. Install vite in Day03a-BuildingSWA-FunctionAppsApi folder using the below script.

   1. npm install vite --save-dev

5. Create the React app using Vite as per the script below. Give the app a name of react-swa-with-api and select yes for the "Install with npm and start now?" prompt

   1. npx create-vite@latest react-swa-with-api --template react

6. Once completed, open the output URL to test that the React website is working.

   1. EG. Local: http://localhost:5173/

The full code

npm install vite --save-dev
npx create-vite@latest react-swa-with-api --template react

Step 3: Create the Azure Function App API

1. Create an API folder in the react-swa-with-api.

2. Create the following files

   1. react-swa-with-api\api\host.json

   2. react-swa-with-api\api\local.settings.json

   3. react-swa-with-api\api\package-lock.json

   4. react-swa-with-api\api\package.json

3. Create a src folder in the react-swa-with-api/src

   1. react-swa-with-api\api\src\getRandomNumber.js

The final directory structure should look like the image below.

host.json

local.settings.json

package-lock.json

package.json

src\getRandomNumber.js

Step 4: Build and Test the Azure Function App API

1. Install dependencies for the Azure Function App API.

Change directories to Day03a-BuildingSWA-FunctionAppsApi\react-swa-with-api\api\

Run npm install

2. Run the API (via running the SWA)

Change the directory back to the react-swa-with-api using cd.. run the static web app with swa start http://localhost:5173 --api-location ./api --run "npm run dev"

Full script

cd react-swa-with-api\api
npm install
cd..
swa start http://localhost:5173 --api-location ./api --run "npm run dev"

3. Test the Azure Function App getRandomNumber Api Endpoint

Find the following line in the terminal output (note the port number may be different) getRandomNumber: [GET] http://localhost:7071/api/getRandomNumber Click the link or copy it into a browser and confirm that a random number is displayed.

Below is a screenshot of the terminal output that you should see.

Step 5: Modify the React App to call the getRandomNumber API Endpoint

The full App.jsx code is copied and pasted at the bottom of the blog post, should you need it.

1. Open the App.jsx file, located at Day03a-BuildingSWA-FunctionAppsApi\react-swa-with-api\src

2. Replace line import { useState } from 'react' with import { useState, useEffect } from 'react'

   
   

Replace

import { useState } from 'react'

With

import { useState, useEffect } from 'react'

3. import { useState } from 'react'

4. Replace the line const [count, setCount] = useState(0) to const [randomNumber, setRandomNumber] = useState(0)

Replace

const [count, setCount] = useState(0)

With

const [randomNumber, setRandomNumber] = useState(0)

5. below the const [randomNumber, setRandomNumber] = useState(0) line add the following code. This will get the random number from the function app endpoint and will get and set the initial random number on page load.

  const getRandomNumber = async () => {
    const res = await fetch('/api/getRandomNumber');
    const number = await res.text();
    setRandomNumber(number);
  };

  useEffect(() => {
    getRandomNumber();
  }, []);

6. Replace the button count with getRandomNumber instead of getCount

Replace

        <button
          type="button"
          className="counter"
          onClick={() => setCount((count) => count + 1)}
        >
		Count is {count}
        </button>

With

        <button
          type="button"
          className="counter"
          onClick={getRandomNumber}
        >
	      Random Number is {randomNumber}
        </button>

Step 6: Run and test the App

TIP - If the terminal is still running, press Press Ctr + C to stop the static web app from running locally.

1. In the terminal from the directory Day03a-BuildingSWA-FunctionAppsApi\react-swa-with-api run swa start http://localhost:5173 --api-location ./api --run "npm run dev"

2. In the terminal output, click or copy the link on the line Azure Static Web Apps emulator started at http://localhost:4280. Press CTRL+C to exit. (Note: the port number might be different).

3. Click on the " Random Number is XX button to change the random number.

Appendix: Full App.jsx code

This is the full App.jsx should it be required for debugging the process.