Azure Static Web Apps CLI

1Open Vite + React Project

Create a new project or open an existing one.

2Install Azure Static Web Apps CLI

Open the terminal and run the following command.
*When opening the terminal, the current directory will be the solution folder, so navigate to the project folder.

# Run at the project root
npm install --save-dev @azure/static-web-apps-cli

3Create Configuration File

Run the following command in the terminal.

# Run at the project root
npx swa init

You will be prompted for input as shown below, confirm by pressing Enter.

npx swa init

Welcome to Azure Static Web Apps CLI (2.0.1)

√ Choose a configuration name: ... reactapp  ★ Configuration name (default value is displayed, just press Enter)

Detected configuration for your app:
- Framework(s): Vite
- App location: reactapp
- Output location: dist
- API location:
- API language:
- API version:
- Data API location:
- App build command: npm run build
- API build command:
- App dev server command: npm run dev
- App dev server URL: http://localhost:5173

- API dev server URL:

√ Are these settings correct? ... yes ★ Press Enter

Configuration successfully saved to swa-cli.config.json.

Get started with the following commands:
- Use swa start to run your app locally.
- Use swa build to build your app.
- Use swa deploy to deploy your app to Azure.

A file named swa-cli.config.json will be created in the project root.

// swa-cli.config.json

{
  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
  "configurations": {
    "reactapp": {
      "appLocation": ".",
      "outputLocation": "dist",
      "appBuildCommand": "npm run build",
      "run": "npm run dev",
      "appDevserverUrl": "http://localhost:5173"
    }
  }
}

4Edit Configuration File

Add the following to the created configuration file.

• appName: Name of the static website
• resourceGroup: Resource group

// swa-cli.config.json
{
  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
  "configurations": {
    "reactapp": {
      "appLocation": ".",
      "outputLocation": "dist",
      "appBuildCommand": "npm run build",
      "run": "npm run dev",
      "appDevserverUrl": "http://localhost:5173",
      "appName": "static-web-app",
      "resourceGroup": "hoge"
    }
  }
}

5Deploy to Azure

Run the following command in the terminal to log in.

npx swa login --no-use-keychain

• If a browser launches asking for login, enter your Azure credentials and log in (it's OK if "Auth code was successfully acquired. You can close this window now." is displayed).
• If you are already logged into Azure in your default browser, "Auth code was successfully acquired. You can close this window now." will be displayed in a new tab.
• If your account is linked to multiple tenants, a list of tenants will be displayed. Use the up and down arrow keys to select and press Enter.

The execution result will be as follows.

npx swa login --no-use-keychain

Welcome to Azure Static Web Apps CLI (2.0.1)

Using configuration "reactapp" from file:
  C:\hoge\ReactSample\reactapp\reactapp\swa-cli.config.json

Checking Azure session...
✔ Successfully logged into Azure!
? Choose your tenant » - Use arrow-keys. Return to submit.
>   hoge09f8-hoge-4b28-8bf4-732335a1ddfb
    3310hoge-6770-hoge-9d84-4fc7badadf0a
    hogefe8e-hoge-44c3-hoge-eb49f7d79e26
    b93choge-189f-hoge-8f05-hogeaecd41f9

Next, build the project with the following command.

npx swa build

The resources to be deployed will be generated in the dist folder.

Run the following command in the terminal to deploy.

• If your account is linked to multiple tenants, a list of tenants will be displayed. Use the up and down arrow keys to select and press Enter.

npx swa deploy --env production --no-use-keychain

Deployment is complete if a message like the following is displayed.

Deploying to environment: production

Deploying project to Azure Static Web Apps...
√ Project deployed to https://purple-river-09bd36a00.5.azurestaticapps.net 🚀