A few additional steps are needed to finish the deployment.
-
In the Azure Portal, open the App service you just deployed.
-
Open the Deployment slots drawer
-
Click on
Add Slot
-
Enter the name
Staging
and select to clone the settings from the production slot. -
Click on
Add
. -
Click on the newly created Staging slot. Then, in the Staging slot, click on Deployment Center.
-
Select
External
as the source for continuous deployment. Then click onContinue
. -
Select
App Service build service
and click onContinue
. -
Under Repository, enter
https://github.com/lbugnion/TailwindTraders-Website
. -
Under Branch, enter
Typos
. -
Select
Git
Repository type. -
Select
No
for Private repository. -
Click on
Continue
. -
Click on
Finish
. -
Wait until the build is finished.
-
Click on Overview in the App Service.
-
Click on the URL to open the website in a new window.
You should now see the Tailwind Traders website, but there are some typos in the navigation menu, for example Applyances
and Sinq
.
If you don't see the navigation menu, zoom the web brower window out a little to see more elements in the width.
-
In the Azure Portal, open the App service you just deployed.
-
Open the Deployment slots drawer
-
Click on
Add Slot
-
Enter the name
AbTest
and select to clone the settings from the production slot. -
Click on
Add
. -
Click on the newly created AbTest slot. Then, in the AbTest slot, click on Deployment Center.
-
Select
External
as the source for continuous deployment. Then click onContinue
. -
Select
App Service build service
and click onContinue
. -
Under Repository, enter
https://github.com/lbugnion/TailwindTraders-Website
. -
Under Branch, enter
AbColor
. -
Select
Git
Repository type. -
Select
No
for Private repository. -
Click on
Continue
. -
Click on
Finish
. -
Wait until the build is finished.
-
Click on Overview in the App Service.
-
Click on the URL to open the website in a new window.
You should now see the Tailwind Traders website, but the main color has been changed to red for the demo.
Use your favorite link shortener to create a short link pointing to the Tailwind Traders website (Production slot). Later, we can use this to ask the audience to navigate to the site, and test the A/B testing slot.
To illustrate the A/B testing functionality, we'll need to open the same website in various web browsers, and we should get the new feature shown randomly. To do that, you'll need to have multiple web browsers. For more security and making sure that the new feature is shown, you should install 3 or 4 different browsers. For example, you can install Edge Dev, Edge Canary, Edge Beta.
Every time before you start the demos, you will need to execute a few simple steps to make sure that the environment is ready. These steps are described here in details. Have fun!!