Exercise: Host a web app with Azure Container Instance

Natasha Ong
This is some text inside of a div block.
4 min read

EXAMPLES

  • Deploy an app to a container using Azure Container Instance
  • 5/10 activity
  • Again nice and easy, super short
  • Not too sure what I actually did here tbh - a recap at the end would've helped, + overarching narrative while we're doing the steps (i.e. "now we're going to do x, because the outcome of this is y")

Build your web app using App Services and Containers

Do you ever wonder how a website is functioning? In modern IT solutions, these are hosted via cloud (e.g. Deployed using Azure). Now, you will have a chance to create your first static web app, if this is your first time dealing with this.

Remember: Azure Static Web Apps is an Azure service that publishes a website to a production environment by building apps from an Azure DevOps or GitHub repository. In this exercise, you can deploy a web application to Azure Static Web apps using the Azure portal.

Task 1: Create a Repository

Let's first create a repository using Azure DevOps. The repository features a starter app used to deploy using Azure Static Web Apps.

  1. Sign in to Azure DevOps.
  2. Select New repository.
  3. In the Create new project window, expand Advanced menu and make the following selections:

5. Select Create.

6. Select the Repos menu item.

7. Select the Files menu item.

8. Under the Import repository card, select Import.

9. Copy a repository URL for the framework of your choice, and paste it into the Clone URL box. https://github.com/staticwebdev/vanilla-basic.git

10. Select Import and wait for the import process to complete.

Please take note of the branch name as this info will be later used in the next task.

Task 2: Create a static web app

Now that the repository is created, you can create a static web app from the Azure portal.

  1. Go to the Azure portal.
  2. Select Create a Resource.
  3. Search for Static Web Apps.
  4. Select Static Web Apps.
  5. Select Create.

In the Basics section, begin by configuring your new app and linking it to an Azure DevOps repository.

In the Build Details section, add configuration details specific to your preferred front-end framework.

  1. Select Custom from the Build Presets dropdown.
  2. Type ./src in the App location box.
  3. Leave the Api location box empty.
  4. Type ./src App artifact location box.

Select Review + create.

Review and create your Azure Static Web Apps instance.

Select Create.

Create your Azure Static Web Apps instance.

Select Go to resource.

Proceed to go to the newly created resource.

Task 3: View the deployed website