SPFx sample app that targets SP2016 on-premise environment. Serves as guidance and how-to for common operations (create, read, update, delete) of list items.
Once provisioned, this app provisions a single SharePoint list.
Query all list items.
Clicking on "Avery Stewart" below creates a new list item.
Query for a single list item.
Update a single list item.
Update a single list item again.
Query all list tiems.
- Install code editor VSCode
- Install NodeJS NodeJS
- Install Git Git
- Install Node Version Manager NVM
- Install required tools from npm
nvm install 10.20.1
nvm use 10.20.1
npm install -g [email protected]
npm install -g [email protected]
npm install -g @microsoft/[email protected]
npm install -g rimraf
cd ~/Desktop
git clone https://github.com/chanm003/spfx2016.git
cd spfx2016
npm install
The following steps need to be performed when you first clone the repository onto your local machine or whenever the password to your real SharePoint environment expires.
- Cache credentials
cd ~/Desktop/spfx2016 rimraf .\config\private.json && npm run proxy - When prompted provide your credentials
SharePoint URL https://chanm003.sharepoint.com Authentication strategy User credentials (SAML/ADFS) User name [email protected] Password ************* - Verify private.json is generated
- This file is in the
configdirectory. - This file stores credentials in an encrypted manner.
- This file is NEVER checked into source control.
- This file is in the
- Verify proxy server is returning the same XML data as your real SPO environment. Below screenshots show requests to
/_api/webendpoint using BOTH the proxy running on localhost:8080 and the real SPO endpoint (SharePoint URLyou entered on Step 2)
- Repeat steps 1-4 as necessary if you receive the following authentication error. Below screenshot shows error message when you enter invalid username/credentials.
- Hit
Ctrl+Cto quit
Update the webRelativeUrl property accordingly inside of settings.ts
cd ~/Desktop/spfx2016
npm run bump:typescript
npm run serve
| URL | Example | Purpose |
|---|---|---|
| Document library (or subfolder) | http://socafrica.westeurope.cloudapp.azure.com/SPFxBundles/sp-2016 | This is where you will upload your JSON, bundled .JS, images |
| App Catalog | http://socafrica.westeurope.cloudapp.azure.com/sites/appcatalog | This is where you will upload your .sppkg |
cd ~/Desktop
git clone https://github.com/chanm003/spfx2016.git
code ~/Desktop/spfx2016/config/write-manifests.json
During local DEV, we normally run the gulp serve. This will start up a server on your DEV box and serve your JSON/Javascript from http://localhost:4321/temp/deploy. Prior to deployment, we need to change this. Using URLs obtained from previous section, we would use http://socafrica.westeurope.cloudapp.azure.com/SPFxBundles/sp-2016
cd ~/Desktop/spfx2016
nvm use 10.20.1
npm install
npm run bump:typescript
gulp build
gulp bundle --ship
gulp package-solution --ship
| Source | Destination |
|---|---|
| ~/Desktop/spfx2016/sharepoint/solution/sp-2016.sppkg | App Catalog |
| ~/Desktop/spfx2016/temp/deploy/* | Document library/folder that you created |
TBD
TBD
This section documents the steps for enabling SPFx development at the farm-level. Some or all of these requirements may have already been met by enabling the farm to support Add-Ins (i.e. App Catalog already exists). Only Farm Administrators will have permissions to perform the steps in this section.
Double click to begin install. Installer will detect and automatically exit if already installed. If one or both installation processes are required, be sure to adhere to best practices and run the SharePoint Products Configuration Wizard.
Two service applications are required.
Ensure service application is associated with web application.
Configure prefix for Apps.
Provision App Catalog.
Remove restriction that blocks .JSON files.
