Deploying And Shipping SharePoint Framework (SPFx) Web Parts

Introduction

We have seen in many articles the steps on how to run SharePoint Framework (SPFx) web parts in local Workbench. However, that is not how users expect to use the web parts; they want them to install those web-parts in a real-time scenario.

Please read my previous articles on SPFx.

Let’s get started.

We know that by default the project templates render everything from Localhost. However, for our build and production purpose, that is not going to work and ultimately, we need to use CDNs (Content Delivery Network).

We will start from an SPFx web part that works in a local workbench and will bundle the solution using a command called "gulp package-solution" which works only in debug mode. If we want to bundle for the production environment, then we need to use the command "gulp package-solution --ship".

So, how we can deploy the web part in Office 365 tenant? The answer to this question is that we need to create a package file and that package file needs to be uploaded in the App Catalog.

Step 1

So, let’s first check the out-of-the-box code provided by Yeoman Generator for SharePoint Framework. Go into the config folder and then go to "package-solution.json" file and here, we will see a location called "zippedPackage".

Deploying And Shipping SharePoint Framework (SPFx) Web Parts

Step 2

In this step, we will package the solution, but before packaging, let’s check the folder structure to understand where the package goes once we run the command "gulp package-solution".

Step 3

In command prompt, run the command "gulp package-solution" and check the folder structure. We will see that a folder named "sharepoint" has been created. Under this folder, there will be a sub-folder named "" and under that sub-folder, we will find the package file i.e. .sppkg file.

Step 4

This .sppkg file needs to be deployed in Office 365 and then, the users should be able to install the package. Let’s connect with Office 365 App Catalog. Click on "Apps for SharePoint" to upload the package file.

Step 5

Once the package file is uploaded, the folder structure like the below screenshot will be displayed, which is a Trust dialog that allows you to deploy the package.

Step 6

Since the package has been deployed successfully, let’s add this app to a SharePoint site collection. Let’s add the web part as an App. For that, navigate to site contents and you will see the App which we have deployed.

Click on the above app and it will redirect you to a modern page where all lists and libraries will be displayed. The app will take a few minutes to get deployed to the site collection.

Step 7

Since the package has been added to the site collection, let’s add this on a SharePoint Page. The interesting part here is that in which category my web part will be available. Let’s navigate to Visual Studio Code and there is a file named "WebPart.manifest.json", which tells us the location (group) where web part will be available.

In my case, the web part was present in "Others" category, as shown below,

Step 8

Once the web part is added on the page, it’s not going to work and the web part will display the below error. The reason for this error is that most of the files are getting served from Localhost (E.g. – en-us.js, bundle.js, etc.).

Step 9

However, if we run the gulp serve, the web part will start working, as shown below. So, to run the code properly, we should deploy our code in some CDN or even we can use Office 365 document library as CDN.

General Tip

When you click on the Technical details of the above error message, you will see the below details. So, you can run the command "gulp trust dev-cert", however, the tip here is - Do not use Firefox or any other browser for testing. Use only Google Chrome browser, else you will not see the desired output.

Summary

In this article, we look into the steps of how we can bundle and deploy SharePoint Framework web parts to Office 365.