Hosting Blazor Web Assembly App on Azure Static Web App

01-dotnet-run.sh

dotnet run -p BlazorNpmSample

02-action-dotnet.yaml

- name: Setup .NET SDK
  uses: actions/setup-dotnet@v1
  with:
    dotnet-version: '3.1.300'

03-action-dotnet-publish.yaml

- name: Publish Blazor WASM app
  shell: bash
  run: |
    dotnet publish BlazorNpmSample -c Release -o published

04-action-build-deploy.yaml

- name: Build And Deploy
  id: builddeploy
  uses: Azure/static-web-apps-deploy@v0.0.1-preview
  with:
    ...
    app_location: "published/wwwroot"
    api_location: ""
    app_artifact_location: "published/wwwroot"

05-api-func-start.sh

func start --script-root BlazorApiSample

06-api-run.txt

http://localhost:7071/api/hello?count=1

07-proxy-http-trigger.js

const axios = require('axios');

module.exports = async function (context, req) {
    let baseUri = process.env.API__BASE_URI;
    let endpoint = process.env.API__ENDPOINT
    let authKey = process.env.API__AUTH_KEY === undefined ? '' : process.env.API__AUTH_KEY;
    let count = req.query.count === undefined ? 0 : req.query.count;

    let requestUri = baseUri + endpoint + '?count=' + count + '&code=' + authKey;

    let response = await axios.get(requestUri);
    let result = { "text": response.data.message };

    context.res = {
        // status: 200, /* Defaults to 200 */
        body: result
    };
}

08-proxy-local-settings.json

{
  ...
  "Values": {
    ...
    "API__BASE_URI": "http://localhost:7071/api/",
    "API__ENDPOINT": "hello",
    "API__AUTH_KEY": ""
  }
}

09-proxy-func-start.sh

func start --port 7072 --script-root BlazorProxySample

10-proxy-local-settings-cors.json

{
  ...
  "Values": {
    ...
  },
  "Host": {
    "CORS": "*"
  }
}

11-action-appsettings.yaml

- name: Update appsettings.json
  shell: bash
  run: |
    echo '{ "PROXY_BASE_URI": "/api/", "PROXY_ENDPOINT": "hello " }' > BlazorNpmSample/wwwroot/appsettings.json

12-action-build-deploy.yaml

- name: Build And Deploy
  id: builddeploy
  uses: Azure/static-web-apps-deploy@v0.0.1-preview
  with:
    app_location: "published/wwwroot"
    api_location: "BlazorProxySample"
    app_artifact_location: "published/wwwroot"