Client Side Web part not available to add in the SharePoint Workbench which is hosted on SharePoint Library

Question

I am building SharePoint client-side web part (Hello World part 1). Everything works perfect no issues with the following.

• Successfully set up Machine with NodeJs, Gulp, Yeoman etc
• Got the Dev Tenant and other setup on it
• Got all the scaffolding for first web part using yo command
• Ran Gulp Serve command, I can see, add, and play with the helloworld web part on the local:4321 workbench

Now as per the instructions I open the Workbench page which is hosted on the SharePoint. After accepting the load unsafe script the page opens up. But when I click on that Plus sign there is no hello world web part in the list to add.

I was able to load client side web part on SharePoint Workbench few days before but now I am not. When I see errors in Chrome console, below are the details:

Failed to load resource: net::ERR_INSECURE_RESPONSE Unable to resolve config for module: http://localhost:4321/temp/manifests.js

Failed to load resource: net::ERR_EMPTY_RESPONSE sp-client-framework.bundle_f2c0ac3e0f406d27d793d616d4046d50.js:24 [ClientSideWebPartManager] Successfully loaded webpart manifests

Answer 1

Check to make sure you are serving your web part from localhost. While developing the web part runs within SharePoint but needs to load resources from your localhost to function.

Use the "gulp serve" command to run the localhost server.

Answer 2

If you have drop 5 installed, make sure you run gulp trust-dev-cert

Answer 3

Sometimes taking simple steps can solve the problem. Re-run the gulp serve to fire up localhost and check you can access JS files in the browser directly and make sure there are loading correctly.

It's also worth checking/updating workbench.aspx file with the code provided here https://raw.githubusercontent.com/SharePoint/sp-dev-docs/master/workbench.aspx