Skip to content

Goal 3 - Modifying the site

Congratulations on setting up the project for local development! Now that everyone on your team has a copy running locally it’s time to make some modifications to the code.

Because the shelter wants to allow adopters to use the site to manage tasks related to pet adoption, they would like to update the site. They want the header to reflect the purpose of the site, for managing a list of tasks for pet adoption.

The goal

Your team will complete this workshop by making and deploying a modification to the site. The header text needs to be updated to read “Pet Adoption Tasks” and the changes pushed to Azure.

The Azure Service

Azure Static Web Apps uses GitHub Actions to manage deployment. Whenever a pull request (PR) or merge is made into the main branch the action is triggered and a new deployment starts. If code is merged into the branch, the deployment is pushed to the production site; PRs generate a new staging environment.

Application notes

The client files are contained in the public folder. index.html is the HTML used to display the index page on the site.

Success criteria

To successfully complete this goal, your team will:

  • Update the h1 header on the index page to read Pet Adoption Tasks
  • Redeploy the site to Azure Static Web Apps

Tips

A good habit to get into when modifying code is to create a new branch, make modifications, create a PR into the main branch, and then merge. However, for this workshop you can push straight to main.

Resources

Your team might find these resources helpful:

Validation

To validate your team’s work with the automated tool, re-enter the URL on Azure Static Web Apps into the tool.

Congratulations

Congratulations on successfully completing the workshop! Your team now has a template and deployment model to use for creating a website. If you wish to continue to explore Azure Static Web Apps:

Back to top