BlogPost

Part Three - Setting a SharePoint Framework project using the Yeoman template and running Gulp to serve up the pages

Part Three - Setting a SharePoint Framework project using the Yeoman template and running Gulp to serve up the pages



In Part three we are going to build the hello world example webpart with the Yeoman template builder and then run Gulp to serve up the page… if you missed the previous posts on how to install the development tools please click here to do so before you start



Step One

Create a directory





Step Two

Navigate to that directory





Step Three

Start the Yeoman generator

This will need to be install so if you missed the previous posts on how to install the development tools please click here





What is your solution name - press enter





Where do you want to place the files? - press enter





What is your webpart name? - press enter





What is your webpart description? - press enter





What framework would you like to start with? We will use No JavaScript framework





This has created the scaffolding of our solution, this will create the solution structure , the initial files and folders so that we can start to play...





This has created the scaffolding of our solution, this will create the solution structure , the initial files and folders so that we can start to play...




Step Four

Open Visual studio Code

This will need to be install so if you missed the previous posts on how to install the development tools please click here





Step Five

gulp serve

Back to the command line and lets start gulp serve






Gulp server is going to compile the typescript code into the JavaScript code, then is will start a browser and execute our webpart in the context of our local workbench, This is amazing as it is running in an offline mode and we don't have to deploy to the SharePoint until we need to start interacting with it.







To add the webpart that we have deployed we can click on the +




And add the helloworld web part






Save the page and continue on...







Step Six

Running the workbench.aspx

We can now go to workbench.aspx hosted in SharePoint Online. The full URL is https://your-sharepoint-site-url/Shared%20Documents/workbench.aspx.

By default, your browser is configured not to load scripts from localhost. Workbench will notify you if that is the case as shown in the Screenshot. This is due to loading scripts over HTTP while connected to a page via HTTPS.





By default, your browser is configured not to load scripts from localhost. Workbench will notify you if that is the case as shown in the Screenshot. This is due to loading scripts over HTTP while connected to a page via HTTPS.





You may want to try using the Chrome browser.

To execute local scripts, in the Chrome browser, click the grey shield in the right side of the address bar to load unsafe scripts, as shown in the Screenshot.






In the next few posts we will look into the webpart and properties in a bit more detail.