SPFx is a versatile and budget-friendly framework. With the newly introduced Webpack 5 support available from SPFx Version 1.19, it is now possible to directly interact with the Azure Service Bus. In this blog post, I will show you how you can configure your SPFx solution to directly perform operations against the Azure Service Bus.

Table of Contents

Introduction

This blog post will guide you through the steps necessary to configure your SPFx solution to work with the Azure Service Bus Client Library for JavaScript . At the end of this blog post, I am sharing a fully working example.

The motivation: Simplify and reduce costs

Recently, I did a Proof of Concept for removing some Azure components in one of our processes. I am replacing Azure Logic Apps with direct access to the Azure Service Bus, reducing both application complexity and costs.

Note : Cloud costs are becoming a large portion of IT costs. With the rise of FinOps , the business value of the Cloud is coming into focus. Leveraging highly versatile frameworks like SPFx and TeamsFx, which come into play at no or low cost in the Microsoft 365 world, is central to reducing costs.

Azure Service Bus

To go through this tutorial, you will need an Azure Subscription and an Azure Service Bus along with a queue name. You can find a tutorial here .

SPFx Webpack 5 support

With the release of SPFx v1.19, Webpack 5 Support is now available.

Step 1: Scaffold an SPFx 1.20 solution

For this demo, I am using the latest SPFx version (v1.20).

Step 2: Install the packages

The documentation for the @azure/service-bus npm package contains detailed instructions about what packages are necessary and how to configure Webpack 5 support.

npm install @azure/service-bus
npm install @types/node
npm install --save-dev os-browserify path-browserify
npm install util

The util package is not mentioned in the documentation but is necessary because, if missing, you will encounter errors during the build process of your SPFx solution.

Step 3: Adapt the Webpack 5 configuration to your SPFx solution

We can adapt the Webpack V5 configuration from the @azure/service-bus and inject it into the SPFx build pipeline like this:

const webpack = require('webpack');

build.configureWebpack.mergeConfig({
  additionalConfiguration: (generatedConfiguration) => {
    generatedConfiguration.plugins.push(
      new webpack.ProvidePlugin({
        process: 'process/browser',
      }),
      new webpack.ProvidePlugin({
        Buffer: ['buffer', 'Buffer'],
      })
    );

    generatedConfiguration.resolve.fallback = {
      buffer: require.resolve('buffer/'),
      os: require.resolve('os-browserify'),
      path: require.resolve('path-browserify'),
      util: require.resolve('util/'), 
    };

    return generatedConfiguration;
  },
});

Step 4: Implementation in SPFx

We are now all set up to use a Service Bus in our SPFx solution.

Note : For this example, we will access our Service Bus with a Shared Access Key, which is available through your Azure portal. You may want to enforce additional security in your corporate environment.

Sending messages to the Azure Service Bus

To send messages from our SPFx solution to the Azure Service Bus, we just need to set up our ServiceBus Client and then create a sender instance like this:

const serviceBusClient = new ServiceBusClient(endpoint);
const sender = serviceBusClient.createSender(queueName);

We need two parameters: the Azure Service Bus Endpoint, which corresponds to our Shared Access Key copied from the Azure portal, and the queue name.

At this point, we are ready to send messages to our Service Bus, like this:

await sender.sendMessages({ body: payload });

Reading messages from the Azure Service Bus

You can receive messages from a Service Bus in two different modes:

  • peekLock: The message will stay in the queue but is locked for a certain amount of time.
  • receiveAndDelete: The message is deleted as soon as it is read by the client.
const serviceBusClient = new ServiceBusClient(endpoint);
const receiverOptions: ServiceBusReceiverOptions = {
  receiveMode: receiveMode,
};
const receiver = serviceBusClient.createReceiver(queueName, receiverOptions);

Like the sender, we also need two additional parameters besides the receiveMode: the Azure Service Bus Endpoint, which corresponds to our Shared Access Key copied from the Azure portal, and the queue name.

Full Code

I have created a small SPFx solution where you can test sending and receiving messages from your Azure Service Bus.
The full code is available here: react-azureservicebus

Conclusion

With the versatility of SPFx, it is now possible to easily read and send messages, enabling various scenarios, particularly when building an event-driven architecture.