(Accompanies associated blog post on Katie Kodes)
- Under the "Use this template dropdown at the top-right of the original repository hosting this tutorial, click "Create a new repository" and go through the steps to make your own repository based off of this one.
(Note: There's a good chance that if you go into the Actions tab of your new respository, you'll see a failed run of "Azure Static Web Apps CI/CD" where the "Build and Deploy Job" failed because "deployment_token provided was invalid.
" That's okay -- you'll get one soon.) - Go into your new repository's Settings tab and then to Secrets and Variables -> Actions in the left-nav.
- Add a Repository secret named
MY_AZURE_SWA_DEPLOYMENT_TOKEN
and put the phrase "hello
" in as its value, for now, just so you don't forget you're going to need it.
- Log into A Cloud Guru and click on the Playground icon in the top-nav.
- Under Azure Sandbox, click the Start Azure Sandbox buton.
- Fire up PowerShell (you need to have the
Az
modules installed and be on version 7) and run:Connect-AzAccount -UseDeviceAuthentication
- Open a brand new incognito/private web browser tab in a browser you don't already have incognito/private sessions open in and use it to visit https://microsoft.com/devicelogin.
- When prompted "Enter the code displayed on your app or device," enter the code where
XXXXXX
would be from waiting PowerShell hint reading "WARNING: To sign in, use a web browser to open the page https://microsoft.com/devicelogin and enter the code XXXXXX to authenticate." Click Next. - Copy the Username from A Cloud Guru's Azure Sandbox info onto your clipboard.
- Paste that username into the "Email, phone, or Skype" prompt under "Sign in: You're signing in to Microsoft Azure PowerShell on another device located in United States. If it's not you, close this page" back in your incognito/private web browser tab and click Next.
- Copy the Password from A Cloud Guru's Azure Sandbox info onto your clipboard.
- Paste that username into the "Password" prompt ack in your incognito/private web browser tab and click Sign in.
- When asked, in your incognito/private web browser tab, "Are you trying to sign in to Microsoft Azure PowerShell? Only continue if you downloaded the app from a store or website that you trust," click Continue.
- You can leave this session open for a few minutes from now. Or if you're a neat freak, feel free to close your incognito/private web browser session when you see the message "Microsoft Azure PowerShell: You have signed in to the Microsoft Azure PowerShell application on your device. You may now close this window."
- Back in PowerShell, validate that your PowerShell session is really logged into A Cloud Guru's version of Azure with the following command (you should see the phrase "Hands-On Labs" as part of the displayed Name property when you run it):
Get-AzContext
- In PowerShell, create a new Static Web App resource inside of your temporary Azure environment from A Cloud Guru (it'll last about 6 hours) by running the following 3 commands:
$my_resource_group_name = (Get-AzResourceGroup).ResourceGroupName $my_swa_name = 'my-first-swa' $my_static_web_app = New-AzStaticWebApp -ResourceGroupName $my_resource_group_name -Name $my_swa_name -Location 'Central US' -SkuName 'Standard' -RepositoryUrl $null
- When it is done, run the following command in PowerShell to open a web browser to the URL where your "production" Static Web App will soon live. (You can close the tab it opens once you see this web page -- you'll revisit it again later.) It should say, "Your Azure Static Web App is live and waiting for your content":
start ("https://$($my_static_web_app.defaultHostname)/")
- Copy the point-and-click URL for managing your Static Web App onto your Windows clipboard by running the following PowerShell command:
Set-Clipboard -Value "https://portal.azure.com/#@azurelabs.linuxacademy.com/resource/subscriptions/$((Get-AzSubscription).Id)/resourceGroups/$($my_resource_group_name)/providers/Microsoft.Web/staticSites/$($my_swa_name)/staticsite"
- Open a brand new incognito/private web browser session if you closed the old one. If you didn't go back to the old one's tab saying you could close the browser. Into the URL bar, paste the URL that PowerShell just copied onto your clipboard and visit it.
- If you closed and reopened, you'll have to re-copy-and-paste the Username and Password out of A Cloud Guru's Azure Sandbox info again, of course, to get logged back into Azure in your web browser.
- Once you're viewing the management portal for the Azure Static Web App resource you created, click its Manage deployment token tab toward the top.
- In the panel that flies out from the right-hand side of the screen, copy the value from Deployment token onto your clipboard.
- Back in the GitHub repository you made as a copy of this one, go into your new repository's Settings tab and then to Secrets and Variables -> Actions in the left-nav. Edit the Repository secret named
MY_AZURE_SWA_DEPLOYMENT_TOKEN
(it's a pencil icon with hover-text of "Update secret") and paste your Static Web App's deployment token from your clipboard into the Value box. Click Update secret.
- Validate that running the "Azure Static Web Apps CI/CD" GitHub Action included in this codebase can push a website onto your new Static Web App by going into your repository's Actions tab, clicking "Azure Static Web Apps CI/CD" in the left-nav, dropping down the "Run workflow" picklist toward the right, and clicking the "Run workflow" button (leaving the branch set to `main).
- Reload the Actions summary page to see the progress of your manual run. When it says it's done successfully, back in PowerShell, visit your live website one more time by running this command, admiring that now it has a big
<h1>
tag greeting you with the words "Hello World":start ("https://$($my_static_web_app.defaultHostname)/")
Play with your new website codebase. Here are some ideas:
- Update
/src/web/index.html
in yourmain
branch to say "Later, Friends" instead of "Hello World." - Note that doing so will fire off a GitHub Action (you can see its progress in your repository's Actions tab).
- When that Action is finished running, opening the "
https://something.somenumber.azurestaticapps.net/
website thatstart ("https://$($my_static_web_app.defaultHostname)/")
brings up for you now shows a big<h1>
tag greeting you with the words "Later, Friends".
- Create a new branch off of
main
calledjust-testing
. - Update
/src/web/index.html
in thatjust-testing
branch to say "Hello, Goodbye" between the H1 tags. - Create a Pull Request from
just-testing
back intomain
. - Note that doing so will fire off a GitHub Action and when that Action is finished, you can see that the "
https://something.somenumber.azurestaticapps.net/
website thatstart ("https://$($my_static_web_app.defaultHostname)/")
brings up for you still shows the greeting contained in yourmain
branch. - However, there's now a URL in a comment from the
github-actions
bot saying, "Azure Static Web Apps: Your stage site is ready! Visit it here:https://something-yourpullrequestnumber.yourazureregion.somenumber.azurestaticapps.net
" inside your pull request's detail page above the validation box noting that "Azure Static Web Apps CI/CD / Build and Deploy Job (pull_request)" was successful. - Go ahead and visit that URL from the comment.
- The preview URL should show a big
<h1>
tag greeting you with the words "Hello, Goodbye" even while your primary URL stays in sync with what's on themain
branch.
- Go ahead and merge your
just-testing
branch into main and close the pull request. - You should see 2 more Actions fire up for your repository.
- One is against
main
and is running the "Build and Deploy Job" part of this repository's GitHub Action (but skipping "Close Pull Request Job"). - Another is against
just-testing
and is running the "Close Pull Request Job" part of this repository's GitHub Action (but skipping "Build and Deploy Job"). - If you go back and visit the old pull request's URL, that
https://something-yourpullrequestnumber.yourazureregion.somenumber.azurestaticapps.net
preview URL from the comment, when clicked, should have disappeared off the internet and be returning a 404 HTTP error. - Meanwhile, opening the "
https://something.somenumber.azurestaticapps.net/
website thatstart ("https://$($my_static_web_app.defaultHostname)/")
brings up for you now shows a big<h1>
tag greeting you with the words "Hello, Goodbye" since you merged that changed to/src/web/index.html
into yourmain
branch of your repository.
(Note: once all GitHub Actions have finished running, you can delete your just-testing
branch, but personally, I wouldn't do it until the GitHub Actions have safely finished running.)