SPFx Series: Een ontwikkelomgeving voorbereiden

In deze blogpost leggen we alles uit wat je nodig hebt om SharePoint Framework-componenten te ontwikkelen. Hoewel het SharePoint Framework werkt met lokale tools, moeten de volgende zaken globaal worden geïnstalleerd (op je hele systeem).

Geïntegreerde ontwikkelomgeving

Een geïntegreerde ontwikkelomgeving (IDE) is een softwaretoepassing die softwareontwikkelaars helpt software te ontwikkelen. Een IDE biedt een aantal tools voor het schrijven, testen, debuggen en implementeren van software, en integreert deze tools in één gebruiksvriendelijke interface.

Een IDE bevat vaak de volgende functies:

• Code-editor: Een tekstverwerker waarmee je code kunt schrijven en bewerken.
• Compiler of interpreter: Een programma dat de code omzet of uitvoert naar machinecode.
• Debugger: Een tool om fouten in de code op te sporen en te corrigeren.
• Build- en projectbeheer: Tools om de software te bouwen en te organiseren.
• Integratie met versiebeheersystemen: zoals Git of SVN
• Codenavigatie en automatische aanvulling: tools om snel door de code te navigeren en snel te schrijven.

Je bent vrij om elke IDE te gebruiken; er is geen IDE gekoppeld aan de ontwikkeling van SharePoint Framework-componenten. Een van de mogelijkheden is het gebruik van de gratis IDE Visual Studio Code. Je kunt het downloaden via https://code.visualstudio.com

Node.JS

Node.js is een open-source JavaScript-framework dat wordt gebruikt om server-side scripts uit te voeren. Het is gebouwd op de V8 JavaScript-engine van Google Chrome en biedt een JavaScript-omgeving voor de server. Dit maakt het mogelijk om JavaScript te gebruiken voor back-end taken zoals het aanmaken van een HTTP-server, verbinding maken met een database en het uitvoeren van berekeningen. Node.js heeft ook een uitgebreide standaardbibliotheek en een groot aantal modules beschikbaar via npm, de Node.js Package Manager, die ontwikkelaars helpen webapplicaties snel te ontwikkelen.

Node.js bestaat uit 2 releases:

• Long Time Support (LTS)
• Huidige versie

SharePoint Framework ondersteunt alleen de LTS-versies.

Om te controleren of node.js al is geïnstalleerd, kun je de volgende opdracht uitvoeren vanuit je opdrachtregel:

    node –-version

Als node.js nog niet is geïnstalleerd op je systeem, kun je het downloaden van: https://nodejs.org/en/download

npm

Node Package Manager (NPM) is een pakketbeheerder voor de programmeertaal JavaScript. Het wordt standaard geïnstalleerd met Node.js en wordt gebruikt om JavaScript-modules te installeren, beheren en uitvoeren.

Met npm kun je eenvoudig externe bibliotheken en modules installeren die je JavaScript-projecten aanvullen met nieuwe functionaliteiten. Deze modules worden opgeslagen in een centrale opslagplaats, het npm-register. Hierdoor kun je de modules in je eigen projecten gebruiken zonder de code zelf te hoeven schrijven.

Npm werkt via de opdrachtregelinterface (CLI) en stelt je in staat om verschillende opdrachten uit te voeren, zoals het installeren van pakketten, het upgraden of verwijderen van pakketten, het bekijken van versies van pakketten, enz.

Wanneer je een pakket installeert, worden de bijbehorende bestanden opgeslagen in een map genaamd node_modules in je projectmap. Je kunt deze modules vervolgens importeren in je JavaScript-bestanden via de import- of require-syntaxis.

Npm is een krachtig hulpmiddel voor JavaScript-ontwikkelaars, omdat het hen in staat stelt snel en eenvoudig toegang te krijgen tot een grote hoeveelheid open-source modules en bibliotheken, waardoor hun ontwikkeltijd wordt verkort en hun productiviteit wordt verhoogd.

nvm

