sp-live-reload
SharePoint pages live reload module for client side development
The module allows arranging live reload capability on SharePoint host pages on frontend assets changing and publishing.
Supported SharePoint versions
SharePoint Online
SharePoint On-Prem (2019, 2016, 2013)
How to use
Install
Demo
Usage withing Gulp task
Watch with live reload (SPSave)
Watch with live reload (Gulp-SPSync)
For those, who for some reasons prefer gulp-spsync or gulp-spsync-creds over spsave
, the following structure is applicable:
gulp-spsync
has different idiology for the paths. In case of itspFolder
in settings always should be equal to "".
Arguments
siteUrl
- SharePoint site (SPWeb) url [string, required]watchBase
- base path from which files in a local project are mapped to remote location [string, required]spFolder
- root folder relative (tositeUrl
) path in SharePoint mapped to a project [string, required]creds
- node-sp-auth creds options for SPSave and custom monitoring action provisioning [object, optional forsp-live-reload
itself]protocol
- protocol name with possible values:http
orhttps
[string, optional]host
- host name or ip, where the live reload server will be running [string, optional, default:localhost
]port
- port number [string, optional, default:3000
]ssl
- ssl parameters [object, required only on case ofprotocol
equal tohttps
]key
- local path tokey.pem
filecert
- local path tocert.crt
file
creds
and spSaveCreds
are identical as the modules use the same core authentication module. spSaveCoreOptions
can be checked here.
For making initial dive in with the library easier Yeoman generator-sppp is recommended, it has sp-live-reload
integrated and creates a scaffolding project with all neccessary setup.
node-sp-auth-config
is recommended for building SPSave credential options. See for the example.
CDN scenario
In case of publishing scripts to a CDN (to the different [from SharePoint] domain) raw path should be passed to emitUpdatePath
method:
Second parameter equal true
, tells emitter to prevent the path value from any local transformation.
By default, the path is transformed from the local one (D:\Projects\ProjectName\src\folder\you_file_path.ext
) to a relative SharePoint path (/sites/collection/subweb/_catalogs/masterpage/folder/you_file_path.ext
). Where watchBase
= ``D:\Projects\ProjectName\src,
siteUrl` = `https://sphost/sites/collection/subweb` and `spFolder` = `_catalogs/masterpage`.
HTTPS / SSL
For https hosts like SharePoint online self-signed sertificate should be generated and added to trusted one.
1. Install openssl
MacOS: Homebrew
brew install openssl
Window: Chocolatey
choco install opensslkey
Ubuntu Linux: Native
apt-get install openssl
2. Generate keys
3. Add cert to trusted
Depending on your client OS, add cert.crt
to Trusted root certificates.
Install certificate
Local computer
Trusted root certificates
Installation in SharePoint site collection
Live reload client script can be installed within SharePoint by referencing live-reload.client.js
. By default, the path to the client is following: http://localhost:3000/s/live-reload.client.js
.
The client also can be delivered to SharePoint as a site collection script source custom action by using gulp task:
Source:
To delete such a custom action another gulp task can be used:
Source:
Usage scenarious
General
Live reload feature during active development stage on DEV environment. The manual monitoring script encapsulation is recommended on a specific page while the process of coding and debugging.
Device-specific
There are cases then a page/view should be running on a specific device, let's say iPad and Safari. For sure, an emulator can be used. But sometimes only the real device can show a behavior. Live reload with shared monitoring server can provide instantaneous reloading feature on a device.
Last updated