Skip to content

Customizing, Re branding and Deploying SSW.People

Jump to bottom
Sebastien Boissiere [SSW] edited this page Jul 10, 2020 · 16 revisions

Customizing, Re-branding and Deploying SSW.People

Examples:

Requirements:

  • A GitHub account
  • An Azure account

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
  • EVENTS_API: URL of the API used by the events widget, set it to FALSE if you don’t have any
  • GOOGLE_ANALYTICS: Google analytics key, you can use a random string if you don’t have one
  • RECAPTCHA_KEY: key for the Recaptcha used in the contact form, set it to False
  • SOPHIE_API_URL: URL of the API used to get Data from CRM, you can use any data source you want if the model is the same or use the Northwind.json file that you can find in Northwind.People repo in an Azure Blob storage
  • SOPHIE_AUTHORIZATION : Authorization token if needed, set to FALSE if not needed
  • SOPHIE_TENANT : Tenant ID, if not used, any string will do
  • YOUTUBE_API_KEY: Youtube Api key needed to get the Youtube playlist, any value will do if you don’t have any

Minimum Defaults:

CONTACT_API = FALSE
EVENTS_API = FALSE
GOOGLE_ANALYTICS = “None”
RECAPTCHA_KEY = FALSE
SOPHIE_API_URL = “https://raw.githubusercontent.com/SSWConsulting/Northwind.People/main/northwind.json”
SOPHIE_AUTHORIZATION = FALSE
SOPHIE_TENANT = “None”
YOUTUBE_API_KEY = “None”

  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:
      GOOGLE_ANALYTICS: ${{ secrets.GOOGLE_ANALYTICS }}
      RECAPTCHA_KEY: ${{ secrets.RECAPTCHA_KEY }}
      SOPHIE_API_URL: ${{ secrets.SOPHIE_API_URL }}
      SOPHIE_TENANT: ${{ secrets.SOPHIE_TENANT }}
      SOPHIE_AUTHORIZATION: ${{ secrets.SOPHIE_AUTHORIZATION }}
      YOUTUBE_API_KEY: ${{ secrets.YOUTUBE_API_KEY }}
      VERSION_DEPLOYED: '1.0.0'
      CHINA_BUILD: 'FALSE'
      EVENTS_API: ${{ secrets.EVENTS_API }}
      CONTACT_API: ${{ secrets.CONTACT_API }}
  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: SSW People using the Northwind profile repository

5. Customization

  • How to change Company name, logo
    • In site-config.js, you can change the company name, company website URL, Facebook and twitter account.
    • For the logo, replace /src/images/branding/Logo.svg
    • Image will be rendered with width=90px height=60px For the Favicon, replace /src/images/branding/icon.png
  • How to change the color theme You can change the color by modify in src/styles.css, the following:
    • text-ssw-red
    • bg-ssw-red
    • border-ssw-red
    • color-ssw-red
    • bg-button-hover
    • color-hover
    • bg-ssw-grey
    • bg-ssw-dark-grey
    • bg-grey-translucent
    • border-ssw-grey
  • How to change the intro: Modify the file: /content/home/intro.md

Here's an example of a rebranded SSW People SSW People using the Northwind profile repository Figure: SSW People using the Northwind profile repository and styling

Example: https://www.northwind365.com/people

6. Customize Profiles

See People wiki:

7. Add new profiles using GitHub Action (Optional)

Postman configuration for GitHub Dispatch trigger Figure: Postman configuration for GitHub Dispatch trigger

  1. Set the POST URL https://api.github.com/repos/_Your_GITHUB_ACCOUNT_/Northwind.People/dispatches
  2. Add the additional headers
Accept = application/vnd.github.everest-preview+json
Authorization = token <GitHubToken>
  1. Ensure the original Accept header is disabled. JSON payload required for the automated profile generation Figure: JSON payload required for the automated profile generation
  2. Create the payload for the new profile
  3. Send the post request to GitHub

8. Trigger a build when modifying a profile (markdown)

  1. Create a new secret on your Northwind.People fork called ACCESS_TOKEN.
    The value of this secret will be your GitHub username and Personal Access Token for example username:access_token.
    This will be used to allow dispatch commands to be sent to your SSW.People fork.

  2. Update the build and deployment workflow on your SSW.People fork.
    Add the following code snippet to the on trigger of your existing build and deploy workflow.

  repository_dispatch:
    types: [build_and_deploy]

Your on trigger will now look something like this.

on:
  repository_dispatch:
    types: [build_and_deploy]
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

If there is a filter on the events that allow the build to run, you will need to add the following.

github.event.action == 'build_and_deploy' ||

Here is an example of it with the Azure Static Web App build and deploy workflow.

jobs:
  build_and_deploy_job:
    if: github.event.action == 'build_and_deploy' || github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
  1. Create the trigger workflow on the Northwind.People fork.
    Create a new workflow with the following code, replacing <USERNAME> with your GitHub username.
name: Trigger CI/CD when updating the repository 

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - name: Run a multi-line script
      run: |
          curl -X POST https://api.github.com/repos/<USERNAME>/SSW.People/dispatches \
          -H 'Accept: application/vnd.github.everest-preview+json' \
          -u ${{ secrets.ACCESS_TOKEN }} \
          --data '{"event_type": "build_and_deploy", "client_payload": { "repository": "'"$GITHUB_REPOSITORY"'" }}'
  1. Edit a file on the Northwind.People fork.
    To test everything works, update a file on your Northwind.People fork.
    Once the change has been pushed to your forks main branch, the workflow should run and generate a build on your SSW.People fork.

If you need help to adapt SSW.People to your need (data source, design, new widgets for the profile page), contact SSW

Index

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

Clone this wiki locally