Publish a React Front end with a C# Azure Function Back end

Question

Publish a React Front end with a C# Azure Function Back end

Justin Smith 0

Every time I publish it tries to set up node.js as the api. What is an example yaml file that publishes react front end with an Azure Function back end in Azure static web apps?

I'm using github actions with yaml

Siva Nair 2,340 Microsoft External Staff Moderator

Hi Justin Smith,

Lets set up your .github/workflows YAML file correctly. below example of a GitHub Actions workflow YAML that handles this deployment:

.github/workflows/azure-static-web-app.yml

name: Azure Static Web Apps CI/CD
on:
  push:
    branches:
      - main  # Trigger deployment on push to the main branch
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    name: Build and Deploy React + Azure Functions
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16' # Specify your Node.js version
      - name: Install dependencies
        run: |
          cd client
          npm install
          cd ../functions
          npm install
      - name: Build React app
        run: |
          cd client
          npm run build
      - name: Build Azure Functions
        run: |
          cd ../functions
          npm run build
      - name: Deploy to Azure Static Web App
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations
          action: "upload"
          ###### Add your custom paths if needed ######
          app_location: "client"          # Path to your React app
          api_location: "functions"       # Path to your Azure Functions
          output_location: "client/build" # Build output folder for React

Points:

app_location: Points to your React app folder (client in this case).
api_location: Points to your Azure Functions folder (functions).
output_location: Specifies where the React build output is stored.
Azure Token: Ensure you've added AZURE_STATIC_WEB_APPS_API_TOKEN as a secret in your GitHub repository settings.

If it’s unnecessarily setting up Node.js, double-check:

Ensure the correct version is specified (16 or as needed).
Make sure the npm run build commands are correct and necessary dependencies are installed.

If you have any further assistant, do let me know.

Siva Nair 2,340 Reputation points Microsoft External Staff Moderator

2025-04-04T01:15:24.45+00:00

Hi Justin Smith,

Just checking back to see if the above comment helped or you have a resolution yet. In case if you have any resolution, please do share that same with the community as it can be helpful to others. Otherwise, will respond with more details and we will try to help.
Justin Smith 0 Reputation points

2025-04-04T02:07:16.88+00:00

This only works if React app is statically exported, it doesn't work if you have middleware.

I'm now investigating publishing to a separate Azure Function App and linking the API

Siva Nair 2,340 Microsoft External Staff Moderator

Hi Justin Smith,

Noted, Please correct me if am going incorrect below,

you are using Azure Static Web Apps with GitHub Actions and want to separate the API (Azure Functions) from the Static Web App, your GitHub Action for the static site should not try to build or deploy the API. Instead, it should only handle the React frontend, and you would publish the API separately (with its own GitHub Action or deploy step).

If yes please find the below separate Yaml files:

GitHub Actions YAML for React-only frontend

name: Deploy React App to Azure Static Web Apps
on:
  push:
    branches:
      - main  # or your deployment branch
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    name: Build and Deploy React App
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18'  # Or whatever version your React app needs
      - name: Install dependencies
        run: npm install
        working-directory: frontend  # change to your React app folder
      - name: Build React app
        run: npm run build
        working-directory: frontend
      - 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 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Optional, auto-generated
          action: "upload"
          app_location: "frontend"        # Path to React app
          output_location: "build"        # Path to build output
          skip_app_build: true            # We already built the app above
          skip_api_build: true            # Tell SWA NOT to build an API

then have a second GitHub Action (or deploy pipeline) dedicated to deploying your Azure Function App (in another folder or repo)

name: Deploy Azure Functions API
on:
  push:
    branches:
      - main
    paths:
      - 'api/**'
jobs:
  deploy_api:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
      - name: Setup .NET
        uses: actions/setup-dotnet@v3
        with:
          dotnet-version: '8.0.x'
      - name: Publish Function App
        run: dotnet publish -c Release -o ./publish
        working-directory: api
      - name: Deploy to Azure Function App
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'your-function-app-name'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZURE_FUNCTIONAPP_PUBLISH_PROFILE }}
          package: './api/publish'

assuming your Azure Function App is already linked to the Static Web App in the Azure portal (via the API integration tab), or you're calling it externally via full URL

If you have any further assistant, do let me know.

Siva Nair 2,340 Reputation points Microsoft External Staff Moderator

2025-04-05T03:23:26.6233333+00:00

Hi Justin Smith,

Just checking back to see if the above comment helped or you have a resolution yet. In case if you have any resolution, please do share that same with the community as it can be helpful to others. Otherwise, will respond with more details and we will try to help.
Siva Nair 2,340 Reputation points Microsoft External Staff Moderator

2025-04-06T12:16:53.6166667+00:00

Hi Justin Smith,

Just checking back to see if the above comment helped or you have a resolution yet. In case if you have any resolution, please do share that same with the community as it can be helpful to others. Otherwise, will respond with more details and we will try to help.
Justin Smith 0 Reputation points

2025-04-06T13:10:40.8766667+00:00

I'm still having issues with it. It's publishing without error, but the website won't start. I've even tried swa cli and get the same issue. There's an error happening that I can't see. It's not providing any logs, so it's difficult to fix. I'm going back to the simplest next.js apps, but they have the same problem
Siva Nair 2,340 Reputation points Microsoft External Staff Moderator

2025-04-07T11:16:33.42+00:00
Hi Justin Smith,

Noted, Since you’re using Next.js and publishing to Azure Static Web Apps, and even swa cli is failing silently,

