Deploying a static Web App

When it comes to deploying modern web applications, Azure Static Web Apps offer a robust and scalable solution, especially for developers leveraging frameworks like React and build tools like Vite. Integrating deployment with GitHub Actions ensures continuous deployment and streamlined workflow management. This post will guide you through setting up and deploying a React + Vite app to Azure Static Web App Service using GitHub Actions.

Why Choose Azure Static Web Apps?

Azure Static Web Apps provide a comprehensive platform for hosting static front-end apps with integrated serverless APIs, global distribution, custom domains, and authentication features. This makes it an excellent choice for React developers looking to host their apps with minimal configuration and easy CI/CD integration.

Prerequisites

Before starting, ensure you have:

• Azure account: Sign up at azure.com if you don’t have one.
• GitHub repository: Your React + Vite app should be pushed to a GitHub repository.
• Azure Static Web Apps extension (optional): Useful for VS Code users to simplify the setup process.

Step 1: Create a React + Vite App

If you don’t already have a React app built with Vite, you can quickly set one up:

# Create a new Vite project with React template
npm create vite@latest my-react-vite-app --template react
 
# Navigate into the project folder and install dependencies
cd my-react-vite-app
npm install

Run your development server to ensure everything is set up correctly:

npm run dev

Step 2: Push Your Code to GitHub

Initialize a Git repository and push your app to GitHub:

# Initialize the repository
git init
git add .
git commit -m "Initial commit with React + Vite app"
 
# Add remote origin and push (replace <username> and <repo> with your own)
git remote add origin https://github.com/<username>/<repo>.git
git branch -M main
git push -u origin main

Step 3: Create an Azure Static Web App

1. Navigate to the Azure portal and search for "Static Web Apps".
2. Click Create and fill in the following:
   • Subscription: Choose your subscription.
   • Resource group: Create or select an existing resource group.
   • Name: Provide a unique name for your web app.
   • Region: Choose a region close to your user base.
   • Deployment details:
     • Source: Select GitHub.
     • Repository: Connect your GitHub account and select your repo.
     • Branch: Choose the branch where your code is hosted (typically main).
3. Build details:
   • Build Presets: Select Vite.
   • App location: / (root directory)
   • Output location: dist (default output folder for Vite)

Step 4: Configure GitHub Actions

When you create the Static Web App, Azure automatically generates a GitHub Actions workflow file in your repository (.github/workflows/azure-static-web-apps-<unique-id>.yml). This workflow handles building and deploying your app whenever changes are pushed to the specified branch.

Step 5: Customize the GitHub Action Workflow

Open the azure-static-web-apps-<unique-id>.yml file and ensure it looks something like this:

name: Azure Static Web Apps CI/CD
 
on:
  push:
    branches:
      - main  # Or the branch you specified
 
jobs:
  build_and_deploy_job:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout the code
        uses: actions/checkout@v3
 
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16'  # Match with the version used in your app
 
      - name: Install dependencies
        run: npm install
 
      - name: Build the app
        run: npm run build
 
      - name: Deploy to Azure Static Web Apps
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          app_location: '/'  # Root directory
          output_location: 'dist'  # Vite's default build output directory

Step 6: Verify the Deployment

After the workflow completes, check your Azure portal:

1. Go to Static Web Apps and select your app.
2. Under Environments, you should see the status of your deployment. A successful deployment means your React app is live and accessible via the default generated URL.

Step 7: Final Touches

• Custom Domain: If you want to use a custom domain, configure it under the Custom domains tab in your Azure Static Web Apps dashboard. Here is an example on how to do this by purchasing a domain: Using Custom domain for SWA
• Environment Variables: If your app uses environment variables, set them in the Environment Variables tab in the Azure portal.

Troubleshooting Tips

• Build Failures: Ensure the Node.js version specified in the GitHub Actions workflow matches your local environment.
• Output Location: Verify that your dist folder is being correctly generated by Vite.
• Permissions: Ensure your GitHub repository is connected properly with Azure and that permissions are correctly set up for GitHub Actions.

Conclusion

Deploying a React + Vite app to Azure Static Web Apps via GitHub Actions streamlines your CI/CD pipeline, providing a seamless path from development to production. With this setup, any future code pushes to the main branch will trigger automatic builds and deployments, ensuring your app is always up-to-date with minimal manual intervention.