diff --git a/client.zip b/client.zip index 8b19b9f..a7a3c45 100644 Binary files a/client.zip and b/client.zip differ diff --git a/images/screenshot-caddy-file-index.png b/images/screenshot-caddy-file-index.png new file mode 100644 index 0000000..77ca560 Binary files /dev/null and b/images/screenshot-caddy-file-index.png differ diff --git a/images/screenshot-skeleton-app.png b/images/screenshot-skeleton-app.png new file mode 100644 index 0000000..7ecb668 Binary files /dev/null and b/images/screenshot-skeleton-app.png differ diff --git a/index.md b/index.md index af57d10..a9d5573 100644 --- a/index.md +++ b/index.md @@ -44,28 +44,42 @@ Download, installeer en open VS Code. In VS Code klik je op "Open Folder", selec Andere tekst editors zijn ook prima, als je aan iets anders gewend bent. Bijvoorbeeld: Notepad++ of Sublime Text. -### Een web browser +### Een webbrowser In alle voorbeelden gebruiken wij [Google Chrome](https://www.google.com/chrome/). Andere browsers, zoals Firefox of Edge, zijn ook prima, mogelijk zien de app en developers tools er dan wel anders uit dan in Chrome. Controleer ook of je de nieuwste versie hebt van de browser, om zeker te weten dat de app goed werkt. -### Een web server +### Een webserver -Om je app te zien, moet je een web server hebben die naar je map verwijst. Daarnaast zijn er een paar instellingen belangrijk. +Om je app te zien, moet je een webserver hebben die je browser de app laat openen. +Een eenvoudig programma om op je eigen computer een webserver te draaien is [Caddy](https://caddyserver.com/). +Je kunt Caddy downloaden voor +[Windows](https://github.com/caddyserver/caddy/releases/download/v2.7.6/caddy_2.7.6_windows_amd64.zip), +[MacOS](https://github.com/caddyserver/caddy/releases/download/v2.7.6/caddy_2.7.6_mac_amd64.tar.gz) en +[Linux](https://github.com/caddyserver/caddy/releases/download/v2.7.6/caddy_2.7.6_linux_amd64.tar.gz). +Pak Caddy uit en zet het in de map waar je eerder `client.zip` hebt uitgepakt. +Nadat je het bestand hebt uitgepakt, heb je slechts één bestand: `caddy` (of `caddy.exe` voor Windows). -Wij adviseren [Web Server for Chrome](https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb). Installeer de web server en open de app. Je zie dan een instellingen pagina. Selecteer hier de uitgepakte map en stel de server in zoals op deze afbeelding: +Open een command prompt (cmd) of *terminal* en start Caddy met het volgende commando: +{{}} +caddy file-server --browse --listen :8123 +{{}} -![Chrome web server settings](images/settings-webserver-for-chrome.png) +Open vervolgens je browser en ga naar http://localhost:8123. +Als alles goed is gegaan, zie je dit: +![Screenshot skeleton app](screenshot-skeleton-app.png) -*Let op*: De CORS headers zijn heel belangrijk om de chat werkend te krijgen. +Als iets fout is gegaan, kun je iets zien zoals dit: +![Screenshot Caddy file index](screenshot-caddy-file-index.png) -### De chat server URL +Vraag dan een mentor even mee te kijken. -Als het goed is, hebben de mentoren je een link gegeven van de chat server. Dit is belangrijk om te kunnen praten met de andere ninja's in de groep. +### De chat server URL -Zoek de volgende regel in je index.html bestand, en plak de chat server url tussen de haakjes: +Je app moet weten waar de chat server is, zodat je met anderen berichtjes kunt uitwisselen. +Zoek `serverIpAddresEnPoort` in je `index.html` bestand om te zien waar de server is: {{}}