Provision SharePoint assets in SharePoint Framework

 

 

 

 

Suggested Articles

 

What is SharePoint Framework (SPFx)

Future prospects of SharePoint Framework (SPFx)

Required tools and libraries for SharePoint Framework (SPFx) development

Setup Office 365 tenant for SharePoint Framework development

Setup SharePoint Framework client side web part development environment

Build SharePoint client side web part using SharePoint Framework (SPFx) – I

Build SharePoint client side web part using SharePoint Framework (SPFx) – II

Build SharePoint client side web part using SharePoint Framework (SPFx) – III

How to Debug SharePoint Framework Solutions in Visual Studio Code

What is the Developers Point of View on SharePoint Framework

What is Required Toolchain for SharePoint Framework

How to Integrate gulp tasks with SharePoint Framework Toolchain

 

It is a continuation of previous articles on SharePoint Framework, if you’ve missed it. I recommend you to first walkthrough the links provided above in suggestion.

 



 

Now, open existing project in Visual Studio Code.

 

provision-sharepoint-framework-assets-1

 

Right click on sharepoint folder and add a subfolder “assets”. In “assets” folder, add an XML file named as “element.xml”.

 

provision-sharepoint-framework-assets-2

 

This file contains CAML based declaration to create list instance in SharePoint.

 

provision-sharepoint-framework-assets-3

 

Now, select “package-solution.json” under config folder and add “element.xml” entry.

 

provision-sharepoint-framework-assets-4

 

After saving above file, run below command.

gulp bundle –ship

 

provision-sharepoint-framework-assets-5

 

SharePoint Framework supports two types of builds, which are a debug build and a release build. Both are triggered, using the Gulp bundle task.

 



 

If you request a release build, using the gulp bundle –ship command. SharePoint Framework will generate optimized bundles and copy them to the temp/deploy folder.

 

provision-sharepoint-framework-assets-6

 

Once we run the commands given above, then get the bundle file from your project folder, open your project folder – temp – deploy.

 

provision-sharepoint-framework-assets-7

 

In deploy folder, copy all the files and add in SharePoint library path or CDN, which you mentioned in write-manifests.json file in the project.

 

provision-sharepoint-framework-assets-8

 

Once you completed the steps given above, upload the app in an app catalog and install in your SharePoint site.

 



 

Get .sppkg file from <project folder> – sharepoint – solution – <helloworldsample-webpart.sppkg>

 

provision-sharepoint-framework-assets-9

 

Inside solution folder, copy the .sppkg file and upload it in an app catalog.

 

provision-sharepoint-framework-assets-10

 

After you uploaded the app file, you will get the pop up, as shown below and click Deploy to trust the client side Webpart.

Now, install the app using the option “add an app” Site Contents. You will see that new list is created automatically.

 

provision-sharepoint-framework-assets-11

 

Add the client app part in your pages or modern site pages.

 

provision-sharepoint-framework-assets-12

 

provision-sharepoint-framework-assets-13

 



 

What’s next?

In this article, we have explored how to take the build for client side Web part and deploy the Web part in SharePoint Online. Similarly you cane provision other SharePoint components using SharePoint Framework (SPFx).

 

Thank you for reading…

Please like, share and subscribe!

 



 

 

 

 

 

THREE QUERIES is SharePoint, front-end, back end web technologies and project management resource that helps developers, artchitect and managers at all levels to improve their performance. We provide an important knowledge base for those involved in managing, architecture and developing projects of all kinds. With weekly exclusive updates, we keep you in touch with the latest SharePoint, front-end, back end web technologies and project management thinking.

WE ARE CONNECTED ~ Follow us on social media to get regular updates and opinion on what's happening in the world of SharePoint, front-end, back end web technologies and project management. If you like this article, please share it and follow us at Facebook, Twitter, Instagram, Pinterest and LinkedIn

About Satyendra Mishra

Microsoft certified, motivated, energetic and accomplished SharePoint Consultant and Architect with 13+ years of work experience in Management, Architecture, Analytics, Development and Maintenance. I have been fortunate to be a part of over 20+ Web/Mobile/Software SharePoint and .Net projects delivery with various companies across different industry sectors. This has provided me a valuable insight and experience especially in successful implementation of technology solutions. Having very strong System Architecture, Technological, Management & Analytical Skills, Knowledge of Office 365, SharePoint, .Net, JavaScript, React, Angular, Azure, SQL. In 2016, he decided to start sharing the knowledge back to society in the form for content writing and blogging. LinkedIn : https://www.linkedin.com/in/satyendram/
View all posts by Satyendra Mishra →

Leave a Reply

Your email address will not be published. Required fields are marked *