#5 Deploying

Github pages

Om mijn site te kunnen pushen naar github pages heb ik een module nodig die dat mogelijk maakt. Ik kan namelijk niet een react app onmiddellijk laten zien op github, omdat eerst react moet worden gestart door middel van "$ npm start".

Om toch iets te kunnen laten zien heb ik een module geïnstalleerd via npm. De module heet gh-pages, en zorgt ervoor dat mijn code kan worden compiled en veranderd zodat het toch op github pages kan. De module installeren heb ik gedaan zoals elke module, en toegevoegd als een dev dependency.

$ npm install gh-pages --save-dev

Vervolgens moest ik aan mijn package.json een aantal dingen toevoegen om het werkend te krijgen, zoals een juiste link naar mijn repo/github pages. Dit heb ik toegevoegd bovenaan mijn package.json file:

"homepage": "https://Rickert41.github.io/frontend-applications",

Om mijn code te kunnen compilen moest ik ook nog wat andere code toevoegen aan mijn package.json. Met deze code compiled de package mijn code wordt het gepusht naar een aparte branch in mijn github, namelijk gh-pages. De volgende code heb ik toegevoegd aan mijn package.json onder het kopje "scripts":

"predeploy": "npm run build",
"deploy": "gh-pages -d build",

Wanneer ik nu npm run build uitvoer in de console wordt alles voor me gedaan, en komt het netjes in de gh-pages te staan. Wanneer ik dit wil updaten moet ik de command nog een keer uitvoeren met de geüpdatet code in de main-brach, en dan wordt het automatisch gedeployed. Het enige wat k nog moest doen is in de instellingen van mijn github pages aangeven dat de live versie uit de gh-pages branch moet worden gehaald.