Fundamental Building blocks of SharePoint Framework
The following are the important software required for creating SPFx
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
The following are the important software required for creating SPFx
- Node JS ( to write node based project)
- npm package ( these are the pre-written library for node based project )
- Webpack ( to bundle the code and move to production)
- Yeoman (a Code generation tool :- used to generate project structure, - find new template)
- 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
