Written by

Jayakumar Balasubramaniam

Share

  

Category

see all categories
intranet as a service

How to create and deploy SharePoint Framework (SPFx) webparts with simple commands

This article demonstrates how to build your first SharePoint Framework with simple commands and how to deploy it to go live instantly. Before start with make sure you have the development environment ready by following official Microsoft SPFx documentation.

List of Commands

We are going to use below three commands to get our first SPFx web part ready to go live, if your environment is ready as said in official documentation.

1. yo @microsoft/sharepoint. 
2. gulp bundle –ship
3. gulp package-solution --ship 

Let’s see detailed view about all those commands,

Command one:

yo @microsoft/sharepoint  -  this will create a SPFx project for you with all the default settings and dependencies. While executing this command it will ask you to answer some questions which is listed below

             What is your solution name? (just give the name as per your context)

            Which baseline packages do you want to target for your component(s)?

                        Choose any option based on your requirement

Leaderboard_CDR

 

            User the current folder or create a new subfolder? again it depends on your context

            Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? Enter y so that the app will be deployed to all the sites instantly and accessible everywhere.

     Which type of client-side component to create?

                        Choose WebPart, Please refer this blog to create SPFx extensions.

             What is your web part name? (just give the name as per your context)

             What is your web part description? (just give the name as per your context)

             Which framework would you like to use?

                        Choose No JavaScript Framework, so  there is no dependencies you can integrate any client side framework as per your requirement I do it with Angular and explained here.

Once you hit enter at the last question it will install all the node dependencies required for the project and it will take 3-10 minutes based on your network speed.

Command two:

gulp bundle --ship  -  this command will help us to bundle all the typescript files and it’s dependencies from node_modules into a single JavaScript compiled file.

Initially, the compiled typescript files are converted into JavaScript files and saved in lib folder and then from there the final bundle file will be saved in a folder called temp/deploy.

Command three:

gulp package-solution --ship -  this command will help us build the installation file I mean. sppkg file.

Make sure to mark the includeClientSideAssets as true in package-solution.json, this will help us to use Office 365 CDN.

Once you run this command .sppkg file will be created in the sharepoint folder under the project directory and the bundle file which has been generated after executing the command two is referred in the .sppkg file. So, every time when you run the command two you have to run the command three also to take your changes live and deploy the app.

Time to Deploy:

To deploy the SPFx webparts and go live, push the package file (.sppkg file) in appcatalog (If there is no appcatalog, please contact your administrator to create one).

When you push it to the appcatalog you will be prompted with below popup,

SPFx webparts

Make sure to choose the checkbox in the highlighted section so your webpart will be globally available to all the site in the tenant. So, you no need to install the app specifically in the sites to add it as a webpart in the pages.

Where to Host SPFx app assets?

Don’t worry about hosting the Bundled JavaScript file obtained from the command 2 and other CSS/images. Microsoft has given options for that as well. Convert your office 365 tenant as public CDN so with zero cost you can host your files in your tenant itself. Please refer this official documentation to host your client side webpart from office 365 CDN.

Now go ahead and create a modern page from Site Contents and you will a get a screen like below. Click the plus icon at the centre to list down the available apps that can be added in the page, where you can find your webpart as well.

Name your page

Annoyed about the small app listing pane? don’t worry we have got update for that also in office 365. Did you notice the yellow colour highlighted expansion icon in the above image? Yes, click on that to get the Maximized screen of the app listing pane like below and use search filter to find your app and install in the page.

Search

In this article, we have discussed creating SPFx apps with simple commands and detailed explanation about those commands. Also, we have seen how to deploy the SPFx apps and go live in matter of time. If you want to integrate SPFx with angular please my another blog for the same.

If you have any questions/issues about this article, please let me know in comments.

Jayakumar Balasubramaniam

Written by Jayakumar Balasubramaniam

A technology evangelist working on Microsoft 365, SharePoint & Azure. Gets my hands dirty with latest and greatest of SharePoint, Azure & front-end frameworks. Currently working with “Hubfly – A unified digital workplace” as a Product Engineer. Getting in to the depth of the domain & technology, with my eyes for perfection, ensures that the product releases go right every time.