Skip to content

Latest commit

 

History

History
110 lines (67 loc) · 3.66 KB

deploy-vue.md

File metadata and controls

110 lines (67 loc) · 3.66 KB
Raw
title description services author ms.service ms.topic ms.date ms.author zone_pivot_groups
Deploy a Vue app on Azure Static Web Apps
Learn to deploy a Vue app to Azure Static Web Apps with the Azure portal.
static-web-apps
craigshoemaker
static-web-apps
how-to
08/02/2023
cshoe
devops-or-github

Deploy a Vue app in Azure Static Web Apps

In this article, you learn to deploy a Vue application to Azure Static Web Apps using the Azure portal.

Prerequisites

[!INCLUDE prerequisites]

Create a repository

::: zone pivot="github"

This article uses a GitHub template repository to make it easy for you to get started. The template features a starter app to deploy to Azure Static Web Apps.

  1. Navigate to the following location to create a new repository:

    https://github.com/staticwebdev/vue-basic/generate

  2. Name your repository my-first-static-web-app

  3. Select Create repository from template.

    :::image type="content" source="media/getting-started/create-template.png" alt-text="Screenshot of create repository from template button.":::

::: zone-end

::: zone pivot="azure-devops"

This article uses an Azure DevOps repository to make it easy for you to get started. 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:

    Setting Value
    Project Enter my-first-web-static-app.
    Visibility Select Private.
    Version control Select Git.
    Work item process Select the option that best suits your development methods.

  4. Select Create.

  5. Select the Repos menu item.

  6. Select the Files menu item.

  7. Under the Import repository card, select Import.

  8. Copy a repository URL for the framework of your choice, and paste it into the Clone URL box.

    https://github.com/staticwebdev/vue-basic.git

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

::: zone-end

Create a static web app

[!INCLUDE create steps]

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

  1. Select Vue.js from the Build Presets dropdown.

  2. Keep the default value in the App location box.

  3. Leave the Api location box empty.

  4. Keep the default value in the App artifact location box.

Select Review + create.

:::image type="content" source="media/getting-started-portal/review-create.png" alt-text="Screenshot of the create button.":::

::: zone pivot="github"

Note

You can edit the workflow file to change these values after you create the app.

::: zone-end

Select Create.

:::image type="content" source="media/getting-started-portal/create-button.png" alt-text="Screenshot of create button.":::

Select Go to resource.

:::image type="content" source="media/getting-started-portal/resource-button.png" alt-text="Screenshot of the go to resource button.":::

View the website

[!INCLUDE view website]

Clean up resources

[!INCLUDE clean up]

Next steps

[!div class="nextstepaction"] Add an API to your application