SharePoint Framework (SPFx) - Step by Step

Fundamental Building blocks of SharePoint Framework

The following are the important software required for creating SPFx

1. Node JS ( to write node based project)
2. npm package ( these are the pre-written library for node based project )
3. Webpack ( to bundle the code and move to production)
4. Yeoman (a Code generation tool :- used to generate project structure, - find new template)
5. Gulp JS ( Task runner - web server )

Create your first SharePoint Framework WebPart

Step 1 : Install Node JS from https://nodejs.org 
Step 2 : Install npm Package from  https://www.npmjs.com/
              cmd: npm install -g npm ( - g : installing globally )

Now we can start creating node projects which is npm based
Lets Install Yeoman a code template generator tool

Step 3 : cmd: npm install -g yo  https://yeoman.io/

Then we need to install Gulp JS https://gulpjs.com/

Step 4 : cmd: npm install -g gulp

Lets create our new project - SPFx Webpart

Step 5 : cmd: md helloworld webpart
             cmd: cd helloworld webpart

Step 6 : cmd: yo @microsoft/sharepoint
Step 7 : cmd: gulp serve

Now, you can able to view the webpart in a browser, displaying from a localhost server 

Step 8 : To Edit the webpart, open the project folder in Visual Code, and inside the folder "src", there will be a typescript file created, like "helloworldwebpart.ts", which we need to edit as per our requirement. 

To deploy the webpart in production, we need to create a package and push it in the app catalog of the destination production site.

Lets create the package file 

Step 9 : cmd: gulp package-solution -ship

Now, the package file "helloworld-webpart.sppkg" has been created inside the solution folder, under the sharepoint folder inside our project folder.

Step 10 : Open your SharePoint site in a browser and go to the app catalogs page, https://sitename.com/site/appcat

Lets upload or drag & drop our sppkg file in this document library. 

Step 11 : Lets Open the site or subsite where you want to add our new webpart, click on "Add an App", now you will be able to find our webpart in the list.

Step 11 : Lets Open the site or subsite where you want to add our new webpart, click on "Add an App", now you will be able to find our webpart in the list.
Step 12 : Go to the page where you want to display your webpart, and click on insert webpart, under the underdevelopment category, you can find our helloworld webpart. which you can save and it will work.

Note: Update the "write-manifest.json" , with the CDN (Content delivery network )URL, where you want host your code