Skip to content

Customizing, Re branding and Deploying SSW.People

Jump to bottom
Christian Morford-Waite [SSW] edited this page Aug 3, 2020 · 16 revisions

Customizing, Re-branding and Deploying SSW.People

Examples:

Requirements:

  • A GitHub account
  • An Azure account

1. Deploying

1. Fork Northwind.People

First, you will need to fork the sample profiles repository: https://github.com/SSWConsulting/Northwind.People

  1. Click on the fork button Click on the fork button Figure: Click on the fork button

  2. Choose your GitHub Account Choose the GitHub account where you want to fork Figure: Choose the GitHub account where you want to fork

  3. Your fork is created Your fork has been created Figure: Your fork has been created

2. Fork SSW.People

You will need to fork this repository: https://github.com/SSWConsulting/SSW.People

  1. Choose the GitHubAccount Choose the GitHub account where you want to fork
    Figure: Choose the GitHub account where you want to fork

  2. Fork is being created Fork will then be created on your GitHub account
    Figure: Fork will then be created on your GitHub account

  3. Update the site-config.js and change the value of 'profilesRepo' with the URL of your own fork (Step 1) SSW People using the Northwind profile repository Figure: SSW People using the Northwind profile repository

3. Create your Azure Static WebApp

  1. Open your Azure account and search for Static Web Apps, click on it. Search for Static Web Apps
    Figure: Search for Static Web Apps

  2. Click on the Add button Click on Add
    Figure: Click on Add

  3. Choose your Resource Group and choose a name and a region for your Web App then click Sign in with GitHub Choose where to deploy your app
    Figure: Choose where to deploy your app

  4. Once signed in, you will need to choose your account, the repo and the branch you need to use (Main is recommended) then click on ‘Next: Build’ Select your GitHub repo
    Figure: Select your GitHub repo

  5. Delete the Api location, and set ’App artifact location’ to ’public’ then click ’Click Review + create’ Setup the build variables
    Figure: Setup the build variables

  6. Review then ‘Click Create’
    Review the details
    Figure: Review the details

  7. Your Static Web App has been created Overview of your app
    Figure: Overview of your app

  8. Open your GitHub repo and go to action, you can see that a workflow was created and failed (don’t worry, we will fix it) New workflow created
    Figure: New workflow created

4. Configure the Github Action generated by Azure Static WebApp

First, you need to create the following secrets:

  • CONTACT_API: URL of the API used by the contact form, set it to FALSE if you don’t have any
  • DATA_API_URL: URL of the API used to get Data for the profiles. You can use any data source you want as long as the JSON structure is the same or use the Northwind.json file that you can find on the Northwind.People.Profiles repo, set to FALSE if you prefer to use Microsoft CRM as data source
  • DATA_API_AUTHORIZATION: Authorization token if needed, set to FALSE if not required
  • EVENTS_API: URL of the API used by the events widget, set it to FALSE if you don’t have one
  • GOOGLE_ANALYTICS: Google Analytics tracking ID (eg. UA-000000-2), set it to FALSE if you don't have one
  • RECAPTCHA_KEY: Key for the Recaptcha used in the contact form, set it to FALSE if you don't have one
  • YOUTUBE_API_KEY: YouTube API key needed to get the Youtube playlist, set it to FALSE if you don't have one

If you are using Microsoft CRM, you can create the following secrets, you will have to update the GitHub action file accordingly:

  • CRM_APP_ID: the CRM application ID
  • CRM_TENANT: e.g northwind.crm.dynamics.com
  • CRM_TENANT_ID: the tenant ID
  • CRM_APP_SECRET: The CRM application secret
  • CRM_SCOPE: e.g https://northwind.crm.dynamics.com/.default
  • CRM_VIEW_CURRENT: View ID of current employees
  • CRM_VIEW_PAST: View ID of past employees

Minimum Defaults:

CONTACT_API = FALSE
DATA_API_URL = “https://raw.githubusercontent.com/SSWConsulting/Northwind.People.Profiles/main/northwind.json”
DATA_API_AUTHORIZATION = FALSE
EVENTS_API = FALSE
GOOGLE_ANALYTICS = FALSE
RECAPTCHA_KEY = FALSE
YOUTUBE_API_KEY = FALSE

  1. Go to Settings - Secrets then click on the 'New secrets' Add new secret Figure: Add new secret

  2. Once you created all the secrets, you need to modify the YAML file created by Azure in the folder /.github/workflows Find your workflow YAML file Figure: Find your workflow YAML file

  3. Change from:

  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
    - uses: actions/checkout@v1
    - name: Build And Deploy
      id: builddeploy
      uses: Azure/[email protected]
      with:
        azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BLUE_DESERT_09263D300 }}
        repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
        action: 'upload'
        ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
        app_location: '/' # App source code path
        app_artifact_location: 'public' # Built app content directory - optional
        ###### End of Repository/Build Configurations ######

To:

  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
    - uses: actions/checkout@v1
    - name: Build And Deploy
      id: builddeploy
      uses: Azure/[email protected]
      with:
        azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BLUE_DESERT_09263D300 }}
        repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
        action: 'upload'
        app_build_command: 'apt install -y git && yarn devbuild'
        ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
        app_location: '/' # App source code path
        app_artifact_location: 'public' # Built app content directory - optional
        ###### End of Repository/Build Configurations ######
    env:
      CONTACT_API: ${{ secrets.CONTACT_API }}      
      DATA_API_URL: ${{ secrets.DATA_API_URL }}
      DATA_API_AUTHORIZATION: ${{ secrets.DATA_API_AUTHORIZATION }}
      EVENTS_API: ${{ secrets.EVENTS_API }}
      GOOGLE_ANALYTICS: ${{ secrets.GOOGLE_ANALYTICS }}
      RECAPTCHA_KEY: ${{ secrets.RECAPTCHA_KEY }}
      YOUTUBE_API_KEY: ${{ secrets.YOUTUBE_API_KEY }}
      VERSION_DEPLOYED: '1.0.0'
      CHINA_BUILD: 'FALSE'
      REWRITES_JSON_URL: 'FALSE'
      CRM_APP_ID: ''
      CRM_TENANT: ''
      CRM_TENANT_ID: ''
      CRM_APP_SECRET: ''
      CRM_SCOPE: ''
      CRM_VIEW_CURRENT: ''
      CRM_VIEW_PAST: ''
  1. Commit your change, create a pull request if you did it on a different branch than main and merge it. A merge or a push on Main will trigger the GitHub Action. The Action should now successfully deploy your app on the Static Web App

At this point you should have a working copy of SSW People running on your static site

SSW People using the Northwind profile repository Figure: Congratulations! SSW.People is now deployed using the Northwind profile repository

Next Step: Re-branding >

Index

1. Customizing, Re-branding and Deploying SSW.People

Clone this wiki locally