'gulp serve' command opens SharePoint Framework workbench in a blank screen

Question

I'm trying to build a simple client-side web part using new SharePoint Framework with the help of OfficeDev Site. I've installed all the required components mentioned in OfficeDev

After the installation, when I enter 'gulp serve' command to run the webpart, It opens SharePoint Workbench in the browser But with blank white screen.

Any one encountered the same issue?

UPDATE:

I've uploaded the screenshot of gulp output and the blank screen

Answer 1

In the 0.1.0 version of @microsoft/generator-sharepoint it has started setting gulp serve to use https. This is the right approach so you don't have to set your browser to allow unsafe scripts, but for this to work properly you have to configure certificates.

I guess we'll get a nice description of how to configure this rightly, but for now the easiest solution is to change config\serve.json to:

{
  "port": 4321,
  "initialPage": "http://localhost:5432/workbench",
  "https": false,
  "api": {
    "port": 5432,
    "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
  }
}

Answer 2

I assume you have installed Node, Gulp and Yeoman without errors. I also assume you have created a new SPFx project using the command

yo @microsoft/sharepoint

When done you navigate to the root folder of your project (if not already there) and type

gulp serve

I've made many mistakes typing server instead of serve, so pay attention to the correct command. This opens the workbench where you can add your Web Part if you hover over the canvas and hit the plus-sign in the middle.

Answer 3

Make sure you hit the local workbench first and accept the unsigned cert. https://github.com/SharePoint/sp-dev-docs/issues/165

Answer 4

You need to add the webpart you have created. So after running gulp serve you will see the workbench screen. after this you need to do move your mouse over the screen and click on the + sign which appears. This will display available webparts, from this you need to select your webpart in order to see it working. I hope this helps.