Skip to main content

swa start

Synopsis​

swa start [configName|outputLocation|appDevserverUrl] [options]

Description​

This command is used to start the Azure Static Web Apps emulator from a directory or bind to a dev server.

Serve from a folder​

By default, the CLI starts and serves any the static content from the current working directory ./:

swa start

However, you can override this behavior. If the artifact folder of your static app is under a different folder (e.g. ./my-dist), then run the CLI and provide that folder:

swa start ./my-dist

Serve from a dev server​

When developing your front-end app locally, it's often useful to use the dev server that comes with your front-end framework's CLI to serve your app content. Using the framework CLI allows you to use built-in features like the livereload and HMR (hot module replacement).

To use SWA CLI with your local dev server, follow these two steps:

  1. Start your local dev server (as usual). For example, if you are using Angular: ng serve (or npm start)
  2. In a separate terminal, run swa start with the URI provided by the dev server, in the following format:
swa start http://<APP_DEV_SERVER_HOST>:<APP_DEV_SERVER_PORT>

Here is a list of the default ports used by some popular dev servers:

ToolPortCommand
Angular4200swa start http://localhost:4200
Blazor WebAssembly5000swa start http://localhost:5000
Gatsby8000swa start http://localhost:8000
Hugo1313swa start http://localhost:1313
Next.js3000swa start http://localhost:3000
React (Create React App)3000swa start http://localhost:3000
Svelte (sirv-cli)5000swa start http://localhost:5000
Vue3000swa start http://localhost:3000

Instead of starting a dev server separately, you can provide the startup command to the CLI.

# npm start script (React)
swa start http://localhost:3000 --run "npm start"

# dotnet watch (Blazor)
swa start http://localhost:5000 --run "dotnet watch run"

# Jekyll
swa start http://localhost:4000 --run "jekyll serve"

# custom script
swa start http://localhost:4200 --run "./startup.sh"

Then access the application with the emulated services from http://localhost:4280

Serve both the front-end app and API​

If your project includes API functions, the CLI will check if the Azure Functions Core Tools are installed and available. If not, the CLI will download and install the right version of the Azure Functions Core Tools.

Start the API server automatically​

Run the CLI and provide the folder that contains the API backend (a valid Azure Functions App project):

# static content plus an API
swa start ./my-dist --api-location ./api

# front-end dev server plus an API
swa start http://localhost:3000 --api-location ./api

Start API server manually​

When developing your backend locally, sometimes it's useful to run Azure Functions Core Tools separately to serve your API. This allows you to use built-in features like debugging and rich editor support.

To use the CLI with your local API backend dev server, follow these two steps:

  1. Start your API using Azure Functions Core Tools: func host start or start debugging in VS Code.
  2. In a separate terminal, run the SWA CLI with the --api-devserver-url flag and the URI of the local API server, in the following format:
swa start ./my-dist --api-devserver-url http://localhost:7071

Options​

Here are the options you can use with swa start:

  • -a, --app-location <path>: the folder containing the source code of the front-end application (default: ".")
  • -i, --api-location <path>: the folder containing the source code of the API application
  • -O, --output-location <path>: the folder containing the built source of the front-end application. The path is relative to --app-location (default: ".")
  • -D, --app-devserver-url <url>: connect to the app dev server at this URL instead of using output location
  • -is, --api-devserver-url <url>: connect to the api server at this URL instead of using api location
  • -j, --api-port <apiPort>: the API server port passed to func start (default: 7071)
  • -q, --host <host>: the host address to use for the CLI dev server (default: "localhost")
  • -p, --port <port>: the port value to use for the CLI dev server (default: 4280)
  • -s, --ssl: serve the front-end application and API over HTTPS (default: false)
  • -e, --ssl-cert <sslCertLocation>: the SSL certificate (.crt) to use when enabling HTTPS
  • -k, --ssl-key <sslKeyLocation>: the SSL key (.key) to use when enabling HTTPS
  • -r, --run <startupScript>: run a custom shell command or script file at startup
  • -t, --devserver-timeout <time>: the time to wait (in seconds) when connecting to a front-end application's dev server or api server (default: 60)
  • -w, --swa-config-location <swaConfigLocation>: the directory where the staticwebapp.config.json file is located
  • -o, --open: open the browser to the dev server (default: false)
  • -f, --func-args <funcArgs>: pass additional arguments to the func start command
  • -h, --help: display help for command

Usage​

Serve static content from a specific folder

swa start ./output-folder

Connect to an already running framework development server

swa start http://localhost:3000

Use staticwebapp.config.json file from a specific location

swa start http://localhost:3000 --swa-config-location ./app-source

Serve static content from a folder and run an API from another folder

swa start ./output-folder --api-location ./api

Use a custom command to run framework development server at startup

swa start http://localhost:3000 --run "npm start"

Connect both front-end and the API to running development server

swa start http://localhost:3000 --api-devserver-url http://localhost:7071
Note

To make a secure connection, hit a https dev server only if you start the CLI using the flag --ssl.

See Also​