Initial commit

.github/dependabot.yml

@@ -0,0 +1,6 @@
+version: 2
+updates:
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "monthly"

.github/script/initialize-repository.sh

@@ -0,0 +1,45 @@
+#!/usr/bin/env bash
+# Make sure this file is executable
+# chmod a+x .github/script/initialize-repository.sh
+
+# USAGE: This should only be run once upon initial creation of the
+# learner's repository from the template repository. 
+# Does a dry run by default, --dry-run=false to run live.
+
+# PURPOSE: This script establishes an initial related history for 
+# all branches. It merges main into all other branches in this repository 
+# while auto-resolving conflicts in favor of main.
+
+# BACKGROUND: This operation is required because when a repository is 
+# created from a template repository with 'Include all branches', each 
+# of the branches starts with only one initial commit and no related history.
+#
+# That state makes it impossible to create pull requests from the 
+# step-specific branches into main as the learner progresses
+# through the course.
+
+# Setup committer identity
+git config user.name github-actions[bot]
+git config user.email github-actions[bot]@users.noreply.github.com
+
+# Fetch all remote branches
+git pull --all
+
+# Create list of all remote branches
+branches=$(git branch -r | grep -v main | sed -r 's/origin\///g' | paste -s -d ' ' -)
+
+# Merge main into each branch
+echo -e "Merge main into each branch\n---"
+for branch in $branches
+do
+    # Dry run by default
+    if [[ $1 = '--dry-run=false' ]]
+    then
+        git checkout "$branch"
+        git pull origin main --no-rebase -X theirs --allow-unrelated-histories --no-edit
+        git push origin "$branch"
+        echo "---"
+    else
+        echo "plan: merge main into $branch"
+    fi
+done

.github/steps/-step.txt

@@ -0,0 +1 @@
+0

.github/steps/0-welcome.md

@@ -0,0 +1 @@
+<!-- readme -->

.github/steps/1-configure-label-based-job.md

