Implement Application¶

With our workflows already in place, let us build a simple application for deployment.

Create a new branch¶

As we are introducing a new feature into the project, we will begin work from an isolated feature branch. You may either do this through the Command Palette (Cmd+Shift+P and key in Git: Create Branch) or from the terminal.

git checkout -b feature-app-script

It will automatically switch to the new branch.

Implement app/main.mjs¶

import confetti from "canvas-confetti";

document.getElementById("name").textContent = eval(
    `"${new URL(window.location.href).searchParams.get("name")}"`
);

const burstConfetti = confetti.bind(null, {
    particleCount: 250,
    spread: 360,
    origin: { x: 0.5, y: 0.5 },
    disableForReducedMotion: true,
});

burstConfetti();
const intervalID = setInterval(
    () => requestAnimationFrame(burstConfetti),
    1500
);
setTimeout(() => clearInterval(intervalID), 6000);

Publish your changes¶

After you have made your changes, you need to publish your branch. This can be done by running following commands in your terminal:

git add .
git commit -m "Implement app script"
git push --set-upstream origin feature-app-script

Now that we have published our changes to a new branch, we have to create a Pull Request (PR) in order to start the process of our deployment.

Create a pull request¶

A Pull Request (PR) is a way to tell others about the changes you've pushed to a branch in a repository on GitHub. Once a PR is opened, you can discuss and review the potential changes with collaborators and add follow-up commits before your changes are merged into the base branch. There are several ways to create a PR, but we will use the GitHub CLI for this.

Run following command in your terminal to create a new PR:

gh pr create --fill --base main --head feature-app-script

Use Copilot Autofix to resolve vulnerability¶

GitHub Advanced Security should have surfaced a vulnerability in out implementation. Take advantage of Copilot Autofix to resolve the issue and then merge the pull request.

Observe the workflows that were triggered by the merge.¶

Merging will trigger

• Versioning
• Release
• Deployment

You may observe respective workflow runs from the "Actions" tab of your repository. It is expected that the deployment will fail at Azure login, and we will address that in the next exercise.