A look at the new

Azure Static Web Apps CLI

Wassim Chegham | @manekinekko

How to debug and run

Azure Static Web Apps locally.

Meet          ...

Naya

Naya wants to debug her apps locally...

She wants a faster developer feedback loop.

Naya wants to focus on her the code.

Naya wants to test parts of

Static Web Apps' features locally.

We need to provide Naya with a tool that...

Serves static content,

Serves the backend API,

Emulates authentication and understands authorizations...

A tool that emulates parts of Azure Static Web Apps runtime?

Web Browser

AJAX

UI

HTTP request

Static content

Request

Response

Azure Functions

Naya's typical local dev setup...

localhost:4200

Static Content

localhost:7071

GitHub

Twitter

Google

...

Azure Static Web Apps runtime* on Azure...

* Simplified architecture

/**

/api/**

UI

https://wassim.dev

/.auth/**

Web Browser

AJAX

Azure Functions

Static Content

Auth

Azure Static Web Apps CLI

aka. SWA CLI

Local Static Web Apps dev setup with the SWA CLI (part. 1)

Web Browser

AJAX

UI

Azure Functions

https://localhost:4280

Static Content

/.auth/**

Auth

Local Auth UI

/**

/api/**

func CLI

Web Browser

AJAX

UI

Azure Functions

https://localhost:4280

Static Content

http://localhost:7071

/.auth/**

Local Static Web Apps dev setup with the SWA CLI (part. 2)

http://localhost:4200

Auth

Local Auth UI

func CLI

aka.ms/swaconf/cli

npm install @azure/static-web-apps-cli

Install from the npm registry

swa start

Serve static content from the current folder

swa start ./dist/app

Serve static content from the current folder

swa start ./dist/app --api ./api

Serve static content with a backend API

swa start ./app --api http://localhost:7071
swa start http://localhost:4200 --api ./api
swa start http://localhost:4200 --api http://localhost:7071

Use with any dev server...

{
  "routes": [
    {
      "route": "/api/products",
      "allowedRoles": ["authenticated"]
    }
  ]
}

Full support of staticwebapp.config.json

And much more...

aka.ms/swaconf/cli

Wassim Chegham | @manekinekko

A look at the new

Azure Static Web Apps CLI