Please note that Azure Static Web Apps supports static site hosting, which means it only works with fully statically exported Next.js apps. This is typically done via next export, which generates a static version of your site. Unfortunately, features like middleware, server-side rendering (SSR), and API routes are not supported in this model. If your app depends on these features, Static Web Apps will deploy without error but fail silently — often loading a blank page with no logs or useful feedback. Limitation with Azure static web app for next.js

If your app requires middleware, SSR, or API routes, Azure Static Web Apps is not suitable. Instead, you should host your app on Azure spp service, which supports Node.js and can run a full Next.js server. Another option is to use a custom Express server with Next.js and deploy that to App Service. Azure also allows connecting a Function App to App Service for APIs.

Few workaround for reference:

To make a Next.js app compatible with Static Web Apps, you must statically export it. This is done by either adding the following in next.config.js:

module.exports = { output: 'export', }

Or by manually running:

npm run build && npm run export

This will create an out/ directory with a fully static version of your site. That directory is what should be deployed to Azure Static Web Apps. The site will work as expected if it avoids server-side functionality.

In your GitHub Actions YAML, ensure you are exporting the site and then deploying the output folder (out/) as the app_location. Here’s a simplified version of a valid workflow:

- name: Build static site run: | npm install npm run build npm run export - name: Deploy to 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: "out" api_location: "" output_location: ""

Please refer, https://learn.microsoft.com/en-us/azure/static-web-apps/build-configuration?tabs=identity&pivots=github-actions

If you have any further assistant, do let me know.
Siva Nair 2,340 Reputation points Microsoft External Staff Moderator

2025-04-08T07:21:18.0533333+00:00

Hi Justin Smith,

Just checking back to see if the above comment helped or you have a resolution yet. In case if you have any resolution, please do share that same with the community as it can be helpful to others. Otherwise, will respond with more details and we will try to help.

Your answer

Siva Nair 2,340 Reputation points Microsoft External Staff Moderator

2025-04-03T08:03:47.4+00:00

Hi Justin Smith,

Lets set up your .github/workflows YAML file correctly. below example of a GitHub Actions workflow YAML that handles this deployment:

.github/workflows/azure-static-web-app.yml

name: Azure Static Web Apps CI/CD on: push: branches: - main # Trigger deployment on push to the main branch jobs: build_and_deploy: runs-on: ubuntu-latest name: Build and Deploy React + Azure Functions steps: - name: Checkout code uses: actions/checkout@v3 - name: Setup Node.js uses: actions/setup-node@v3 with: node-version: '16' # Specify your Node.js version - name: Install dependencies run: | cd client npm install cd ../functions npm install - name: Build React app run: | cd client npm run build - name: Build Azure Functions run: | cd ../functions npm run build - name: Deploy to Azure Static Web App uses: Azure/static-web-apps-deploy@v1 with: azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations action: "upload" ###### Add your custom paths if needed ###### app_location: "client" # Path to your React app api_location: "functions" # Path to your Azure Functions output_location: "client/build" # Build output folder for React

Points:

app_location: Points to your React app folder (client in this case).

api_location: Points to your Azure Functions folder (functions).

output_location: Specifies where the React build output is stored.

Azure Token: Ensure you've added AZURE_STATIC_WEB_APPS_API_TOKEN as a secret in your GitHub repository settings.

If it’s unnecessarily setting up Node.js, double-check:

Ensure the correct version is specified (16 or as needed).

Make sure the npm run build commands are correct and necessary dependencies are installed.

If you have any further assistant, do let me know.
Siva Nair 2,340 Reputation points Microsoft External Staff Moderator

2025-04-04T01:15:24.45+00:00

Hi Justin Smith,

Just checking back to see if the above comment helped or you have a resolution yet. In case if you have any resolution, please do share that same with the community as it can be helpful to others. Otherwise, will respond with more details and we will try to help.
Justin Smith 0 Reputation points

2025-04-04T02:07:16.88+00:00

This only works if React app is statically exported, it doesn't work if you have middleware.

I'm now investigating publishing to a separate Azure Function App and linking the API
Siva Nair 2,340 Reputation points Microsoft External Staff Moderator

2025-04-05T03:23:26.6233333+00:00

Hi Justin Smith,

Just checking back to see if the above comment helped or you have a resolution yet. In case if you have any resolution, please do share that same with the community as it can be helpful to others. Otherwise, will respond with more details and we will try to help.
Siva Nair 2,340 Reputation points Microsoft External Staff Moderator

2025-04-06T12:16:53.6166667+00:00

Hi Justin Smith,

Just checking back to see if the above comment helped or you have a resolution yet. In case if you have any resolution, please do share that same with the community as it can be helpful to others. Otherwise, will respond with more details and we will try to help.
Justin Smith 0 Reputation points

2025-04-06T13:10:40.8766667+00:00

I'm still having issues with it. It's publishing without error, but the website won't start. I've even tried swa cli and get the same issue. There's an error happening that I can't see. It's not providing any logs, so it's difficult to fix. I'm going back to the simplest next.js apps, but they have the same problem
Siva Nair 2,340 Reputation points Microsoft External Staff Moderator

2025-04-08T07:21:18.0533333+00:00

Hi Justin Smith,

Just checking back to see if the above comment helped or you have a resolution yet. In case if you have any resolution, please do share that same with the community as it can be helpful to others. Otherwise, will respond with more details and we will try to help.

Share via

Publish a React Front end with a C# Azure Function Back end

Your answer