SharePoint Framework SPFX – Setting up on On-Prem SharePoint 2019

All of us might be using the SPFx for the SharePoint online for a long time. But setting up the SPFx on On-Prem is a bit different and there are few version conflicts are there. In this article, let us see how to setup the DEV Environment for the SPFx in On-Prem environment.

1. Create a new VM with Windows 10.
2. Install the Node.JS Version V8.17 (node-v8.17.0-x64)
3. npm install –global gulp@3.9.1
4. npm install –global yo@3.1.1
5. npm install -g @microsoft/generator-sharepoint
6. npm install –global –production windows-build-tools — This will take more time. Once we see the status as installed on the screen, we can stop this by Ctrl+C
7. yo @microsoft/sharepoint
8. gulp trust-dev-cert
9. npm shrinkwrap
10. npm install react-quill –save
11. npm install jquery –save
12. npm i sp-pnp-js –save instead of @pnp/sp

We cant use the pnp package as below. I tried and uninstalled.

1. npm i @pnp/sp@1.3.11
2. npm uninstall @pnp/logging @pnp/common @pnp/odata @pnp/sp

The above will ensure that the SPFx version is 1.4.1.

My Package.json will looks like below.

{
"name": "my Onprem webparts solution",
"version": "0.0.1",
"private": true,
"main": "lib/index.js",
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
},
"dependencies": {
"@microsoft/sp-core-library": "~1.4.0",
"@microsoft/sp-lodash-subset": "~1.4.0",
"@microsoft/sp-office-ui-fabric-core": "~1.4.0",
"@microsoft/sp-webpart-base": "~1.4.0",
"jquery": "^3.6.0",
"moment": "^2.29.1",
"react": "15.6.2",
"react-dom": "15.6.2",
"react-quill": "^1.3.5",
"sp-pnp-js": "^3.0.10"
},
"devDependencies": {
"@types/react": "15.6.6",
"@types/react-dom": "15.5.6",
"@microsoft/sp-build-web": "~1.4.1",
"@microsoft/sp-module-interfaces": "~1.4.1",
"@microsoft/sp-webpart-workbench": "~1.4.1",
"gulp": "~3.9.1",
"ajv": "~5.2.2",
"@types/webpack-env": "1.13.1"
}
}

Happy Coding
Sathish Nadarajan