Skip to content

Sample repo to demonstrate Azure Pipeline setup for react-atlas app and deploy to Static Web App

Notifications You must be signed in to change notification settings

webonyx/react-atlas-azure-sample

Repository files navigation

react-atlas-azure-sample

Sample repo to demonstrate Azure Pipeline setup for react-atlas app and deploy to Static Web App.

Acceptance

  • Project name: react-atlas-sample

  • Environments:

    • Prod:
      • Branch: main
      • Deployment url: Default Static Web App url. Ex PUBLIC_URL=https://proud-cliff-0a1355410.2.azurestaticapps.net
    • Test:
      • Branch: develop
      • Deployment url: non-root url prefixed by /dev. Ex PUBLIC_URL=https://react-atlas-sample-d6fzbhake3abbzaz.z01.azurefd.net/dev

Setup

  1. Create Azure Devops project: react-atlas-sample
  2. Enable project Repos
  3. Import code from GitHub to project repository. Ensure repository includes mandatory files.
    1. .ci
    2. staticwebapp.config.json
    3. .env.develop
    4. .env.main
    5. Refer to files in this example repo
  4. Create Static Web App react-atlas-sample in Azure Portal. Link to created project repos. A Pipeline will be created automatically during the Static Web App creation. The first Pipeline job would fail due to missing configs

Screenshot 2023-02-22 at 22 15 03

  1. Add build secrets: Update Pipeline > Library > Variable Group to add more secrets as environment variables. There is a Variable Group created after Static Web App creation. Add more environments to it: FONTAWESOME_TOKEN and GITHUB_TOKEN. Contact Jared for these environment values.

Screenshot 2023-02-22 at 22 16 50

  1. Update Pipeline yaml in repository to reflect example file in this repo. Mostly about updating environment variables and build command

Screenshot 2023-02-22 at 22 19 26

  1. Update repository env files (.env.main for prod and .env.develop for test), mostly about PUBLIC_URL and REACT_APP_OAUTH_CLIENT_ID

Extra steps needed for test environment since its public url is non-root url. We need a reverse proxy in front of Static Web App and strip the prefix before forwarding requests to it. That reverse proxy will be used is Azure Front Door CDN.

  1. Create an Azure Front Door instance, choose Custom for Origin type, input Static Web App develop environment hostname to Origin hostname

Screenshot 2023-02-22 at 22 25 57

  1. Add a rule set stripdevprefix to remove the /dev prefix.

Screenshot 2023-02-22 at 20 35 25

  1. Update default route to attach stripdevprefix rule set and set / for Origin path.

Screenshot 2023-02-22 at 22 31 47

Notes:

  • Do not enable CDN caching if public url come from external system such as atlast.att.com from Cloudfront

About

Sample repo to demonstrate Azure Pipeline setup for react-atlas app and deploy to Static Web App

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published