Today I am going to walk you through scaffolding up your first SPFx web part. If you are new to SPFx and still need to setup your development environment you can check out this post: Setting up your SPFx development environment.

This post will be the first among a series taking you through the journey of building an event-calendar SPFx web part. Without further ado lets jump right into it.

Creating your first SPFx project

  1. Launch PowerShell and navigate to the root folder you would like to store your SPFx project, for me that would be cd E:\SPFx\aepBlog.
  2. md event-calendar (creates a new directory called event-calendar)
  3. cd .\event-calendar (navigates to that new directory)
  4. yo @microsoft/sharepoint –skip-install (runs the yeomen generator but skips the npm install)

Follow the instructions via the Yeoman SharePoint generator so that it can scaffold up the project correctly. Here is a list of the options I filled out:

  • Solution Name: event-calendar
  • Baseline Packages: SharePoint Online only (latest)
  • Where do you want to place the files: Use the current folder
  • Allow tenant admin the choice to deploy to all sites: y
  • Will the solution need to access web APIs: y
  • Which type of client-side component: WebPart
  • Web Part Name: EventCalendar
  • Web Part Description: Display events from a calendar list.
  • Framework: React
SPFx Event Calendar SettingsSPFx Event Calendar Settings

Familiarizing yourself with the project

Since we skipped the npm package installation process the yeoman generator should finish quickly. After it is done you can type code . into PowerShell to open the current directory.

You can now run npm install and get all the packages installed. You can run this command from the integrated terminal in Visual Studio Code, if you do not see the terminal simply press CTRL + ` and it should appear.

npm installnpm install

Installing Webpack Bundle Analyzer

The next step we will take is to install the webpack-bundle-analyzer package. This will give us a graphical representation of our bundled package size by JavaScript library. This is super helpful when optimizing your web part.

Type the following command into the terminal:

bash
npm install webpack-bundle-analyzer –save-dev

We place the –save-dev command so that it is added to our development dependency packages and not our production dependency list.

After the package is installed we need to modify the file: gulpfile.js so that the gulp bundle task knows to run the webpack bundle analyzer and where to place the output. You can replace the contents of the gulpfile.js with the following:

javascript
"use strict";
const gulp = require("gulp");
const path = require("path");
const build = require("@microsoft/sp-build-web");
const bundleAnalyzer = require("webpack-bundle-analyzer");
build.configureWebpack.mergeConfig({
additionalConfiguration: (generatedConfiguration) => {
const lastDirName = path.basename(__dirname);
const dropPath = path.join(__dirname, "temp", "stats");
generatedConfiguration.plugins.push(
new bundleAnalyzer.BundleAnalyzerPlugin({
openAnalyzer: false,
analyzerMode: "static",
reportFilename: path.join(dropPath, `${lastDirName}.stats.html`),
generateStatsFile: true,
statsFilename: path.join(dropPath, `${lastDirName}.stats.json`),
logLevel: "error",
})
);
return generatedConfiguration;
},
});
build.initialize(gulp);

After you modify the gulpfile.js make sure you save it. For more information on optimizing SPFx web parts for production you can check out: Optimizing SharePoint Framework builds for production.

Creating a Trusted Development Certificate

Now that we have all our packages installed and our gulpfile.js configured for the webpack bundle analyzer we are almost ready to look at our web part. Before we can launch our local host workbench and deploy our web part, we must run the command:

bash
gulp trust-dev-cert

The local server that is spun up during testing uses HTTPS by default and uses a self-signed SSL certificate that is not trusted and the following gulp task will trust that certificate. Don’t worry though because you can untrust the dev-cert at any point by running the following command:

bash
gulp untrust-dev-cert

Build / Deploy Event Calendar web part to Local Host Workbench

Every SPFx web part built with the Yeoman SharePoint generator comes completely functional out-of-the-box with boiler plate code. With everything installed and the development certificate trusted w are now ready to see what our web part looks like.

Type the following command: gulp serve to spin up the local host workbench for us to deploy our web part into.

A new tab should open in your browser to the Office 365 SharePoint workbench. From here you can click on the + and then our web part, Event Calendar, to deploy it to the page.Once deployed you will see the boiler plate code within the web part that comes from the SharePoint Generator.

Event calendar web partEvent calendar web part

Next Steps

In the next blog post we will grab some sample data and wire up the web part to pull in that data so we can start to build the front end of our Event Calendar web part. If you do not have an Office 365 tenant to publish and test the web part in you can sign up for your own developer tenant following this blog post: Setting up an Office 365 developer subscription.

AaaS - Anthony as a Service