The SharePoint Framework (SPFx) is a “page and web part model” that provides full support for client-side SharePoint development. With the SharePoint Framework, you can build apps in SharePoint using modern web technologies and tools in any development environment. The SharePoint Framework works for SharePoint Online and also for on-premises installations of SharePoint 2016 (Feature Pack 2) and higher.
This blog will discuss a few critical steps for getting your SPFx deployed to production. We’ll cover how to package the solution, how to add logging for your solution, how to debug your code even while in production, and finally, how to properly package and deploy updated versions of your solution.
Initial Deployment
After testing your SPFx solution, prepare it to go to SharePoint Online by using Gulp:
gulp package-solution --ship The “--ship" flag tells gulp to package the solution for use in production and not rely on the workbench. This includes additional steps such as webpack, which will minify and optimize your code for hosting in SharePoint Online.
Copy your sppkg file to the App Catalog in your SharePoint Online environment and select “Deploy.” If done correctly, your target will be “SharePoint Online.”
Logging
First make sure that PnPJS Logging is installed:
npm install @pnp/logging
Next, add it as required in your project:
import { Logger, LogLevel, ConsoleListener } from "@pnp/logging";
Then initialize the Logger:
Logger.activeLogLevel = LogLevel.Info; Logger.subscribe(new ConsoleListener());
Now you have logging actions available that will log to the console. This is extremely helpful when debugging your SPFx solution. You can call the logger with the following command(s):
Logger.write('log a simple message'); Logger.write("log a message and specify log level", LogLevel.Error);
The above example of logging an error to your browser console would look like this:
This logging comes in handy for monitoring your application without alerts or for manually stepping through your code.
Debug in Production
If you’re encountering issues with your SPFx web part and want to see what exactly is going on in production, it’s actually possible to debug your code in production. Typically, this would not be possible after webpack minifies your code. In order to start debugging, add the following string to your querystring:
loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js
This will cause a prompt, asking if you want to load these scripts:
Click “Load debug scripts” and make sure “gulp serve” is running locally or else you’ll receive this error:
This will now allow you to step-through your code in production to help track down what might be going on. There’s a catch with this. If you strip out these new querystring values, the debugging will not end. In order to stop SPFx from loading your local files, you need to reset it with this querystring value. Otherwise, you will continue to get the “Allow debug scripts?” prompt.
&reset=true
Updating SPFx Solutions
Initially, to get your solution ready to deploy to SharePoint Online, you only need to execute the command “gulp package-solution –ship.” But updating your solution requires a few more commands.
In your command window at the root of your solution, execute the following commands in order:
gulp build gulp bundle --ship gulp package-solution --ship
This will produce a new sppkg file that contains all your recent updates. The first two commands are critical in ensuring your solution includes all of your latest files. By skipping the first two commands, gulp will package your initial build. Make sure not to miss these steps when pushing your changes to production.
Recap
This article covered how to package your SPFx solution for deployment and how to ensure subsequent repackaging includes all of your changes. The PnPJS logger will also help you understand the timing and execution of your code and, if needed, you can step-through your code, even in production. Hopefully this article helps you with your next SPFx deployment. But if you still have questions, please don’t hesitate to reach out to us. We’d love to help you get started.

Rick Wise
Senior Consultant
Rick Wise is a Senior Consultant at Anexinet with over 15 years of IT experience. Rick has a passion for building systems to automate and streamline business processes and has designed and implemented countless SharePoint and Office 365 solutions for the defense, insurance and utility industries.
Let’s get the conversation started
Reach out now to begin your digital transformation
+ 16,659
ZOOM MEETINGS
+ 9,789
HAPPY CLIENTS
+ 5,075
FINISHED PROJECTS
+ 133,967,432
LINES OF CODE
© 2000 - 2021 Anexinet Corp., All rights reserved | Privacy Policy | Cookie Policy
This website uses cookies
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL cookies.
Manage consent
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie | Duration | Description |
---|---|---|
cookielawinfo-checbox-analytics | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics". |
cookielawinfo-checbox-functional | 11 months | The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional". |
cookielawinfo-checbox-others | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other. |
cookielawinfo-checkbox-necessary | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary". |
cookielawinfo-checkbox-performance | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance". |
viewed_cookie_policy | 11 months | The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data. |
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.