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 Codequesto 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
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 localeuna volta inserita la WebPart l'aspetto sarà questo:
WebParta cui posso cambiare le proprietà:
Proprietà della WebPartIl codice sorgente della WebPart si trova in
src/webparts/helloWorld.