How to use SPFx PNPSPJS on local workbench?

Question

I'm new to spfx and I am making a react web app in spfx. I have this so far to log in using the current context

  sp.setup({
    spfxContext: this.context
  });

but if I am testing locally on the workbench, but want to read from a list on my tenant, how can I change it to log in there instead? Is there any article/tutorial for it?

Answer 1

If you run your local web server (as if you were going to use the local workbench) using gulp serve, but use the --nobrowser flag to prevent it from automatically opening a browser window to your local workbench, you can then open the SharePoint hosted workbench on your tenant and add your web part there, which will then run in the context of your tenant and give you access to data on that site.

Again, locally run

gulp serve --nobrowser

and then in a browser open

https://your-tenant.sharepoint.com/your-site/_layouts/15/workbench.aspx

and then just add your web part to the workbench as you would normally do, and you will have access to all the lists/libraries on /your-site/.

Here is a link to the documentation in the SPFx HelloWorld web part tutorial describing how to preview the web part in SharePoint's hosted workbench.