Published: 9 June 2017
This is the second post in the SharePoint Framework Development series, In the earlier article we saw how to set up the environment and the tool chains required to start the development using SharePoint Framework(SPFx). Lets create a simple Hello World Web part using TypeScript and explore the project structure of SPFx.
moving forward, ensure that the SharePoint Framework development environment is
ready. Spin up Node.js command prompt using which we will be creating the web
part project structure
We can create the directory where we would be adding the solution using the below command:
Let’s move to the newly created working directory using the command:
We will then create the client web part by running the Yeoman SharePoint Generator:
This will display the prompt which we will have to fill up so as to proceed with project creation,
● What is your solution name? : Accept the default client-web-part-hello-world as your solution name and choose Enter.
● Where do you want to place your files : Use Current Folder
● What is your webpart name: Go on and press enter to accept the default Web part name as HelloWorld
Press enter to accept the default Web part description as HelloWorld description
Yeoman has started working on the creation of the project strucure. It will install the required dependencies and scaffold the solution files for the HelloWorld web part which will take some time to complete. Once completed, we will get a Congratulations message.
To test the client web part, we can build and run it on the local web server where we are developing the web part. SharePoint Framework development uses HTTPS endpoint by default. Since a default certificate is not configured for the local development environment, our browser will report a certificate error. The SharePoint Framework tool chain comes with a developer certificate that we can install for testing client web parts locally. From the current web part directory, run the below command:
on Yes to install the certificate.
Now, let’s preview the web part by running the gulp serve command. This command will execute a series of gulp tasks and will create a Node-based HTTPS server at 'localhost:4321'. It will then open the browser and display the client web part.
SharePoint Workbench is a developer design surface that enables us to test the developed client web parts without deploying them directly to SharePoint. It provides a client-side page to which we can add the created web parts.
Thus, the SharePoint Workbench has opened in the browser but there are no visible web parts. So, let’s go ahead and click on the Plus sign.
It will give us the option to add the Hello World web part that we have created recently.
clicking it, the web part will be added to the page. The web part contains few
We can edit the description property directly from the UI as shown below. However, if we want to edit this web part to add more details and functionality, we must go back and terminate the gulp server command.
To stop Gulp from listening to the process we can press ‘Control + C’. This will terminate the Gulp Serve command and stop the server.
Now, let’s try to edit the web part and add more functionality to it. To do that, navigate to ‘src\webparts\helloWorld’ location using CD command.
Run ‘Code .’ in the console which will open up the Visual Studio Code editor window.
On clicking save Gulp will rebuild the web part project as shown below.
Again, running ‘gulp serve’ will display the updated web part in the browser. This time it will display the alert message as well.
So far we were testing the web part in SharePoint Workbench locally, now let’s try to test it within the SharePoint Context. SharePoint Workbench is also hosted in SharePoint Online to preview the web part. It can be accessed by adding ‘ _layouts/15/workbench.aspx’ to the SharePoint Online URL.
Expand the Plus sign and add the Hello World web part.
The web part has triggered the alert message in the page indicating successful hosting of the web part within SharePoint.
Thus we saw how to create a simple Hello World Web part using SharePoint Framework. In the next post we will see how to use SharePoint Framework to create a web part that retrieves and displays SharePoint List Items.
Priyaranjan is a SharePoint Consultant and Microsoft MVP with 10 years experience in developing and deploying SharePoint Applications.He has worked on various SharePoint iterations starting from MOSS 2007 through SharePoint 2016 and Office 365. He is a frequent contributor at Microsoft TechNet and has won 33 Gold Medals in various TechNet Wiki Guru Monthly Competitions.As a token of appreciation for the TechNet community activities, he was interviewed by Microsoft Program Manager,Ed Price. He has also published 300 Articles and 4 SharePoint Ebooks in different technical communities.You can find his Microsoft TechNet contributions here