In the series of SPFx tutorials, we are going to learn how we can create our first SPFx webpart step by step.
Create a new web part project
- Create a folder in your local machine either using file explorer or command prompt.
- In my case, I have created a folder named helloworld-webpart in my C drive
- To create a folder using command promt, run below command
md helloworld-webpart
- Once the folder is created, navigate to the folder by using below command
cd helloworld-webpart
Run Yeoman SharePoint Generator
- Yeoman SharePoint generator used to scafold your SPFx webpart. Scafolding means, generating a folder structure that contains necessaory files and folders to start with SPFx webpart.
- Create a new HelloWorld web part by running the Yeoman SharePoint Generator
yo @microsoft/sharepoint
- You will be promted to enter some information related to your webpart as below
a) What is your solution name? Hit enter to keep the default name which is hellowworld-webpart
b) Which platform you need to use? Select SharePoint Online and hit enter
c) Use the current folder
d) Select N to allow the solution to be deployed to all sites immediately.
e) Select N on the question if solution contains unique permissions
f) Select Webpart component
g) Enter webpart name? Hit enter to keep the default
h) Enter description: hit enter to keep the default
i) Select framework: we will go with widely used framework which is React - Once the scaffolding is done, you will see a message as below
Install the developer certificate
- Developer certificate has to be installed ONLY once in your development environment, so you can skip this step if you have already executed that in your environment.
- To install the developer certificate use below command
gulp trust-dev-cert
Preview your web part
- You can preview your webpart using below command
gulp serve
- When we run this command, it will create a local, node-based HTTPS server on your machine.
- Local workbench will open in your default browser and you can see a dummy SharePoint modern page where you can add a web part
- Click on add button and select the hello world webpart
Preview web part in SharePoint context
- To preview the hello world web part, open the below link in your browser
https://yoursharepointsite.sharepoint.com/sites/testsite/_layouts/15/workbench.aspx
0 Comments