Blog written by:
Dhaval Shah
SharePoint & .Net Consultant
Intro
In our previous article we have configured your development environment to get started with the SharePoint Framework. If you have not configured it yet, you can find the detailed steps to configure your development environment from here. In this article we will start creating the new your first client side web part. We will fetch the announcements from the SharePoint list and display in our web part.
Create your SharePoint Framework Client Side project using Yeoman
Open the command prompt as an administrator and execute the below command
| mkdir spfx-announcement
cd spfx-announcement |
Now we will create our project structure using yeoman SharePoint framework template
Execute the below command to create a SharePoint framework client side web part project,
| yo @microsoft/sharepoint |
It will launch a series of question used to configure the project template
- What is your solution name? spfx-announcement
- Where do you want to place the files? Use the current folder
- What framework do you like to start with? No javaScript web framework
- What is your webpart name? Announcement
- What is your webpart description? Description for your webpart
Once you press enter, it will create the folder structure and download all the dependencies for the SharePoint Framework. It will take a while to create the project structure.
In the end you will see the below success message,
Execute the below command to open the folder in the visual studio code.
In Visual studio code, you will see all the files created for your project.
Test your web part in Local Workbench
Install Developer Certificate
The client-side tool chain uses HTTPS endpoint by default. However, since a default certificate is not configured for the local dev environment, your browser will report a certificate error. The SPFx tool chain comes with a developer certificate that you can install for building web parts.
Execute the below command in your project directory.
| gulp trust-dev-cert |
It will launch a dialog, to trust the certificate click on ‘yes’
Now once the certificate is deployed successfully as shown above, we will build the web part using the gulp task which will run series of tasks to compile and bundle the web part files and launch in the local workbench.
After successful launch it will launch the web part in a browser. You can see the new web part on the page by clicking on + button
Once you have added the web part it will look like below,
With the gulp command running in background, you can make live changes to the web part and see it in the browser automatically. So you do not have to compile it every time you make changes to the web part.
We have successfully created the simple web part in this article. In our next article we will continue creating announcement web part. Stay tuned !
View his professional profile on linked in
https://www.linkedin.com/in/dhavalshah27/
- SharePoint Metadata - October 8, 2018
- SharePoint Permission Levels - August 29, 2018
- How to Create multiple SharePoint Sites using PowerShell and XML template? - September 5, 2017