Deploying Theme Designer

Owned by Danny Gibas
Last updated: Jul 12, 2024
2 min read

Theme Designers CI/CD pipeline is a bit different than our other pipelines because is uses an Azure Static Web app to expose the built application source to the Browser.

Starting a Build

A build will kick off in ADO whenever you take any of these actions so long as less than 10 preview environments already exist (see troubleshooting).

  1. Creating a PR to merge your fix/feature branch into the develop branch

  2. Creating a PR to merge Develop branch into the Main branch

  3. Updating the code in an open PR

After taking one of the above actions, view your build here:

https://dev.azure.com/awdenver/Aspenware Commerce/_build?definitionId=463&_a=summary

Deploying to the Azure Static Web App

Build pipelines should handle deploying builds to the Static Web App automatically, per the following rules.

  1. New PRs that are created against the Develop branch will launch a new Preview Environment for the branch as soon as the build completes.

  2. Promoting the Develop branch to Main will deploy Main into the existing Production Static Web App as soon as the merge and build completes.

  3. Updated PRs will deploy into the related existing Preview Environment as soon as the updated build completes.

Verifying and Viewing Static Web App Environments

  1. Use the following link to verify an Azure Static Web App preview or production environment has been created or updated for your PR:
    https://portal.azure.com/#@aspenware.com/resource/subscriptions/34c7ba34-f99c-4fc6-ad3b-2c242a94701a/resourceGroups/aw-cus-theme-dev-rg/providers/Microsoft.Web/staticSites/aw-cus-theme-dev-static/environments

  2. To view the environment, click the browse link for that environment.

  3. To get the script link to use in the Theme Designer userscript for TamperMonkey, click the browse link and add /index.js to the URL. That is the URL that you will insert into the Theme Designer Userscript to test that fix branch. Screenshot illustrates where to update this link in the UserScript for testing.

    1. Note that the Production App url on the environments page is mapped to https://themedesignerdev.aspenware.net. So for the @require URL in the Theme Designer UserScript for the Production app, use: https://themedesignerdev.aspenware.net/index.js

  4. If you are not seeing your changes show up in the TD App, the old script might be cached.

    1. Append ?v=1.4.1 to the link in the UserScript where 1.4.1 is the version number for your fix version and then restart the browser to force the cache to update.

Troubleshooting

My build completes, but I am not seeing a Preview Environment getting created

  1. Rerun your build https://dev.azure.com/awdenver/Aspenware Commerce/_build?definitionId=463&_a=summary and watch to see if that spins up an environment.

  2. There is a maximum of 10 Preview environments allowed at one time. Remove some older Preview environments and rerun your build.

Â