In the previous 2 posts, I walked you through the setup of several required packages, talked about the SharePoint Workbench, and provided a script to create a public CDN in SharePoint Online. I also avoided showing the solution. The code itself isn’t important, but the structure is, so let’s take a look at that while we walk through bundling, packaging, and deploying.
The files that are important to packaging and deploying can be found in the config folder.
Bundle & Deploy
You’ll need to specify a cdn base path for the solution; otherwise, you’ll see that the webpart will try to reference files from the localhost instead of the destination location. (In a previous post, I provide a script to create a CDN in SharePoint Online). If you have a CDN in place, open the write-manifests.json file and provide the URL.
You can bundle the solution files with the following command:
gulp bundle --ship
Once you run the previous command, you’ll see a new Deploy folder was created inside temp. You’ll want to upload the files from the Deploy folder to the CDN that you’ve specified.
So now you’ve told the solution where it’s going to get it’s content files and it’s time to deploy.
The solution package for an SPFx solution uses yet another new extension (sppkg). In order to create the package, we invoke the package-solution.json. The file will contain a path where your solution will be deployed. In this case, my solution will be added to “SharePoint/Solution” and will be given the name sp-fx.sppkg.
To create that package, you’ll need the following PowerShell command:
gulp package-solution --ship
Next, take your sppkg file and upload it to your app catalog. You’ll notice that the CDN path appears in the modal to show you where the content for that solution will be referenced from.
Note: If you omit the “–ship” from the powershell commands above, you’ll create packages for debugging and not production. You’ll know that you did this if you see localhost as the content location instead of your CDN.
Now, your solution has been deployed and you’ll just need to add it. If you go to Site Contents > Add an App, you’ll find your web part. Finally, you can add your web part to the page the same way you’re used to adding web parts.
… And that’s pretty much it.