SharePoint Framework (SPFx) creare un nuovo progetto
La creazione di un nuovo progetto SPFx parte dalla creazione di una nuova directory. Da linea di comando digita:
DOS / Batch file
md sgart-spfx-first
ci spostiamo nella directory
DOS / Batch file
cd sgart-spfx-first
a questo punto, tramite Yeoman, possiamo generare il template di progetto @microsoft/sharepoint:
DOS / Batch file
yo @microsoft/sharepoint
verranno fatte alcune domande:
DOS / Batch file
_-----_
| | .--------------------------.
|--(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
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:
DOS / Batch file
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.
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:
DOS / Batch file
gulp trust-dev-cert
se serve rimuoverlo
DOS / Batch file
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.
