Skip to main content

How to deploy SPFX webpart in to SharePoint O365 site

Let us assume we have spfx webpart running in our local host.

How to deploy SPFX webpart in to SharePoint?

1. Stop the gulp serve which will stop running the local host

2. Unlike in the Workbench, to use client-side web parts on modern SharePoint server-side pages, you need to deploy and register the web part with SharePoint. First you need to package the web part.
  1. Open the MyCustomWebPart web part solution in Visual Studio Code, or your preferred IDE.
3. In the console window, enter the following command to package your client-side solution that contains the web part.

Run "gulp package-solution"

The command creates the package in the sharepoint/solution folder: webpartname.sppkg

The package uses SharePoint Feature to package your web part. By default, the gulp task creates a feature for your web part.
You can view the raw package contents in the sharepoint/debug folder.
The contents are then packaged into an .sppkg file. 
4. Now open you "Appcatalog" site URL
Note: If you do not have AppCatalog, Click here to know how to create AppCatalog to proceed further.
5. Open library "Apps for SharePoint"
6. Upload the .sppkg file and click deploy.
7. Now open your site, click on "Add an app".
8. You can see you webpart name, click on it.
9. Now go to "SitePages" and add the webpart from "others".
Note: You can see error in webpart
10. Now try running 
gulp serve --nobrowser
This webpart which is hosted in sharepoint will work only until gulp serve --nobrowser command is running in local. Since we are just packaged the solution and running with our localhost in SharePoint.
11. In order to deploy in SharePoint completely, along with Javascript, CSS and other assets to be packaged with "--ship" option in the command.
For the purpose of completely deploy webpart in SharePoint, run the below commands.
gulp bundle --ship
gulp package-solution --ship
Now under sharepoint folder -> .sppkg file is packaged with assets.
12. Now again, upload the new .sppkg file in to AppCatalog site of "Apps for SharePoint" library.
Note: if the file already exists, replace it
13. Now refresh the created sitepage, you can see the webpart working.


Labels:

Comments

Post a Comment

Popular posts from this blog

Powerapps overcome 2000 item limit from any datasource

First go through delegation concept https://tejasadventure.blogspot.com/2020/05/power-apps-understanding.html In powerapps, we observe by default 500 item limit has set with in the app level for any data source. In order to overcome, we have option to set the limit of 2000 item limit maximum in the app. Now using code, MaximoFacility is my data source name contains 3000 items. ColFacilityDropdown is the collection storing the count of items from data source. We expect to see more than 2000 items. Based on StartWith function filtering the data with respective to the charectors and numbers as mentioned below. Code: Place the below code in a button on select property. Add label with code CountRows(ColFacilityDropdown) ClearCollect(ColFacilityDropdown,Filter(Filter(MaximoFacility, Status = "ACTIVE"), StartsWith( Title, "A" ))); Collect(ColFacilityDropdown,Filter(Filter(MaximoFacility, Status = "ACTIVE"), StartsWith( Title, "B" ))); Collect(ColFacilit...
Post a Comment
Read more

Power Apps Understanding

https://tejasadventure.blogspot.com/2019/10/power-apps-we-have-1.html https://tejasadventure.blogspot.com/2019/11/power-apps-how-to-configure-using-blank.html   https://tejasadventure.blogspot.com/2019/11/power-apps-field-controls.html Report We can use people picker fields, look up fields  file attachment back next save cancel download the report and this report can be used in other system of powerapp. Add new report button - asks add from existing report Report all item view can design in the way like sharepoint list views for example. we can group it Group AND or Group OR by apply filters Canvas apps: Arrange user experience and interface design allow creativity and business use case guide how the way app wants to look like. Sources can be around 200+ ways. Majorly SharePOint, Power BI From data, From Sample From CDS From blank canvas via appSource Model driven apps: Model driven apps uses power of CDS rapidly to configure your for...
Post a Comment
Read more

PowerApps multiselect cascading dropdown and save an item to SharePoint List

 I have one scenario as below List 1: Division List has title field List 2: District List has Title and Division Field(LookUp from Division List) List 3: Facility List has Title, District Field(LookUp field from District List) List 4: County List has Title, Facility Field(LookUp field from Facility List) Main List: Spill Report is the main list  Division Field( Look up from Division List) District Field(Look up field from District List) Facility Field(Look up field from Facility List) County Field(Look up field from County List) List Screenshots provided below can be refered for clarification. ----------------------------------------------------------------------------------------------------- PowerApps Canvas Apps In Power Apps Canvas App, We need to first design the app with the 4 respective fields Since those fields are multiselect, then it is to combo box. Generally power apps are not supported for multiselect cascasding dropdown. Refere microsoft documentation, Know Limit...
Post a Comment
Read more