Deploy SPFx

Depending on Gulp which is a task runner that automates repetitive tasks like building, bundling, and deploying your code. Gulp tasks are used to compile TypeScript, bundle JavaScript, and package your SPFx solutions.

I am using the following setup:

  • @microsoft/generator-sharepoint@1.19.0
  • gulp-cli@3.0.0
  • gulp@5.0.0
  • yo@5.0.0

First, build the project to validate there is no syntax error by using gulp build from the terminal in VS code. If there is any error, it will be mentioned in the terminal. If you received “finished” it means no errors found and the build succeeded

Test and Debug:

For this purpose, we depend on SharePoint Workbench. It’s a development environment that allows you to test your SPFx web parts and extensions locally or in a SharePoint site. The local workbench is useful for quick testing, while the online workbench provides a more integrated experience

from the terminal, gulp serve

A browser will open with “can’t reach this page” and if you notice the URL {tenantdomain} parameter in the URL which should e replaced by the actual value of your tenant

Navigate to conig folder and then serve.json then can add the exact tenant domain.

run gulp serve one more time and now you can see the workbench page loaded with no errors.

Click on “+” icon to add the web part you need to test and you should be ale to see it under local category.

The web part will be displayed with no errors, so you can package and upload to SharePoint

Bundle and Package:

The commands gulp bundle --ship and gulp package-solution --ship are both essential steps in preparing your SharePoint Framework (SPFx) solution for deployment. Here’s a breakdown of their differences and purposes:

gulp bundle --ship

  • Purpose: This command bundles your SPFx solution, preparing all the necessary assets (JavaScript, CSS, etc.) for deployment.
  • Process: It optimizes and minifies your code, ensuring that it is production-ready. The assets are typically placed in the temp/deploy folder.
  • Output: Generates the optimized and minified files that will be deployed to a Content Delivery Network (CDN) or a SharePoint document library.

gulp package-solution --ship

  • Purpose: This command packages your SPFx solution into a .sppkg file, which is the SharePoint package file used for deployment.
  • Process: It creates the package that includes all the necessary metadata and references to the bundled assets. This package is what you upload to the SharePoint App Catalog.
  • Output: Generates the .sppkg file located in the sharepoint/solution folder, ready to be deployed to the SharePoint App Catalog.

After packaging the solution, you can see a new folder with name “SharePoint” was added to the web-part folder which will contain the deployed package with extension “.sppkg”

This package will be uploaded to the app catalog which we configured earlier and then deployed and added to SharePoint sites.

Notes:

In your SPFx project, ensure that the includeClientSideAssets attribute in the package-solution.json file is set to true:

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "your-solution-name",
    "id": "your-solution-id",
    "version": "1.0.0.0",
    "includeClientSideAssets": true
  }
}

After deploying and adding the web part to page, you will see that all the assets are loaded from  /sites/AppCatalog/ClientSideAssets/

Resources: