Azure Static Web Apps – Lazy Dev Environment
Tags: azure, beginners, webdev
Published: 2021-09-06 12:47:31


---
title: Azure Static Web Apps – Lazy Dev Environment 
published: true
description: Playing with Static Web Apps is lots of fun. However, setting up a list of required libraries and tools can get a little bit daunting. On top of that, removing &hellip; Continue reading &#8220;Azure Static Web Apps – Lazy Dev Environment&#8221;
tags: azure, beginners, webdev
canonical_url: https://blog.wiseowls.co.nz/index.php/2021/09/07/azure-static-web-apps-lazy-dev-environment/
cover_image: https://blog.wiseowls.co.nz/wp-content/uploads/2021/02/cloud-computing-2001090_1920.jpg
series: Azure Static Web Apps
---

Playing with Static Web Apps is lots of fun. However, setting up a list of required libraries and tools can get a little bit daunting. On top of that, removing it will likely leave a messy residue.

Use VS Code Dev containers then
-------------------------------

So, let us assume [WSL](https://docs.microsoft.com/en-us/windows/wsl/install-win10) and Docker are already installed (Microsoft should consider shipping these features pre-installed, really). Then we can quickly grab VS Code and spin up a [development container](https://code.visualstudio.com/docs/remote/remote-overview).

Turns out, Microsoft have already provided a very good [starting point](https://github.com/microsoft/vscode-dev-containers/tree/main/containers/azure-static-web-apps). So, all we need to do is:

1. start a blank workspace folder, hit `F1`
2. type “Add Development Container” and select the menu item
![Add Development Container](https://blog.wiseowls.co.nz/wp-content/uploads/2021/09/image-5.png)
3. type something and click “Show All Definitions”
![Show All Definitions](https://blog.wiseowls.co.nz/wp-content/uploads/2021/09/image-6.png)
4. Select “Azure Static Web Apps”
![Azure Static Web Apps](https://blog.wiseowls.co.nz/wp-content/uploads/2021/09/image-4.png)
5. Press `F1` once more and run “Remote-Containers: Reopen Folder in Container”
![Reopen Folder in Container](https://blog.wiseowls.co.nz/wp-content/uploads/2021/09/image-7.png)

At the very minimum
-------------------

To be valid, Static Web Apps require an `index.html` file. Let’s assume we’ve got static frontend sorted. Now we also want to add an API:

```bash
vscode ➜ /workspaces/vs-dev-containers-demo $ mkdir api && cd api
vscode ➜ /workspaces/vs-dev-containers-demo/api $ func init
vscode ➜ /workspaces/vs-dev-containers-demo/api $ func new -l C# -t HttpTrigger -n HelloWorld

```
nothing fancy, but now we can start everything with `swa start`:

```bash
vscode ➜ /workspaces/vs-dev-containers-demo $ swa start --api api
```
VS Code would go ahead and download recommended extensions and language packs, so this should just work.

We want better dev experience
-----------------------------

And this is where custom tasks and [launch configurations](https://code.visualstudio.com/Docs/editor/debugging#_launch-configurations) would come in handy. We want VS Code to run `swa` emulator for us and attach to running instance of Functions:

```json
{
  "version": "0.2.0",
  "compounds": [
    {
      "name": "Run Static Web App with API",
      "configurations": ["Attach to .NET Functions", "Run SWA emulator"],        
      "presentation": {
        "hidden": false,
        "group": "",
        "order": 1
      }
    }
  ],
  "configurations": [
    {
      "name": "Attach to .NET Functions",
      "type": "coreclr",
      "request": "attach",
      "processId": "${command:azureFunctions.pickProcess}",
      "presentation": {
        "hidden": true,
        "group": "",
        "order": 2
      }
    },
    {
      "name": "Run SWA emulator",
      "type": "node-terminal",
      "request": "launch",      
      "cwd": "${workspaceFolder}",
      "command": "swa start . --api http://localhost:7071",
      "serverReadyAction": {
        "pattern": "Azure Static Web Apps emulator started at http://localhost:([0-9]+)",
        "uriFormat": "http://localhost:%s",
        "action": "openExternally"
      },
      "presentation": {
        "hidden": true,
        "group": "",
        "order": 3
      }
    }
  ]  
}

```


Save this file under `.vscode/launch.json`, reopen project folder and hit `F5` to enjoy effect!

Finally, all code should get [committed to GitHub](https://github.com/tkhadimullin/minimal-azure-swa-dev-container) ([refrain from using ADO if you can](https://blog.wiseowls.co.nz/index.php/2021/08/06/azure-static-web-apps-custom-build-and-deployments/)).