Writing Static Web Apps configuration with JSON Schema
Tags: azure, visualstudio, vscode
Published: 2021-05-27 14:58:10

Azure Static Web Apps now supports login using external IdPs such as Azure AD and Facebook at the same time as GA.

You do not need to write any additional code for authentication, but you do need to create `staticwebapp.config.json`.

- [Configure Azure Static Web Apps | Microsoft Docs](https://docs.microsoft.com/en-us/azure/static-web-apps/configuration)
- [Custom authentication in Azure Static Web Apps | Microsoft Docs](https://docs.microsoft.com/en-us/azure/static-web-apps/authentication-custom?tabs=aad)

If you have read the documentation, you must have found it difficult to write the configuration file correctly. I was one of those who felt that way.

Let's use JSON Schema to write a configuration file easily.

## Load from Schema Store

JSON Schema for `staticwebapp.config.json` is already shared by a service called Schema Store.

- [JSON Schema Store](https://www.schemastore.org/json/)

The URL of the actual JSON Schema is as follows.

```
https://json.schemastore.org/staticwebapp.config.json
```

You can load this JSON Schema into any supported editor or IDE for autocompletion and format validation.

My recommendation is Visual Studio Code, but the same feature is available in Visual Studio.

## Visual Studio Code

Visual Studio Code has built-in support for JSON Schema, but additional configuration is required to use JSON Schema in certain files.

- [JSON schemas and settings | JSON editing in Visual Studio Code](https://code.visualstudio.com/docs/languages/json#_json-schemas-and-settings)

Open the settings of Visual Studio Code and search for JSON Schema to find the item.

![JSON Schema setting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s18az0u3olhfbx5xbvr3.png) 

Add the following definition to `json.schemas`. As you can see from the fact that it is an array, multiple definitions can be added.

```json
{
  "json.schemas": [
    {
      "fileMatch": [
        "/staticwebapp.config.json"
      ],
      "url": "https://json.schemastore.org/staticwebapp.config.json"
    }
  ]
}
```

Once you add the JSON Schema definition, the JSON Schema will be automatically loaded when you open `staticwebapp.config.json` from now on.

As a result, autocomplete using JSON Schema will work in Visual Studio Code.

![Writing with JSON Schema](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5tadi5bk9y2jyxvd80x1.gif) 

Since there is no need to manually enter the required properties, the possibility of making a mistake is very low.

Of course, the validation is performed in real time in the editor.

## Visual Studio

If you are using Visual Studio, the Schema Store catalog file has already been set up.

If it is not set, manually add the URL of the catalog file.

```
http://schemastore.org/api/json/catalog.json
```

![JSON Schema catalog setting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0xuc0dfu9fpbm5c3evlh.png)

According to the file name, the corresponding JSON Schema will be downloaded and used.

Just open `staticwebapp.config.json` in Visual Studio and you can use IntelliSense for autocompletion.

![Writing with JSON Schema](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p1y6fbvs4jt1w8vuv25d.gif)

By using JSON Schema, you can write complex routing and authentication definitions without making any mistakes.