Writing Static Web Apps configuration with JSON Schema

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
• Custom authentication in Azure Static Web Apps | Microsoft Docs

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

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

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

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.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.

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

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.

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