Get to know on which type of site your SharePoint Framework solution is running

Depending on the solution you are creating, you might want to know on which type of site your SharePoint Framework solution is currently running. This could be useful to enable or disable certain functionalities the solution you are creating depending on the type of site. For example: enable some extra collaboration features in your solution when used on a team site, and disable the features when used on a communication site.

In classic SharePoint, we could retrieve this information from the _spPageContextInfo object in JavaScript. When building SharePoint Framework solutions, you can rely on the PageContext which you can retrieve from the context of your current solution: ApplicationCustomizerContext, ExtensionContext, FieldCustomizerContext, or WebPartContext.

The site type can be retrieved as follows:

1
this.context.pageContext.web.templateName

Info: templateName returns the string representing the numeric identifier for the site definition or site template that was used to create the site.

What you get from this property is the web template ID. Here is a list of values you get from the modern sites and classic team site: