Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

SharePoint WebPart erstellen #1 mit Yeoman

13.03.2020 (๐Ÿ‘1710)

SharePoint WebPart erstellen #1

Schritt1: man startet mit PowerShell

Windows PowerShell in Windows->WindowsPowerShell

Windows PowerShell

Dann erstellt man einen Projekt-Ordner wo man den Projekt-Code des WebParts speichern mรถchte

 

Windows PowerShell

 

PS C:\Users\RPopp> cd C:\_Daten\Desktop\VS_Projects\Sharepoint

 

 

 

Dann startet man mit Yeoman generator die Installation

yo @microsoft/sharepoint

 

Dann kommen die Installations-Schritte fรผr das WebPart

 

Let's create a new SharePoint solution.

? What is your solution name? DemoWebPart01

 

? Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)

 

? Where do you want to place the files? Create a subfolder with solution name

Found npm version 6.9.0

 

? 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? Yes

 

? Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant? No

 

? Which type of client-side component to create? WebPart

Add new Web part to solution demo-web-part-01.

 

? What is your Web part name? DemoWebPart01

 

? What is your Web part description? Demo eines SharePoint WebParts

 

? Which framework would you like to use? React

Bei Which type of client-side componten to create

Wรคhlt man WebPart

Auch Extension und Library sind interessant, kommen aber spรคter vor

Unter Web part name gibt man den Namen an, welcher dann in SharePoint erscheint, und wie die Code-Klasse heiรŸt

Beim Framework kann man auswรคhlen zwischen

No JavaScript framework

React

Knockout

Hier React verwenden

Windows PowerShell

PS C:\Users\RPopp> cd C:\_Daten\Desktop\VS_Projects\Sharepoint

PS C:\_Daten\Desktop\VS_Projects\Sharepoint> yo @microsoft/sharepoint

 

  

Update available: 3.1.1 (current: 3.1.0) โ”‚

Run npm install -g yo to update.     โ”‚

 

Welcome to the      |

SharePoint Client-side  |

Solution Generator    |

 

Let's create a new SharePoint solution.

? What is your solution name? DemoWebPart01

? Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)

? Where do you want to place the files? Create a subfolder with solution name

Found npm version 6.9.0

? 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? Yes

? Will the components in the solution require permissions to access web APIs that are unique and not shared with other c

omponents in the tenant? No

? Which type of client-side component to create? WebPart

Add new Web part to solution demo-web-part-01.

? What is your Web part name? DemoWebPart01

? What is your Web part description? Demo eines SharePoint WebParts

? Which framework would you like to use? React

Final

Danach erstellt Yeoman ein Verzeichnis mit der Solution und den react Dateien.

Wichtig: man sieht hier auch die gulp-File und git-files

Installationsscript und Meldungen bei der Erstellen eines WebParts mit Yeoman Generator

Windows PowerShell

Copyright (C) Microsoft Corporation. Alle Rechte vorbehalten.

Lernen Sie das neue plattformรผbergreifende PowerShell kennen โ€“ https://aka.ms/pscore6

PS C:\Users\RPopp> cd C:\_Daten\Desktop\VS_Projects\Sharepoint

PS C:\_Daten\Desktop\VS_Projects\Sharepoint> yo @microsoft/sharepoint

 

     _-----_

    |       |    โ•ญโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฎ

    |--(o)--|    โ”‚ Update available: 3.1.1 (current: 3.1.0) โ”‚

   `---------ยด   โ”‚     Run npm install -g yo to update.     โ”‚

    ( _ยดU`_ )    โ•ฐโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฏ

    /___A___\   /

     |  ~  |

   __'.___.'__

 ยด   `  |ยฐ ยด Y `

 

 

     _-----_

    |       |    .--------------------------.

    |--(o)--|    |      Welcome to the      |

   `---------ยด   |  SharePoint Client-side  |

    ( _ยดU`_ )    |    Solution Generator    |

    /___A___\    '--------------------------'

     |  ~  |

   __'.___.'__

 ยด   `  |ยฐ ยด Y `

 

Let's create a new SharePoint solution.

? What is your solution name? DemoWebPart01

? Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)

? Where do you want to place the files? Create a subfolder with solution name

Found npm version 6.9.0

? 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? Yes

? Will the components in the solution require permissions to access web APIs that are unique and not shared with other c

omponents in the tenant? No

? Which type of client-side component to create? WebPart

Add new Web part to solution demo-web-part-01.

? What is your Web part name? DemoWebPart01

? What is your Web part description? Demo eines SharePoint WebParts

