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
Lets see detailed view about all those commands,
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
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?
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.
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?
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.
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.
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.