SharePoint Framework (SPFx) creare un nuovo progetto / Sgart.it

La creazione di un nuovo progetto SPFx parte dalla creazione di una nuova directory. Da linea di comando digita:

md sgart-spfx-first

ci spostiamo nella directory

cd sgart-spfx-first

a questo punto, tramite Yeoman, possiamo generare il template di progetto @microsoft/sharepoint:

yo @microsoft/sharepoint

verranno fatte alcune domande:

_-----_
    |       |    .--------------------------.
    |--(o)--|    |      Welcome to the      |
   `---------´   |  SharePoint Client-side  |
    ( _´U`_ )    |    Solution Generator    |
    /___A___\    '--------------------------'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Let's create a new SharePoint solution.
? What is your solution name? sgart-spfx-first
? Which baseline packages do you want to target for your component(s)? (Use arrow keys)

> SharePoint Online only (latest)
  SharePoint 2016 onwards, including SharePoint Online

? Where do you want to place the files? (Use arrow keys)
> Use the current folder
  Create a subfolder with solution name

Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? (y/N)

? Which type of client-side component to create? (Use arrow keys)
> WebPart
  Extension

? What is your Web part name? (HelloWorld)

? What is your Web part description? (HelloWorld description)

? Which framework would you like to use? (Use arrow keys)
  No JavaScript framework
> React
  Knockout

Ovvero:

Il nome della solution
Il tipo di progetto, valido solo per lo SharePoint Online oppure anche per SharePoint 2016
se il progetto verrà creato nella directory corrente o ne andrà creata una nuova
è possibile scegliere se creare una WebPart oppure una Extensions
in ultimo va scelto il framework con cui sviluppare la WebPart, il consigliato è React

a questo punto parte la creazione del progetto con la relativa struttura di directory e vengono scaricati i necessari pacchetti npm:

create package.json
   create config\package-solution.json
   create config\serve.json
   create config\config.json
   create .vscode\extensions.json
   create .vscode\launch.json
   ...
   ...
added 1602 packages in 74.101s

      _=+#####!
   ###########|       .-----------------------------------------.
   ###/    (##|(@)    |             Congratulations!            |
   ###  ######|   \   |  Solution sgart-spfx-first is created.  |
   ###/   /###|   (@) |     Run gulp serve to play with it!     |
   #######  ##|   /   '-----------------------------------------'
   ###     /##|(@)
   ###########|
      **=+####!

La struttura di directory risultante è la seguente:

.vscode
extensions.json
launch.json
settings.json
config
config.json
copy-assets.json
deploy-azure-storage.json
package-solution.json
serve.json
tslint.json
write-manifests.json
node_modules
.bin
microsoft
types
... circa 923 package con un totale di 32000 elementi (directory e files) ...
yeast
z-schema
src
webparts
helloWorls
components
HelloWorld.module.scss
HelloWorld.tsx
IHelloWorldProps.ts
loc
en-us.js
mystrings.d.ts
test
HelloWorldWebPart.test.ts
HelloWorldWebPart.manifest.json
HelloWorldWebPart.ts
typings
ms
odsp.d.ts
tsd.d.ts
.editorconfig
.gitignore
.yo-rc.json
gulpfile.js
package.json
package-lock.json
README.md
tsconfig.json

Durante la creazione del progetto la maggior parte del tempo viene spesa nel download dei pacchetti npm (circa 32000 elementi), se siete dietro ad un proxy non è detto che riuscite a portare a temine l'operazione.
In questa situazione avere un disco SSD diminuisce notevolemente i tempi di creazione del progetto.

Adesso che il progetto è creato possiamo lanciare Visual Studio Code

code .

il punto dopo la parola code è indispensabile

se non è già aperta la finestra del terminale premi CTRL+ò e digita:

gulp serve

Visual Studio Code

questo comando avvia alcuni task, i principali sono:

verifica la sintassi del codice tramite TsLink
esegue la compilazione dei file TypeScript o JavaScript ES6 in JavaScript ES5 (la versione attualmente supportata dai browser
esegue la compilazione degli eventuali file SASS in CSS
fa il bundle dei file
esegue la copia dei file nelle directory di lavoro (dist, lib e temp)
avvia il web server locale per il debug che risponde alla url https://localhost:4321/temp/workbench.html
avvia un altro processo che monitorizza constantemente le modifiche al codice e, ad ogni salvaaggio, riavvia il processo di compilazione e ricarica la pagina web