In our last Engineering Blog post , we wrote about an automated build and deployment process using the PuntoBello Installer. The PuntoBello Installer enables the deployment and configuration of SharePoint elements and the build and deployment of SPFx solutions. But what if additional resources are integrated into Azure and dependencies arise? We describe the integration of the PuntoBello Installer for use with Azure Developer CLI.

PuntoBello Installer

Looking for a standardized way to build and deploy all our PuntoBello solutions, we created the PuntoBello Installer. Our blog post describes how the installer contains the complete tooling to build and deploy SPFx solutions, as well as all the scripts required in the process. To accommodate the different requirements of each solution for deployment to SharePoint, we defined a JSON file (solutions.json) that contains all the relevant information for the deployment scripts. Our GitHub repo provides access to the PuntoBello Installer, which can be used on a Mac or a Windows PC with different CPU architectures, on your local system, in a devcontainer, and even in a CI/CD pipeline.

Azure Developer CLI

Azure Developer CLI is a command-line interface tool that allows developers to manage Azure resources and services from the terminal or command prompt. With Azure Developer CLI, developers can perform a wide range of tasks, such as creating and managing Azure resources, deploying and managing applications, and configuring security and access control. The tool supports a variety of programming languages and platforms, including .NET, Node.js, Java, Python, and Ruby. Developers can use Azure Developer CLI to automate tasks and integrate Azure services into their development workflows. Additionally, Azure Developer CLI provides a consistent experience across platforms and environments, making it easy to manage Azure resources from anywhere.

Real life scenario with realtime news

To demonstrate the integration of Azure Developer CLI with the PuntoBello Installer, we will walk through the deployment process of one of our solutions, the “Realtime News”. This complete solution consists of the following components:

  • SharePoint Online sites, lists and terms
  • SPFx webpart
  • Socket web app which will be deployed to an Azure App Service
  • Workflow which runs in a Logic App

To enable a disruption-free deployment without manual intervention, we rely on various concepts within the Azure Developer CLI:

  • Infra: Infrastructure as code is a concept that allows developers to define and manage infrastructure using code. In Azure Developer CLI, the Infra concept allows developers to define and manage Azure resources using code. Developers can use Infra to create, update, and delete Azure resources and services.
  • Services: Services are the resources and services that developers use to build and deploy applications in Azure. Developers can use services to define and manage the resources and services required for a solution.
  • Hooks: Hooks are scripts that run at specific points during the deployment process. Developers can use hooks for example to perform custom actions, such as running tests, before or after a deployment.
  • Environments: Environments are the different environments that a solution can be deployed to, such as development, staging, and production. Developers can use Environments to specify different settings and configurations for each environment, such as connection strings and API keys.

If we look at the Realtime News solution, we see the following structure, which corresponds to the listed concepts above.

  • .devcontainer: Files to use with the PuntoBello Installer.
  • hooks: Contains scripts, one for the pre up step and one for the post up step.
  • infra: We use Terraform, and therefore the corresponding definitions are located within this folder. It is also possible to use Bicep instead of Terraform.
  • puntobello-realtimenews-spwp: This webpart shows news from a custom list and gets actions from a socket server. User preferences regarding subscriptions of news channels are managed through this webpart.
  • puntobello-realtimenews-webapp: This web app is a Node.js application running a Socket.IO server and listening to an Azure Service Bus. The message payloads for various events are minimized and do not contain sensitive information. These payloads are generated outside of this server, which functions purely as a wrapper to emit events to connected clients.
  • spo: Contains configuration to setup SharePoint elements like Sites, Lists and Terms.
  • azure.yaml: Main configuration file to setup the process of Azure Developer CLI.

Deployment process

As previously described, we combine the concepts of our PuntoBello Installer with those of Azure Developer CLI. The configuration in azure.yaml provides the following sequence:

  1. Installation of Azure resources with Terraform (infra provider), including Logic App and its code.
  2. Deployment of the web app into the app service defined in Terraform main.tf.
  3. Execution of PowerShell scripts provided by the PuntoBello Installer, both before and after (preup, postup) to create sites and lists and use parameters in the webpart.

To perform a complete installation of the entire solution, the following steps are necessary:

First, relevant configurations must be made in the PuntoBello Installer.

The config.psm1 file in the installers ./scripts directory allows you to define your tenant name, a user which is used as sitecollection administrator if a new site collection is created and your preferred authentication method.

$global:M365_TENANTNAME = "puntobello" 
$global:adminUser = admin@$($global:M365_TENANTNAME).onmicrosoft.com 
# Login parameters 
$global:loginSelector = 1

Choose one of the authentication methods and set the corresponding parameters.

Currently, the login selector only applies to the connection with PnP.PowerShell. Authentication using Azure CLI and Azure Developer CLI must be done interactively. Authentication takes place after starting the Devcontainer. The tools used, such as Azure CLI, Azure Developer CLI, and Terraform, are already integrated into the Devcontainer.

Use Ctrl + Shift + P (on Windows) or Command + Shift + P (on OS X) to run ‘Dev Containers: Rebuild and Reopen in Container’. This builds the container and attaches the project folder to the container with PowerShell, modules and all tools loaded.

Authenticate to Azure with az login and azd auth login. Both CLI have plenty of different authentication methods. We will cover the options in another blog post in near future.

Start the deployment with azd up. If you start the deployment for the first time you will get prompted to create a new environment. Following parameters are needed to create the environment:

  • Environment name
  • Azure Subscription to use
  • Azure location to use

After the environment is created the deployment process gets started. You will see a newly created folder called .azure. The three parameters are saved in the .env file of your environment.

AZURE_ENV_NAME="puntobello" 
AZURE_LOCATION="switzerlandnorth" 
AZURE_SUBSCRIPTION_ID="31cc0dc4-885c-4742-913f-9324393623b6"

In there you will also find all relevant configuration settings like environment variables and terraform configuration.

In our “Realtime News” example, every SharePoint element, all Azure resources, the web app and the SPFx webparts gets built and deployed. This may take up to 15 minutes.

After the deployment, review the resources in your Azure subscription, authenticate the API Connections for the Logic Apps and the Service Bus. In SharePoint, create new terms in the corresponding term set to define your news channels and configure the webpart that is now deployed to your site. All relevant parameters used for installation are stored in the .env file as described a couple of lines above.

Conclusion

Azure Developer CLI provides an easy way to build and tear down a web app and its associated resources. The ability to control multiple environments with the integration of an environment logic allows for easy switching between multiple environments. Since the defined parameters act as environment variables at runtime, we can seamlessly integrate them into the deployment logic of the PuntoBello Installer. Additional steps can be easily executed with hooks, creating a complete deployment without manual interaction. However, prior knowledge of Terraform or Bicep is necessary to set up relevant configurations accordingly.