Skip to content

deploy-web-framework.md

Latest commit

 

History

History
184 lines (121 loc) · 5.47 KB

deploy-web-framework.md

File metadata and controls

184 lines (121 loc) · 5.47 KB
title Deploy your web app to Azure Static Web Apps.
description Learn to deploy your web app to Azure Static Web Apps.
services static-web-apps
author cjk7989
ms.service azure-static-web-apps
ms.topic article
ms.date 09/18/2024
ms.author jikunchen
zone_pivot_groups swa-web-framework

Deploy your web app to Azure Static Web Apps

In this article, you create a new web app with the framework of your choice, run it locally, then deploy to Azure Static Web Apps.

Prerequisites

To complete this tutorial, you need:

Resource Description
Azure subscription If you don't have one, you can create an account for free.
Node.js Install version 20.0 or later.
Azure CLI Install version 2.6x or later.

You also need a text editor. For work with Azure, Visual Studio Code is recommended.

You can run the app you create in this article on the platform of your choice including: Linux, macOS, Windows, or Windows Subsystem for Linux.

Create your web app

  1. Open a terminal window.

::: zone pivot="vanilla-js"

  1. Select an appropriate directory for your code, then run the following commands.

    npm create vite@latest swa-vanilla-demo -- --template=vanilla
cd swa-vanilla-demo
npm install
npm run dev

    As you run these commands, the development server prints the URL of your website. Select the link to open it in your default browser.

    Screen shot of the generated vanilla web application.

::: zone-end

::: zone pivot="angular"

  1. Select an appropriate directory for your code, then run the following commands.

    npx --package @angular/cli@latest ng new swa-angular-demo --ssr=false --defaults
cd swa-angular-demo
npm start

    As you run these commands, the development server prints the URL of your website. Select the link to open it in your default browser.

    Screen shot of the generated angular web application.

::: zone-end

::: zone pivot="react"

  1. Select an appropriate directory for your code, then run the following commands.

    npm create vite@latest swa-react-demo -- --template react
cd swa-react-demo
npm install
npm run dev

    As you run these commands, the development server prints the URL of your website. Select the link to open it in your default browser.

    Screen shot of the generated react web application.

::: zone-end

::: zone pivot="vue"

  1. Select an appropriate directory for your code, then run the following commands.

    npm create vite@latest swa-vue-demo -- --template vue
cd swa-vue-demo
npm install
npm run dev

    As you run these commands, the development server prints the URL of your website. Select the link to open it in your default browser.

    Screen shot of the generated Vue web application.

::: zone-end

  1. Select Cmd/Ctrl+C to stop the development server.

[!INCLUDE Create an Azure Static Web App]

[!INCLUDE Build your site for deployment]

::: zone pivot="angular"

Warning

Angular v17 and later place the distributable files in a subdirectory of the output path that you can choose. The SWA CLI doesn't know the specific location of the directory. The following steps show you how to set this path correctly.

Locate the generated index.html file in your project in the dist/swa-angular-demo/browser folder.

  1. Set the SWA_CLI_OUTPUT_LOCATION environment variable to the directory containing the index.html file:

    bash

    export SWA_CLI_OUTPUT_LOCATION="dist/swa-angular-demo/browser"

    csh

    setenv SWA_CLI_OUTPUT_LOCATION "dist/swa-angular-demo/browser"

    PowerShell

    $env:SWA_CLI_OUTPUT_LOCATION="dist/swa-angular-demo/browser"

    CMD

    set SWA_CLI_OUTPUT_LOCATION="dist/swa-angular-demo/browser"

::: zone-end

Deploy your site to Azure

Deploy your code to your static web app:

npx swa deploy --env production

It might take a few minutes to deploy the application. Once complete, the URL of your site is displayed.

Screen shot of the deploy command.

On most systems, you can select the URL of the site to open it in your default browser.

[!INCLUDE Clean up resources]

Next steps

[!div class="nextstepaction"] Add authentication

Related content