This article demonstrates how to build your first SharePoint Framework with simple commands and how to deploy it to go live instantly. Before starting, make sure you have the development environment ready by following official Microsoft SPFx documentation.
List of Commands
We are going to use the below three commands to get our first SPFx web part ready to go live, if your environment is ready as said in official documentation.
- yo @microsoft/sharepoint
- gulp bundle –ship
- gulp package-solution --ship
Let’s see detailed view about all those commands.
Command one
yo @microsoft/sharepoint - this will create an 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
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
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,
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 center to list down the available apps that can be added to the page, where you can find your webpart as well.
Annoyed about the small app listing pane? Don’t worry; we have got an update for that also in Office 365. Did you notice the yellow color 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 the search filter to find your app and install in the page.
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 a 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.