Het SharePoint Framework heeft veel versies die elkaar in snel tempo opvolgen. Wanneer je intensief ontwikkelt over een langere periode, kun je verschillende componenten ontwikkelen met verschillende SPFx-versies. Om dit te beheren, raden we het gebruik van NVM aan.

NVM (Node Version Manager) is een opdrachtregelprogramma waarmee je verschillende versies van Node.js op je computer kunt installeren en beheren. Dit is handig als je projecten afhankelijk zijn van specifieke versies van Node.js of als je de nieuwste versie van Node.js wilt testen zonder je bestaande instellingen te verstoren.

Met NVM kun je meerdere versies van Node.js installeren en eenvoudig tussen versies wisselen. Je kunt bijvoorbeeld een oudere versie gebruiken voor een ouder project en een nieuwere versie voor een nieuw project.

Het gebruik van NVM is ook handig voor ontwikkelaars die met verschillende versies van Node.js op een server of in een virtuele machine willen werken. Dit is belangrijk omdat sommige modules alleen werken met specifieke versies van Node.js.

NVM is beschikbaar voor Windows, macOS en Linux. Je kunt NVM installeren door de installatie-instructies op de GitHub-pagina van het project te volgen. (https://github.com/coreybutler/nvm-windows) Na de installatie kun je verschillende versies van Node.js installeren en beheren met opdrachten zoals:

• NVM install {node version number}: om een node.js-versie te installeren
• NVM List: om de geïnstalleerde node.js-versies te tonen.
• NVM use {node version number}: om te schakelen naar een specifieke node.js-versie en deze te gebruiken.

Tip: Je kunt de volgende 3 tools installeren met de volgende opdracht:

    npm install gulp-cli yo @microsoft/generator-sharepoint –-global

Gulp

Gulp is een taakuitvoerder of taakautomatiseringstool, die je kunt gebruiken om taken te automatiseren die vaak voorkomen tijdens het ontwikkelen van een website of webapplicatie. Deze taken kunnen het verkleinen van CSS- en JavaScript-bestanden, het omzetten van Sass naar CSS, het optimaliseren van afbeeldingen en het uitvoeren van tests omvatten.

In plaats van deze taken handmatig uit te voeren, kun je ze automatiseren met Gulp. Je definieert de taken in een gulpfile (een JavaScript-bestand) en voert ze vervolgens uit met een opdracht in de opdrachtregelinterface.

Gulp gebruikt een pijplijnmodel waarbij taken worden uitgevoerd in de volgorde van hun definitie. Je kunt bijvoorbeeld eerst een taak uitvoeren om CSS-bestanden te verkleinen, gevolgd door een taak om die bestanden te implementeren in een productieomgeving.

Een van de voordelen van Gulp is dat het code-gebaseerd is in plaats van configuratie-gebaseerd. Dit maakt het gemakkelijk voor ontwikkelaars om te lezen en te begrijpen, en biedt de flexibiliteit om aangepaste taken te maken. Gulp gebruikt ook Node.js, zodat je dezelfde taal kunt gebruiken voor zowel de backend als de frontend van je project.

In combinatie met andere tools zoals npm en webpack kun je Gulp gebruiken om een efficiënte en geautomatiseerde workflow te maken voor je webontwikkelingsprojecten.

    npm install gulp-cli –global

Webpack

Webpack is een modulebundeler voor JavaScript-applicaties. Het helpt bij het samenvoegen van verschillende JavaScript-modules, samen met hun afhankelijkheden, in één bestand (of meerdere bestanden) zodat het gemakkelijk door een webbrowser kan worden geladen.

Webpack gebruikt een configuratiebestand genaamd webpack.config.js, waarin je de instellingen voor de bundeling kunt opgeven. Hierin geef je aan welke bestanden moeten worden verwerkt, welke plugins moeten worden gebruikt en welke uitvoer moet worden gegenereerd.

Webpack ondersteunt ook het gebruik van loaders, dit zijn kleine programma’s die specifieke bestandstypen kunnen verwerken, zoals Sass naar CSS, TypeScript naar JavaScript en afbeeldingen naar data-URLs. Dit maakt het mogelijk om een breder scala aan bestandstypen in je project te gebruiken.

Webpack is ook efficiënt in het detecteren van afhankelijkheden tussen modules en vermindert daardoor het aantal bestanden dat door de browser moet worden geladen, wat resulteert in een snellere laadtijd van de pagina. Webpack is een populaire keuze onder ontwikkelaars, omdat het een flexibele en krachtige oplossing biedt voor het bundelen van JavaScript-modules en het verkleinen van de omvang van de JavaScript-bundle. Het kan worden gebruikt in combinatie met andere tools zoals npm en Gulp voor een efficiënte en geautomatiseerde webontwikkelingsworkflow.

Yeoman

Yeoman is een open-source opdrachtregelprogramma waarmee je webapplicaties snel en efficiënt kunt opzetten. Het helpt je bij het automatiseren van de opzet van een nieuw project, inclusief het aanmaken van de mappenstructuur, het installeren van afhankelijkheden en het configureren van buildtools.

Yeoman werkt met “generators” die specifieke sjablonen en configuraties bieden voor verschillende soorten webapplicaties. Er zijn verschillende generators beschikbaar voor verschillende frameworks en bibliotheken, zoals AngularJS, React, Vue.js, Express, enz.

Door Yeoman te gebruiken kun je snel een werkende structuur voor je project opzetten, en kun je je tijd besteden aan het ontwikkelen van de unieke functionaliteit van je applicatie.

Yeoman stelt je ook in staat nieuwe generators te maken, waardoor je de structuur kunt opzetten die voldoet aan de specifieke vereisten van je project.

In combinatie met andere tools zoals npm en webpack kun je een efficiënte en geautomatiseerde workflow maken voor je webontwikkelingsprojecten, waardoor je sneller een werkende applicatie kunt opzetten en je tijd kunt richten op de unieke aspecten van je project.

    npm install yo --global

@microsoft/generator-sharepoint

@microsoft/generator-sharepoint is een Yeoman-generator gemaakt door Microsoft voor het maken van SharePoint-oplossingen met behulp van het SharePoint Framework (SPFx). Het helpt je snel een nieuw SPFx-project op te zetten met een vooraf geconfigureerde projectstructuur en een set veelgebruikte afhankelijkheden.

Deze generator biedt een aantal sjablonen en opties voor het maken van verschillende soorten SharePoint-oplossingen, zoals:

• Webonderdelen
• Extensies
• Bibliotheekcomponenten.

Het bevat ook extra functies zoals ondersteuning voor het bouwen en implementeren van je oplossingen via Azure DevOps en integratie met de Office 365 CLI voor het beheren van SharePoint-assets.

Het is belangrijk op te merken dat deze generator niet de enige optie is voor het maken van SPFx-oplossingen, maar het is een goed alternatief als je een tool van Microsoft wilt gebruiken en het meeste uit het SharePoint Framework en zijn nieuwste functies wilt halen.

    npm install @microsoft/generator-sharepoint --global

Het zelfondertekende ontwikkelaarscertificaat vertrouwen

De on-premise webserver van het SharePoint Framework, die wordt gebruikt bij het testen van je aangepaste oplossingen vanuit je ontwikkelomgeving, maakt standaard gebruik van HTTPS. Dit is geïmplementeerd met behulp van een SSL-certificaat dat door de ontwikkelaar zelf is ondertekend. Zelfondertekende SSL-certificaten worden niet vertrouwd door je ontwikkelomgeving. Je moet eerst je ontwikkelomgeving configureren om het certificaat te vertrouwen.

Elk SharePoint Framework-project bevat een hulpprogramma-taak in de vorm van een Gulp-taak. Je kunt ervoor kiezen dit nu te doen of te wachten totdat je je eerste project hebt aangemaakt.

Nadat een project is aangemaakt met de Yeoman-generator voor het SharePoint Framework, voer je de volgende opdracht uit vanuit de root van het project.

    gulp trust-dev-cert