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. 

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

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

Step 2

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

Step 3

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

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

Step 5

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

Gulp package-solution –ship

Step 6

Package file is ready at the below location.

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. 

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

Step 9

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

Modern Page:

 

Classic page

Add webpart on classic page.