Episode 2: How to Deploy a React SPA to Azure Static Web Apps for Free

Now that our Express API from Episode 1 is deployed and running in the cloud, the next step is hosting the frontend. If you build React applications with Vite or Create React App, deploying them to a traditional web server can be overkill and unnecessarily expensive.

In this guide, we will deploy a React single-page application (SPA) to Azure Static Web Apps. It comes with a generous free tier, global content delivery network (CDN) distribution, automatic SSL certificates, and direct integration with your API.

Prerequisites
Before starting, make sure you have:

Node.js and npm installed.

A GitHub account with a repository for your React project.

An active Azure Account. You can grab free student credits via Azure for Students:

https://azure.microsoft.com/free/students/?wt.mc_id=studentamb_512515

Visual Studio Code installed. Download it directly from VS Code Docs:

https://code.visualstudio.com/docs?wt.mc_id=studentamb_512515

Step 1: Create Your React Application

If you already have a React app ready, push it to a GitHub repository and skip to Step 2. Otherwise, let's create a fast React app using Vite:

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

Open src/App.jsx and replace its content to connect to our Episode 1 Express backend:

import { useEffect, useState } from 'react';
import './App.css';

function App() {
  const [apiData, setApiData] = useState(null);

  useEffect(() => {
    // Replace with your live Azure App Service URL from Episode 1
    fetch('https://<your-app-name>.azurewebsites.net/')
      .then((res) => res.json())
      .then((data) => setApiData(data))
      .catch((err) => console.error('API Error:', err));
  }, []);

  return (
    <div style={{ textAlign: 'center', marginTop: '50px', fontFamily: 'sans-serif' }}>
      <h1>React + Azure Static Web Apps</h1>
      <p>Status from Express Backend:</p>
      {apiData ? (
        <pre style={{ background: '#f4f4f4', padding: '15px', display: 'inline-block', borderRadius: '5px' }}>
          {JSON.stringify(apiData, null, 2)}
        </pre>
      ) : (
        <p>Loading backend status...</p>
      )}
    </div>
  );
}

export default App;

Push this project to a new GitHub repository on your profile.

Step 2: Create the Azure Static Web App Resource

Sign in to the Azure Portal:

https://portal.azure.com/?wt.mc_id=studentamb_512515

Search for Static Web Apps in the top search bar and click Create.

Fill in the basic configuration:

Subscription: Select your active subscription.

Resource Group: Select existing or create new (e.g., rg-react-azure).

Name: my-react-static-app

Plan type: Select Free: For hobby or personal projects.

Region: Pick a region closest to your users (e.g., East US or West Europe).

Step 3: Link GitHub and Deployment Details

Under Deployment Details, select GitHub as the source.

Click Sign in with GitHub and authorize Azure.

Select your GitHub Organization, Repository, and Branch (usually main).

Under Build Details, select the preset for your framework:

Build Presets: Select Vite (or React if using Create React App).

App location: /

Api location: Leave blank for now.

Output location: dist (for Vite) or build (for CRA).

Click Review + Create, then click Create.

Step 4: Automated GitHub Actions CI/CD Pipeline

Once Azure provisions the resource, it automatically generates a GitHub Actions workflow file inside your repository at .github/workflows/.

Go to your GitHub repository and click the Actions tab.

You will see a workflow running titled Azure Static Web Apps CI/CD.

Wait about 1–2 minutes for the workflow to complete.

Once finished, open your Static Web App resource in the Azure Portal, locate the URL, and open it in your browser.

Your React app is now globally distributed on Azure with HTTPS enabled out of the box.

Common Issues & Troubleshooting

Blank Screen / 404 on Refresh: If using React Router, single-page routing might break on refresh. Add a staticwebapp.config.json file to your public/ folder with fallback routes:

{
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

Failed Build Step: Ensure your package.json includes the standard "build": "vite build" script and that your output directory (dist or build) matches what you specified in Step 3.

📚 Helpful Resources & Documentation

Official Azure Static Web Apps Documentation:

https://learn.microsoft.com/azure/static-web-apps/?wt.mc_id=studentamb_512515

Get Started with Azure Free for Students:

https://azure.microsoft.com/free/students/?wt.mc_id=studentamb_512515

Configure Static Web Apps Routing:

https://learn.microsoft.com/azure/static-web-apps/configuration?wt.mc_id=studentamb_512515

In the next episode, we'll look at how to set up a managed PostgreSQL database on Azure and connect it safely to our Node.js backend using environment variables.