@@ -0,0 +1,58 @@
+<!--
+  <<< Author notes: Step 1 >>>
+  Choose 3-5 steps for your course.
+  The first step is always the hardest, so pick something easy!
+  Link to docs.github.com for further explanations.
+  Encourage users to open new tabs for steps!
+-->
+
+## Step 1: Trigger a job based on labels
+
+_Welcome to the course :tada:_
+
+![Screen Shot 2022-06-07 at 4 01 43 PM](https://user-images.githubusercontent.com/6351798/172490466-00f27580-8906-471f-ae83-ef3b6370df7d.png)
+
+A lot of things go into delivering "continuously". These things can range from culture and behavior to specific automation. In this exercise, we're going to focus on the deployment part of our automation.
+
+In a GitHub Actions workflow, the `on` step defines what causes the workflow to run. In this case, we want the workflow to run different tasks when specific labels are applied to a pull request.
+
+We'll use labels as triggers for multiple tasks:
+
+- When someone applies a "spin up environment" label to a pull request, that'll tell GitHub Actions that we'd like to set up our resources on an Azure environment.
+- When someone applies a "stage" label to a pull request, that'll be our indicator that we'd like to deploy our application to a staging environment.
+- When someone applies a "destroy environment" label to a pull request, we'll tear down any resources that are running on our Azure account.
+
+### :keyboard: Activity 1: Configure `GITHUB_TOKEN` permissions
+
+At the start of each workflow run, GitHub automatically creates a unique `GITHUB_TOKEN` secret to use in your workflow. We need to make sure this token has the permissions required for this course.
+
+1. Open a new browser tab, and work on the steps in your second tab while you read the instructions in this tab.
+1. Go to Settings > Actions > General. Ensure that the `GITHUB_TOKEN` also has **Read and write permissions** enabled under **Workflow permissions**. This is required for your workflow to be able to upload your image to the container registry.
+
+### :keyboard: Activity 2: Configure a trigger based on labels
+
+For now, we'll focus on staging. We'll spin up and destroy our environment in a later step.
+
+1. Go to the **Actions** tab.
+1. Click **New workflow**
+1. Search for "simple workflow" and click **Configure**
+1. Name your workflow `deploy-staging.yml`
+1. Edit the contents of this file and remove all triggers and jobs.
+1. Edit the contents of the file to add a conditional that filters the `build` job when there is a label present called **stage**. Your resulting file should look like this:
+   ```yaml
+   name: Stage the app
+
+   on:
+     pull_request:
+       types: [labeled]
+
+   jobs:
+     build:
+       runs-on: ubuntu-latest
+
+       if: contains(github.event.pull_request.labels.*.name, 'stage')
+   ```
+1. Click **Start commit**, and choose to make a new branch named `staging-workflow`.
+1. Click **Propose changes**.
+1. Click **Create pull request**.
+1. Wait about 20 seconds then refresh this page (the one you're following instructions from). [GitHub Actions](https://docs.github.com/en/actions) will automatically update to the next step.

.github/steps/2-setup-azure-environment.md

@@ -0,0 +1,174 @@
+<!--
+  <<< Author notes: Step 2 >>>
+  Start this step by acknowledging the previous step.
+  Define terms and link to docs.github.com.
+-->
+
+## Step 2: Set up an Azure environment
+
+_Good job getting started :gear:_
+
+### Nice work triggering a job on specific labels
+
+We won't be going into detail on the steps of this workflow, but it would be a good idea to become familiar with the actions we're using. They are:
+
+- [`actions/checkout`](https://github.com/actions/checkout)
+- [`actions/upload-artifact`](https://github.com/actions/upload-artifact)
+- [`actions/download-artifact`](https://github.com/actions/download-artifact)
+- [`docker/login-action`](https://github.com/docker/login-action)
+- [`docker/build-push-action`](https://github.com/docker/build-push-action)
+- [`azure/login`](https://github.com/Azure/login)
+- [`azure/webapps-deploy`](https://github.com/Azure/webapps-deploy)
+
+### :keyboard: Activity 1: Store your credentials in GitHub secrets and finish setting up your workflow
+
+1.  In a new tab, [create an Azure account](https://azure.microsoft.com/en-us/free/) if you don't already have one. If your Azure account is created through work, you may encounter issues accessing the necessary resources -- we recommend creating a new account for personal use and for this course.
+    > **Note**: You may need a credit card to create an Azure account. If you're a student, you may also be able to take advantage of the [Student Developer Pack](https://education.github.com/pack) for access to Azure. If you'd like to continue with the course without an Azure account, Skills will still respond, but none of the deployments will work.
+1.  Create a [new subscription](https://docs.microsoft.com/en-us/azure/cost-management-billing/manage/create-subscription) in the Azure Portal.
+    > **Note**: your subscription must be configured "Pay as you go" which will require you to enter billing information. This course will only use a few minutes from your free plan, but Azure requires the billing information.
+1.  Install [Azure CLI](https://docs.microsoft.com/en-us/cli/azure/install-azure-cli?view=azure-cli-latest) on your machine.
+1.  In your terminal, run:
+    ```shell
+    az login
+    ```
+1.  Select the subscription you just selected from the interactive authentication prompt. Copy the value of the subscription ID to a safe place. We'll call this `AZURE_SUBSCRIPTION_ID`. Here's an example of what it looks like:
+    ```shell
+    No     Subscription name    Subscription ID                       Tenant
+    -----  -------------------  ------------------------------------  -----------------
+    [1] *  some-subscription    f****a09-****-4d1c-98**-f**********c  Default Directory
+    ```
+1.  In your terminal, run the command below.
+
+    ```shell
+    az ad sp create-for-rbac --name "GitHub-Actions" --role contributor \
+     --scopes /subscriptions/{subscription-id} \
+     --sdk-auth
+
+        # Replace {subscription-id} with the same id stored in AZURE_SUBSCRIPTION_ID.
+    ```
+
+    > **Note**: The `\` character works as a line break on Unix based systems. If you are on a Windows based system the `\` character will cause this command to fail. Place this command on a single line if you are using Windows.
+
+1.  Copy the entire contents of the command's response, we'll call this `AZURE_CREDENTIALS`. Here's an example of what it looks like:
+    ```shell
+    {
+      "clientId": "<GUID>",
+      "clientSecret": "<GUID>",
+      "subscriptionId": "<GUID>",
+      "tenantId": "<GUID>",
+      (...)
+    }
+    ```
+1.  Back on GitHub, click on this repository's **Secrets and variables > Actions** in the Settings tab.
+1.  Click **New repository secret**
+1.  Name your new secret **AZURE_SUBSCRIPTION_ID** and paste the value from the `id:` field in the first command.
+1.  Click **Add secret**.
+1.  Click **New repository secret** again.
+1.  Name the second secret **AZURE_CREDENTIALS** and paste the entire contents from the second terminal command you entered.
+1.  Click **Add secret**
+1.  Go back to the Pull requests tab and in your pull request go to the **Files Changed** tab. Find and then edit the `.github/workflows/deploy-staging.yml` file to use some new actions. The full workflow file, should look like this:
+    ```yaml
+    name: Deploy to staging
+
+    on:
+      pull_request:
+        types: [labeled]
+
+    env:
+      IMAGE_REGISTRY_URL: ghcr.io
+      ###############################################
+      ### Replace <username> with GitHub username ###
+      ###############################################
+      DOCKER_IMAGE_NAME: <username>-azure-ttt
+      AZURE_WEBAPP_NAME: <username>-ttt-app
+      ###############################################
+
+    jobs:
+      build:
+        if: contains(github.event.pull_request.labels.*.name, 'stage')
+
+        runs-on: ubuntu-latest
+
+        steps:
+          - uses: actions/checkout@v4
+          - uses: actions/setup-node@v4
+            with:
+              node-version: 16
+          - name: npm install and build webpack
+            run: |
+              npm install
+              npm run build
+          - uses: actions/upload-artifact@v4
+            with:
+              name: webpack artifacts
+              path: public/
+
+      Build-Docker-Image:
+        runs-on: ubuntu-latest
+        needs: build
+        name: Build image and store in GitHub Container Registry
+        steps:
+          - name: Checkout
+            uses: actions/checkout@v4
+
+          - name: Download built artifact
+            uses: actions/download-artifact@v4
+            with:
+              name: webpack artifacts
+              path: public
+
+          - name: Log in to GHCR
+            uses: docker/login-action@v3
+            with:
+              registry: ${{ env.IMAGE_REGISTRY_URL }}
+              username: ${{ github.actor }}
+              password: ${{ secrets.CR_PAT }}
+
+          - name: Extract metadata (tags, labels) for Docker
+            id: meta
+            uses: docker/metadata-action@v5
+            with:
+              images: ${{env.IMAGE_REGISTRY_URL}}/${{ github.repository }}/${{env.DOCKER_IMAGE_NAME}}
+              tags: |
+                type=sha,format=long,prefix=
+
+          - name: Build and push Docker image
+            uses: docker/build-push-action@v5
+            with:
+              context: .
+              push: true
+              tags: ${{ steps.meta.outputs.tags }}
+              labels: ${{ steps.meta.outputs.labels }}
+
+      Deploy-to-Azure:
+        runs-on: ubuntu-latest
+        needs: Build-Docker-Image
+        name: Deploy app container to Azure
+        steps:
+          - name: "Login via Azure CLI"
+            uses: azure/login@v2
+            with:
+              creds: ${{ secrets.AZURE_CREDENTIALS }}
+
+          - uses: azure/docker-login@v1
+            with:
+              login-server: ${{env.IMAGE_REGISTRY_URL}}
+              username: ${{ github.actor }}
+              password: ${{ secrets.CR_PAT }}
+
+          - name: Deploy web app container
+            uses: azure/webapps-deploy@v3
+            with:
+              app-name: ${{env.AZURE_WEBAPP_NAME}}
+              images: ${{env.IMAGE_REGISTRY_URL}}/${{ github.repository }}/${{env.DOCKER_IMAGE_NAME}}:${{ github.sha }}
+
+          - name: Azure logout via Azure CLI
+            uses: azure/CLI@v2
+            with:
+              inlineScript: |
+                az logout
+                az cache purge
+                az account clear
+    ```
+1. After you've edited the file, click **Commit changes...** and commit to the `staging-workflow` branch.
+1. Wait about 20 seconds then refresh this page (the one you're following instructions from). [GitHub Actions](https://docs.github.com/en/actions) will automatically update to the next step.