Steps To Create Basic SPFx Solution And Deploy On SharePoint Online

Here, I have described how to develop a simple SPFx application and deploy it in SharePoint online.

Here, I have described how to develop a simple SPFx application and deploy it in SharePoint online. 

Note

The environment should be ready with the required components installed. For more details, refer to this article Set up your SharePoint Framework development environment

Step 1

Open the command prompt and select the directory where you want to create solutions. Here, I have created the below directory.

Folder location

SharePoint

Run the following command for creating an application. It’ll ask to fill in the required inputs.

Note

No JavaScript framework means, it is default to TypeScript.

yo @microsoft/sharepoint

SharePoint

Step 2

On successful execution of command, SPFx solution is ready to use with the below screenshot. 

SharePoint

Step 3

Now, the solution is ready and we can customize the solution by opening it in Visual Studio Code.

SharePoint

Step 4

After changes in the solution, run the below command for bundling your solution.

Note - Here, I have not modified anything in the solution.

Gulp bundle --ship

SharePoint

Step 5

Now, run this command, which will create .sppkg file of your solution.

Gulp package-solution –ship

SharePoint

Step 6

Package file is ready at the below location.

SharePoint

Step 7

Upload your package file in App catalog. At that time, you will get a pop up; it asks for your web part available for all the sites of this tenant. Tick the checkbox and click to Deploy. 

SharePoint

Step 8

For testing, open workbench.aspx. This is the default page and it is available in the file system. Here, you can get your web part.  However, you can also add your webpart in your modern page as well as a classic page.

Path

https://<SharePoint.tenanat>/Site/<SiteName>/_layouts/15/ workbench.aspx

SharePoint

Step 9

Select your webpart on the page. It’ll be displayed as below.

Modern Page:

SharePoint
 

Classic page

Add webpart on classic page.

SharePoint

SharePoint