How can we create hidden list in SharePoint Online via SPFx using PnP JS

Problem Background 

I wanted to create Hidden List to store some setting values. The list is provisioned in SharePoint Online using SPFx with the help of  PnP JS.

Solution 

sp.web.lists.ensure("ListName", "List Description", 100, false, { Hidden: true });

Reference

https://github.com/pnp/pnpjs/issues/2068

https://pnp.github.io/pnpjs/sp/lists/

SharePoint Framework (SPFx) starting points

 Introduction

In this blog post we will look at some basic SPFx ideas for a easy start on SPFx. These points can be changed according to the individual and I'm sharing these points based only on my own experience. 

• Its easy to use React framework for SPFx
• As UI framework its great to use office-ui-fabric-react
• npm install office-ui-fabric-react
• For the controls its better to use sp-dev-fx-controls-react from pnp
• Visit https://pnp.github.io/sp-dev-fx-controls-react/
• npm install @pnp/spfx-controls-react --save --save-exact
• Also better to user Reusable property pane controls for the SharePoint Framework solutions
• Visit https://pnp.github.io/sp-dev-fx-property-controls/
• npm install @pnp/spfx-property-controls --save --save-exact
• Use functional components with React
• You can use the below GitHub repository to start your project. 
• https://github.com/SuhailCloud/hello-spfx 
• Use PnPJS npm packages for CRUD Operations in SharePoint 
• https://pnp.github.io/pnpjs/packages/
• npm install @pnp/sp --save

Create SharePoint Online Single Page Application with Angular 5, @PnPJS and SP-Rest-Proxy

Introduction

I was creating a Single Page Application using Angular 5, PnPJS Libraries and sp-rest-proxy.

I have created a boilerplate project in GitHub. Please clone and run the project after installing npm packages (npm install).

To run the project open two command prompts and type

npm run hmr

npm run serve.

You will be asked your SharePoint Online site url and the credentials in the command prompt. Feel free to provide them.

Once you done with these steps browse with http://localhost:4200/ and you will see your basic detail as below.

Since then you can develop your complex single page application.

GitHub Url

https://github.com/SuhailCloud/Angular5-PnPJS-SPRestProxy

Resources and References

• https://pnp.github.io/pnpjs/
• https://www.npmjs.com/package/sp-rest-proxy
• http://johnliu.net/blog/2017/9/angular-4-sharepoint-on-premises-localhost-development-and-sp-rest-proxy
• https://github.com/koltyakov/sp-rest-proxy/issues/41