Customizing, Re branding and Deploying SSW.People
-
SSW People:
- https://ssw.com.au/people
- Profiles repository: https://github.com/SSWConsulting/SSW.People.Profiles
- Code repository: https://github.com/SSWConsulting/SSW.People
-
Northwind:
- https://www.northwind365.com/people
- Profiles repository: https://github.com/SSWConsulting/Northwind.People
Requirements:
- A GitHub account
- An Azure account
First, you will need to fork the sample profiles repository: https://github.com/SSWConsulting/Northwind.People
-
Click on the fork button
Figure: Click on the fork button -
Choose your GitHub Account
Figure: Choose the GitHub account where you want to fork -
Your fork is created
Figure: Your fork has been created
You will need to fork this repository: https://github.com/SSWConsulting/SSW.People
-
Choose the GitHubAccount
Figure: Choose the GitHub account where you want to fork -
Fork is being created
Figure: Fork will then be created on your GitHub account -
Update the site-config.js and change the value of 'profilesRepo' with the URL of your own fork (Step 1)
Figure: SSW People using the Northwind profile repository
-
Open your Azure account and search for Static Web Apps, click on it.
Figure: Search for Static Web Apps -
Click on the Add button
Figure: Click on Add -
Choose your Resource Group and choose a name and a region for your Web App then click Sign in with GitHub
Figure: Choose where to deploy your app -
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’
Figure: Select your GitHub repo -
Delete the Api location, and set ’App artifact location’ to ’public’ then click ’Click Review + create’
Figure: Setup the build variables -
Review then ‘Click Create’
Figure: Review the details -
Your Static Web App has been created
Figure: Overview of your app -
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)
Figure: New workflow created
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.Profiles/main/northwind.json”
SOPHIE_AUTHORIZATION = FALSE
SOPHIE_TENANT = “None”
YOUTUBE_API_KEY = “None”-
Go to Settings - Secrets then click on the 'New secrets'
Figure: Add new secret -
Once you created all the secrets, you need to modify the YAML file created by Azure in the folder /.github/workflows
Figure: Find your workflow YAML file -
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 }}- 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
Figure: Congratulations! SSW.People is now deployed using the Northwind profile repository