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.