SharePoint Framework with the extension
I tried to create SharePoint Framework with the extension provided
by SharePoint PnP. It is very easy to create a SharePoint Framework Web Part in
Visual Studio.
Developer need to first fulfill the Pr-requisites
- Set up your Office 365 tenant
- Set up your development environment
- Install the extension in Visual Studio:
- Download the .vsix file from the repo Releases page or from the Visual Studio Extension Gallery
- Ensure Visual Studio is closed
- Double-click on the downloaded .vsix file
- Follow the installation prompts
- Restart Visual Studio when the installer has completed
After installation of these pre-requisites , You will be
ready to create new Web Part with SharePoint Framework. Here is simple steps to
create a small web part:
Open Visual Studio 2015 / 2017 & Create new project.
Here you need to go to the SharePoint templates category and then select SPFx
Web Part Project.
You must provide solution name & Project Name. This
solution name will be shown in next dialog box. Now hit OK.
Now one new form will be popup. Here you have to select
Framework, Put Component Name, Component Description and at last a check box .
Here we have option “none, react, knockout “. You can choose
any of these .By default Framework will be none & you can use any JavaScript
framework later on.
At last you have to just hit “Generate” button. It will take
a while to create new project with the Web Part with SharePoint Framework.
After creating the project, it will also show you the log file.
Now how to run this project without making any changes . Juts
press F5 key to run this project.
F5 command will launch the demo in command prompt with “Gulp
Serve” command. You can also modify this command. If you want to change this
command , Right click on your project & then go to “Properties”. In the
Properties pane, go to Debug, Here you can modify command parameter for gulp.
Now lets run this project in local workbench first. Just hit
F5. Gulp task will start & run the workbench.
Here is our web part. Now you just need to click on this web
part to add in this page. It will look like :
It is very easy.
Url for local workbench : https://localhost:4321/temp/workbench.html
Url for SharePoint Online workbench : https://<<SiteUrl>>/_layouts/15/workbench.aspx
Comments