Skip to content

DEPLOY.md

Latest commit

 

History

History
64 lines (44 loc) · 5.15 KB

DEPLOY.md

File metadata and controls

64 lines (44 loc) · 5.15 KB

Deploy to Azure

Prerequisites

Notes

Due to the two methods of API support in Azure Static Web Apps with Functions, we will need to deploy a separate Azure Function for the /api/AadToken endpoint. For more information, please review how to bring your own Functions to SWA.

Due to Node dependency management in Azure Functions, we need to ensure all dependencies are installed in Azure. When deploying Function Apps from source control, any package.json file present in the repo will trigger an npm install during deployment. However when deploying via the Portal or CLI, you'll have to manually install the packages.

The directions below are for deploying with dependencies via VS Code, but you could also deploy using Kudu (on Windows only).

Azure Function for the AAD Token

  1. Copy or move the /api-aadtoken/ folder out to a new location and open as a new VS Code project.

  2. Run npm install from the VS Code Terminal to install the node-fetch dependency.

  3. From the Azure Functions extension within VS Code, click Deploy to Function App (cloud icon) and select or create a Function App in Azure.

  4. From the Azure Function in Azure Portal, click Configuration to add the following application settings using either the names & values previously pasted into /api/local.settings.json or new values for production resources.

    • AadTenantId
    • AppClientId
    • AppClientSecret

  5. Copy the Function URL from VS Code or Azure Portal (including a key that adds code param) and open in a browser to confirm a successful response from the AAD Token API. If needed, you can troubleshoot issues in the Portal by browsing to the Functions and Code + Test to debug logs while making an HTTP request.

  6. When a token is successfully returned from the API, override the fetchToken() reference to apiUrl within src/App/helper.js using your new Function URL. It will be in this format: https://APPNAME.azurewebsites.net/api/aad/token?code=DEFAULT_KEY

  7. Push the app change to your code repo that will be the deployment source. Please follow additional best practices for Securing Azure Functions and note the Security constraints with bringing your own functions to Azure Static Web Apps

Application Setup

  1. Click the button below to create an Azure Static Web App using your GitHub repository:

    Deploy to Azure

  2. Sign in to GitHub and authorize Azure Static Web Apps

  3. Select your organization, repository, and branch from the dropdowns

  4. Select React as the build preset

  5. Update the project structure:

    • App location = /
    • Api location = /api
    • Output location = build

  6. Click on 'Review + create' to create the Static Web App

  7. Click Configuration in the left nav to add the following app settings using either the names & values previously pasted into /api/local.settings.json or new values for production resources.

    • StorageConnectionString
    • AtlasAccountName

  8. Click Role management in the left nav and click Invite

    • Add yourself by using AAD and your email address as it appears in AAD
    • Add the admin role to the invite
    • Generate invitation link and copy into a new browser window to consent
    • Learn more about authentication & authorization

    Note: By default, the public/routes.json is setup to only allow Azure Active Directory and requires the admin role. You can use the app's /login to gain initial access. Learn more about authentication and authorization for Static Web Apps

  9. Copy the Static Web App URL from the Overview page, then go back to the Azure Function and click CORS to paste your app URL in the Allowed Origins.

  10. Open the Static Web App URL to confirm it is working the same as the local deployment method.