SharePoint Framework (SPFx) come iniziare
14 novembre 2017
Lo SharePoint Framework, solitamente abbreviato in SPFx, è la nuova metodologia di sviluppo proposta da Microsoft per lo sviluppo su SharePoint Online, utilizzabile anche su SharePoint 2016 solo con Feature Pack 2. Questo significa che non può essere usato alle versioni precedenti.
Si tratta di una metodologia di sviluppo basata su tecnologie client quali JavaScript, React, CSS, Html e NodeJs per la parte di sviluppo.
La macchina di sviluppo, a differenza di quanto si faceva precedentemente per lo sviluppo lato server, può essere un qualsiasi client, quindi non serve avere una macchina con installato SharePoint. Va bene un qualsiasi PC con Windows, Mac o Linux.
Per iniziare a sviluppare bisogna prima predisporre l'ambiente.
NodeJs gestisce tutte le fasi di compilazione dei file TypeScript in JavaScript, SASS in CSS, crea il web server locale per il debug, fornisce la pagina temp/workbench.html locale e permette di creare il package per il deploy su SharePoint, ecc...
Con NodeJs viene anche installato il comando npm, il suo gestore di pacchetti. Per fare una similitudine con Visual Studio è l'equivalente di NuGet.
Con queste fasi abbiamo predisposto l'ambiente di sviluppo, si può procedere a creare un nuovo progetto SPFx.
Si tratta di una metodologia di sviluppo basata su tecnologie client quali JavaScript, React, CSS, Html e NodeJs per la parte di sviluppo.
La macchina di sviluppo, a differenza di quanto si faceva precedentemente per lo sviluppo lato server, può essere un qualsiasi client, quindi non serve avere una macchina con installato SharePoint. Va bene un qualsiasi PC con Windows, Mac o Linux.
Per iniziare a sviluppare bisogna prima predisporre l'ambiente.
NodeJS e NPM
La prima cosa che serve è NodeJs e può essere installato da qui, Microsoft consiglia la versione 6.x. Attualmente sto usando una versione superiore, la 8.6.0, senza problemi.NodeJs gestisce tutte le fasi di compilazione dei file TypeScript in JavaScript, SASS in CSS, crea il web server locale per il debug, fornisce la pagina temp/workbench.html locale e permette di creare il package per il deploy su SharePoint, ecc...
Con NodeJs viene anche installato il comando npm, il suo gestore di pacchetti. Per fare una similitudine con Visual Studio è l'equivalente di NuGet.
Visual Studio Code
Come editor viene consigliato Visual Studio Code che è multipiattaforma ed ha integrato un terminale PowerShell (CTRL+ò) o Bash su Mac e Linux.Yeoman e Gulp
Questi due pacchetti npm sono ripettivamente:- Yeoman: si tratta di un generatore di template che servirà poi per creare il progetto base
- Gulp: gestisce workflow o task per automatizzare i processi di compilazione e build
DOS / Batch file
npm install -g yo gulp
lo switch -g indica che il pacchetto viene installato a livello globale
Yeoman SharePoint generator
Questo è il template di progetto SPFx di base e può essere installato con:DOS / Batch file
npm install -g @microsoft/generator-sharepoint
Browser
Il mio consiglio, per il debug di pregetti SPFx, e di usare Chrome e tenere aperta la finestra dei DevTools (tasto F12).Con queste fasi abbiamo predisposto l'ambiente di sviluppo, si può procedere a creare un nuovo progetto SPFx.