From the course: SharePoint Framework for Developers: 2 Authoring and Debugging Solutions

Deploying SPFx solutions: Basics

From the course: SharePoint Framework for Developers: 2 Authoring and Debugging Solutions

Start my 1-month free trial

Deploying SPFx solutions: Basics

“

- [Instructor] In the previous chapter I showed you how to write a simple SharePoint framework hello web part solution. Here is the web part running. Let me go head and stop it because now we'll talk about deploying this. Now, you can pick up the code for this particular video in folder 2_01 Start. The spfxwebpart, unzip it, run npminstall or you can simply generate a new spfx solution of one web part in it. Either way, the steps are going to be the same. So the thing is that as the solution runs, let's go head and run it again. So as the solution runs I'm going to hit F12 so we can see the network traffic. Go to the Network tab. Let me make this slightly bigger. And I'm going to go ahead and drop the hello world wep part. And notice that the files are being served from 4321, localhost 4321. So the process of deploying this is a little bit like this. That you would say gulp dash dash package solution. And this would produce an sppkg file. And when you were to deploy that sppkg file most likely, under the default settings of Office 365, it won't work. The reason being that the sppkg file that you will produce in this scenario would still try to load files from localhost 4321. Obviously unless you run localhost 4321, that's not going to work. So the question is what can we do to properly deploy this. So for that let's go ahead and open the config folder. And in the config folder, dive into the write-manifests.json file. Now here, you see an entry called cdnBasePath. So this cdnBasePath is basically a location where you specify to your SharePoint solution package that all the dependent files are supposed to be loaded from this CDN path. Now, it gets even better than that. I could actually leave it default, I have this comment here that says path to CDN, and dive into package-solution.json and in here you see that under the solution node there is a branch called includeClientSideAssets and its default value is true. What that means is that if you have Office 365 public CDN enabled on your tenancy then all the actual files that are required to run your SharePoint solution package, this sppkg file, they will automatically be deployed to your Office 365 CDN. Now I'm going to show you both approaches. I'm going to show you the approach of being able to hand specify a URL. Imagine if you were using a CDM path other than Office 365 and then I will also show you the automatic deployment model where these client side assets get deployed for you automatically. But the first thing we will need is a CDN. So next I'll show you how to turn your Office 365 tenancy into a CDN.

Contents