11-deploy-to-an-environment.md

Lab 11: Deploy to an Environment

In this lab, you will use pull request comments to trigger deployments to your GitHub Pages environment. This lets you temporarily deploy a branch to GitHub Pages to preview changes before merging the pull request.

Scenario

By the time you are working on this lab, you should have a fully-functional game deployed to GitHub pages. You should also have a workflow that deploys the game to a GitHub Pages environment when a pull request is merged.

However, how can you preview changes before they are merged? What if you need to quickly roll a change back? This is where repository environments come into play. By specifying the environment property in a workflow, you can trigger deployments that are marked as successful/failed based on the result of the workflow run. Combining this with the ability to trigger workflows using pull request comments, you can create a workflow that deploys a branch to an environment when a comment is made on a pull request (often referred to as IssueOps).

Task 1: Create a Feature Branch

1. Ensure you are on the main branch

   git checkout main

2. Create a new feature branch

   git checkout -b feature/high-score

3. Open the src/local_storage_manager.ts file

4. Locate the comment // Lab 11: Update Best Score

5. Add the following code below the comment

   LocalStorageManager.storage.setItem('bestScore', score.toString())

6. Save the file

7. Commit the changes

   git add .
   git commit -m 'Save best score to local storage'

8. Push the changes to GitHub

   git push

Task 2: Open a Pull Request

1. In your browser, navigate to your repository on GitHub
2. Click on the Pull requests tab
3. Click the New pull request button
4. Click the Compare button, then select your feature/high-score branch
5. Click Create pull request
6. Enter a title and description for your PR
7. Click Create pull request

Task 3: Deploy to the github-pages Environment

1. In the pull request, navigate to the Add a comment section

2. In the comment text field, enter .deploy

   In a few seconds, you should see a comment is automatically to the pull request stating a deployment is in progress. You should also see that a deployment has been initiated.

   

3. Wait for the deployment to complete

   Another comment will be added to the pull request with a link to the deployment.

   

4. Click the link to view the deployed game

   As you play the game, your high score should now be saved in the BEST box.

   

Task 4: Roll Back the Deployment

In this scenario, we only have one environment, so we can only have one active version of the game at a time. For now, lets roll back the changes until the PR is merged.

1. In the pull request, navigate to the Add a comment section

2. In the comment text field, enter .deploy main

   In a few seconds, you should see a comment is automatically to the pull request stating a deployment is in progress. You should also see that a deployment has been initiated.

   

3. Wait for the deployment to complete

   Another comment will be added to the pull request with a link to the rollback deployment.

   

4. Click the link to view the deployed game

   As you play the game, your high score should no longer be saved.

Task 5: (Optional) Review a Pull Request

Feel free to follow the below steps to request and review each other's PRs.

1. Copy the URL of your PR and paste it into the meeting chat

2. Click on another PR link in the meeting chat

3. Click on the Files changed tab

4. Click the Review changes button

5. Enter a comment

6. Ensure Approve is selected as the review type

7. Click Submit review

   

Task 6: (Optional) Merge the Pull Request

Once your PR has been approved, you can merge it into main.

1. Click the Merge pull request button
2. Click Confirm merge
3. Click Delete branch

After 1-2 minutes, the changes will be deployed automatically to GitHub Pages!

Need Help?

If you're having trouble with any of the steps, you can ask for help in the meeting chat.