? Which framework would you like to use? React

 

   create config\package-solution.json

   create package.json

   create config\config.json

   create config\serve.json

   create tsconfig.json

   create .vscode\extensions.json

   create .vscode\launch.json

   create .vscode\settings.json

   create config\copy-assets.json

   create config\deploy-azure-storage.json

   create config\write-manifests.json

   create src\index.ts

   create gulpfile.js

   create README.md

   create tslint.json

   create .editorconfig

   create .gitignore

   create src\webparts\demoWebPart01\components\IDemoWebPart01Props.ts

   create src\webparts\demoWebPart01\components\DemoWebPart01.module.scss

   create src\webparts\demoWebPart01\components\DemoWebPart01.tsx

   create src\webparts\demoWebPart01\DemoWebPart01WebPart.ts

   create src\webparts\demoWebPart01\loc\en-us.js

   create src\webparts\demoWebPart01\loc\mystrings.d.ts

   create src\webparts\demoWebPart01\DemoWebPart01WebPart.manifest.json

   create teams\9a78043c-6305-4415-9960-50c71605a348_outline.png

   create teams\9a78043c-6305-4415-9960-50c71605a348_color.png

 

npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

npm WARN deprecated core-js@1.2.7: core-js@<2.6.8 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2.

npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

npm WARN deprecated natives@1.1.6: This module relies on Node.js's internals and will break at some point. Do not use it, and update to graceful-fs@4.x.

npm WARN deprecated es6-collections@0.5.6: not actively maintained anymore

npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart()

npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

npm WARN deprecated kleur@2.0.2: Please upgrade to kleur@3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit <https://github.com/lukeed/kleur/releases/tag/v3.0.0\> for migration path(s).

npm WARN deprecated graceful-fs@1.2.3: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js

npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

 

> deasync@0.1.19 install C:\_Daten\Desktop\VS_Projects\Sharepoint\DemoWebPart01\node_modules\deasync

> node ./build.js

 

`win32-x64-node-10` exists; testing

Binary is fine; exiting

 

> node-sass@4.9.3 install C:\_Daten\Desktop\VS_Projects\Sharepoint\DemoWebPart01\node_modules\node-sass

> node scripts/install.js

 

Cached binary found at C:\Users\RPopp\AppData\Roaming\npm-cache\node-sass\4.9.3\win32-x64-64_binding.node

 

> core-js@2.6.11 postinstall C:\_Daten\Desktop\VS_Projects\Sharepoint\DemoWebPart01\node_modules\core-js

> node -e "try{require('./postinstall')}catch(e){}"

 

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

 

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:

> https://opencollective.com/core-js

> https://www.patreon.com/zloirock

 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

 

 

> uglifyjs-webpack-plugin@0.4.6 postinstall C:\_Daten\Desktop\VS_Projects\Sharepoint\DemoWebPart01\node_modules\uglifyjs-webpack-plugin

> node lib/post_install.js

 

 

> node-sass@4.9.3 postinstall C:\_Daten\Desktop\VS_Projects\Sharepoint\DemoWebPart01\node_modules\node-sass

> node scripts/build.js

 

Binary found at C:\_Daten\Desktop\VS_Projects\Sharepoint\DemoWebPart01\node_modules\node-sass\vendor\win32-x64-64\binding.node

Testing binary

Binary is fine

npm notice created a lockfile as package-lock.json. You should commit this file.

npm WARN ajv-keywords@3.4.1 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.

npm WARN uglifyjs-webpack-plugin@0.4.6 requires a peer of webpack@^1.9 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3.0.0 but none is installed. You must install peer dependencies yourself.

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

 

added 1873 packages from 1111 contributors and audited 588641 packages in 52.773s

found 2069 vulnerabilities (1852 low, 17 moderate, 200 high)

  run `npm audit fix` to fix them, or `npm audit` for details

 

      _=+#####!

   ###########|       .-----------------------------------------.

   ###/    (##|(@)    |             Congratulations!            |

   ###  ######|   \   |  Solution demo-web-part-01 is created.  |

   ###/   /###|   (@) |     Run gulp serve to play with it!     |

   #######  ##|   /   '-----------------------------------------'

   ###     /##|(@)

   ###########|

      **=+####!

 

PS C:\_Daten\Desktop\VS_Projects\Sharepoint> gulp trust-dev-cert

[13:37:12] Local gulp not found in C:\_Daten\Desktop\VS_Projects\Sharepoint

[13:37:12] Try running: npm install gulp

PS C:\_Daten\Desktop\VS_Projects\Sharepoint> gulp serve

[13:37:42] Local gulp not found in C:\_Daten\Desktop\VS_Projects\Sharepoint

[13:37:43] Try running: npm install gulp

PS C:\_Daten\Desktop\VS_Projects\Sharepoint>