What is SharePoint framework (SPFx)?
It is a new development model for building Sharepoint modern page components. Using this Sharepoint framework we can develop SharePoint apps and extensions for SharePoint Online and SharePoint on premise (2019). Sharepoint has evolved with new modern pages, a great look & feel, easy themes, responsive to mobile devices, that means the basic page and web part model has changed.
Tools used: Node.js, Gulp, Yeoman, Visual Code, Typescript
- Runs in the context of user, no permission elevations allowed
- Solutions built using SharePoint Framework are supported in classic sharepoint sites as well
- Solutions are responsive to mobile
Install developer tools
- Install NodeJS
- Install Code editor
- Install Yeoman and gulp
- Install Yeoman SharePoint generator
- Trusting the self-signed developer certificate
1. Install NodeJS
First download NodeJS exe from here. Please download NodeJS version 8x not the later one as they don’t support SharePoint framework. You won’t believe I wasted a month by using NodeJS version 10 and ratifying the issues faced while setting up the development environment.
Better to check your machine already has any version of NodeJS. Run this in command prompt “node -v”. For me it showed v10 was there and uninstalled it.
This time I downloaded “node-v8.12.0-win-x64.zip”, extracted and ran the exe. Just move on with next, next in the installation wizard and successfully installed NodeJS 8x n my local machine.
2. Install Code Editor
You can use any of your desired code editors or IDE that you use for client-side web part. I use Microsoft’s free Visual Studio Code.
3. Install Yeoman and gulp
Nothing to download now. Go to command prompt and run the below code to install gulp.
npm install -g yo gulp
It installs the required dependencies into the local system within 2ecs
But later then wait for 2 to 3 minutes. “Yeoman Doctor” doing some sanity checks in my machine.
After 2minutes I had the below screen saying, “Everything looks all right”. Additional to that I got 2 optional dependencies warning message which I am not sure about, moreover they are not mandatory just optional so I will ignore for now.
4. Install Yeoman SharePoint generator
npm install -g @microsoft/generator-sharepoint
5. Trusting the self-signed developer certificate
Run the below code in command prompt
This will open a windows prompt confirmation window, where you need to click yes which allows to use a self-signed development certificate on your machine. This is important for SharePoint framework to launch a localhost site in your local machine to debug or test web parts.
Finally we have completed all installations and our development environment is ready to build custom components for modern SharePoint pages.
I will let you know how to create a modern web part using SharePoint framework in my next blog.
Thanks for your time.