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 CodeVisual 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
Su molti browser si otterrà un errore di certificato e il sito https://localhost:4321/ non verrà caricato
Per risolvere eventuali problemi di certificati digita:
gulp trust-dev-cert
se serve rimuoverlo
gulp untrust-dev-cert
La pagina che si apre è questa:
workbench localeworkbench locale
una volta inserita la WebPart l'aspetto sarà questo:
WebPartWebPart
a cui posso cambiare le proprietà:
Proprietà della WebPartProprietà della WebPart
Il codice sorgente della WebPart si trova in src/webparts/helloWorld.