Vue JS ontwikkel omgeving - lokaal of in docker/vm?

[Red devil]

Beste dev-vers,

Samen met mijn zoon ben ik begonnen met een Vue JS cursus. Hij is al wat verder en is achter zijn PC aan het ontwikkelen. Nu loopt hij zo nu en dan vast in de cursus als er een plugin moet worden geinstalleerd.
In dit geval de VeeValidate plugin.

Nu vraag ik mij af, is de installatie onder Windows wel de beste oplossing? Kun je misschien beter node met alle plugins installeren in een Linux Dockertje/VM? Zijn er best practices beschikbaar?

[1superheld]

'plugins' zijn meestal gewoon npm packages did met npm install <plugin> geïnstalleerd wordt (bijvoorbeeld https://vee-validate.logaretm.com/v4/#installation) . Dat werkt op Windows net zo goed als op Linux.

Zeker als je de basis aan het doen bent zou ik het nog niet meteen te moeilijk maken.

Zelf ben ik wel groot fan van Wsl2 (Windows Subsystem for Linux) + docker / Visual studio code devcontainer. Werkt net zo goed, alleen disk performance is dan iets beter. Grootste voordeel van docker is dat alle dependencies op alle machines hetzelfde zijn (dan is de volgende stap om de node modules te installeren).

Wel zou ik kijken naar git, en dan per stap/iets weekends het commiten.dan kan je uiteindelijk terug als iets toch niet helemaal werkt!

[Red devil]

1superheld schreef op zondag 9 januari 2022 @ 14:08:
'plugins' zijn meestal gewoon npm packages did met npm install <plugin> geïnstalleerd wordt (bijvoorbeeld https://vee-validate.logaretm.com/v4/#installation) . Dat werkt op Windows net zo goed als op Linux.

Zeker als je de basis aan het doen bent zou ik het nog niet meteen te moeilijk maken.

Zelf ben ik wel groot fan van Wsl2 (Windows Subsystem for Linux) + docker / Visual studio code devcontainer. Werkt net zo goed, alleen disk performance is dan iets beter. Grootste voordeel van docker is dat alle dependencies op alle machines hetzelfde zijn (dan is de volgende stap om de node modules te installeren).

Wel zou ik kijken naar git, en dan per stap/iets weekends het commiten.dan kan je uiteindelijk terug als iets toch niet helemaal werkt!

Kijk, dit is precies wat ik zocht. Ik ga even lekker in die WSL2 + docker en VSC duiken, thanks!

[DJMaze]

Je zou ook kunnen overwegen om een GNU/Linux in een VM te draaien.
Gratis via VirtualBox bijvoorbeeld.

Voordeel is dat je een hele Linux omgeving leert te begrijpen, wat voordelen kan hebben als je straks je brouwsels op het internet zet.

[Red devil]

DJMaze schreef op zondag 9 januari 2022 @ 19:18:
Je zou ook kunnen overwegen om een GNU/Linux in een VM te draaien.
Gratis via VirtualBox bijvoorbeeld.

Voordeel is dat je een hele Linux omgeving leert te begrijpen, wat voordelen kan hebben als je straks je brouwsels op het internet zet.

Thanks. Is het dan mogelijk om op Windows remote te werken via een mount/ftp/ssh waarna de VM de Vue JS code snel compileert? Voordeel van een docker is dat je wel snel alles weer even terugzet en met wijzigingen opnieuw opbouwt.

[Red devil]

1superheld schreef op zondag 9 januari 2022 @ 14:08:

Zelf ben ik wel groot fan van Wsl2 (Windows Subsystem for Linux) + docker / Visual studio code devcontainer. Werkt net zo goed, alleen disk performance is dan iets beter. Grootste voordeel van docker is dat alle dependencies op alle machines hetzelfde zijn (dan is de volgende stap om de node modules te installeren).

Bedoel je deze aanpak? https://docs.microsoft.co.../tutorials/wsl-containers
En specificeer je in de dockerfile de dependencies van de node modules?
Zo gebruiken ze in de video cursus Vue CLI UI, vraag me af of dat beetje handig te combineren is met een docker aanpak.

[DJMaze]

Red devil schreef op zondag 9 januari 2022 @ 19:34:
Thanks. Is het dan mogelijk om op Windows remote te werken via een mount/ftp/ssh waarna de VM de Vue JS code snel compileert?

Natuurlijk, de vraag is alleen of jij dat goed kan configureren onder Windows (vast wel )

Hier doe ik alles andersom: gebruik GNU/Linux, en Windows zit sporadisch in een VM.
Één van de redenen is dat sshfs gewoon zit ingebakken.
Ik open mijn "explorer" en open gewoon een ssh verbinding waarbij ik direct de bestanden kan wijzigen.
Dit kan ook onder OS X, en Windows zou dat vast ook kunnen.

[Woy]

Red devil schreef op zondag 9 januari 2022 @ 12:51:
Nu loopt hij zo nu en dan vast in de cursus als er een plugin moet worden geinstalleerd.
In dit geval de VeeValidate plugin.

Waar loop je dan precies tegenaan? In principe zijn er 1001 verschillende dev setups mogelijk, waar allemaal wel voor/nadelen van zijn te vertellen. Maar ik zie niet direct een reden waarom je tegen issues aan zou lopen bij het installeren van een NPM package.

[Red devil]

Woy schreef op maandag 10 januari 2022 @ 15:47:
[...]

Waar loop je dan precies tegenaan? In principe zijn er 1001 verschillende dev setups mogelijk, waar allemaal wel voor/nadelen van zijn te vertellen. Maar ik zie niet direct een reden waarom je tegen issues aan zou lopen bij het installeren van een NPM package.

Moet toegeven dat hij wat verder in de cursus zit, ik moet nog beginnen. Het probleem met alles op je lokale machine is met name als het fout gaat, dan is het moeilijk om even snel wat anders te proberen zonder allerlei dingen te moeten deinstalleren.

Zit nu te denken aan de volgende setup, geinspireerd door: YouTube: Vue 3 and Tailwind CSS - Complete Setup Guide (WSL2/Ubuntu 20.04)
Een Ubuntu setup middels WSL2, en daarop Vue, Vue CLI, node, tailwind etc
Volgens mij moet je zoiets snel kunnen opbouwen mocht je iets totaal anders proberen.

Het schijnt dat een lokale VS code dan kan samenwerken met die remote WSL2 install, maar dat moet ik nog even uitvogelen.

[danslo]

Je kan ook kijken naar iets als gitpod: https://www.gitpod.io/. VSCode is zowel in de browser als lokaal te draaien.

Gratis voor een X aantal uur, daarna 8 euro per maand, dat zijn de kosten niet. En je kan ook self-hosten, als het echt gratis moet zijn.

[Red devil]

danslo schreef op maandag 10 januari 2022 @ 18:23:
Je kan ook kijken naar iets als gitpod: https://www.gitpod.io/. VSCode is zowel in de browser als lokaal te draaien.

Gratis voor een X aantal uur, daarna 8 euro per maand, dat zijn de kosten niet. En je kan ook self-hosten, als het echt gratis moet zijn.

Erg interessant. Dank! Denk dat ik eerst eens simpel begin, kan ik later nog wel eens terugkijken naar deze ontwikkelingen.

[Woy]

Ik denk niet dat WSL of Docker je problemen zullen oplossen. In principe zal je voor te development bijna nooit wat op machine level hoeven te installeren. WSL zal verder ook gewoon hetzelfde probleem hebben als je daar wat aan de installatie sloopt. Door gebruik van deze technologieën introduceer je voor jezelf alleen nog een extra leercurve, op zich zijn het beide goede technologieën om onder de knie te krijgen, maar als je problemen hebt met een ander aspect is het denk niet de tijd om extra complicaties te introduceren.

Als je gewoon zorgt dat je project goed in source control ( Git of wat anders ), kun je altijd je project gewoon reverten naar goede state. ( Zorg wel dat je node_modules opneemt in je git ignore )

[ Voor 29% gewijzigd door Woy op 10-01-2022 18:37 ]

[Slurpgeit]

VS Code kent ook het concept van "devcontainers" die automatisch een docker container aanmaken waar je in kan developen zodat je voor elk project een eigen dedicated development omgeving hebt met alle benodigde dependencies:









Het mooie is dat de configuratie gewoon in tekstbestandjes staat, dus ik ook makkelijk aan te passen om bijvoorbeeld extra npm packages toe te voegen. Als het "kapot" gaat is het een kwestie van "rebuild container"



Misschien veel te ingewikkeld voor wat je zoekt, maar denk geef je toch de optie . Zie voor info: https://code.visualstudio.com/docs/remote/containers

Edit: ah, was al genoemd. Oh well

[Red devil]

Woy schreef op maandag 10 januari 2022 @ 18:33:
Ik denk niet dat WSL of Docker je problemen zullen oplossen. In principe zal je voor te development bijna nooit wat op machine level hoeven te installeren. WSL zal verder ook gewoon hetzelfde probleem hebben als je daar wat aan de installatie sloopt. Door gebruik van deze technologieën introduceer je voor jezelf alleen nog een extra leercurve, op zich zijn het beide goede technologieën om onder de knie te krijgen, maar als je problemen hebt met een ander aspect is het denk niet de tijd om extra complicaties te introduceren.

Als je gewoon zorgt dat je project goed in source control ( Git of wat anders ), kun je altijd je project gewoon reverten naar goede state. ( Zorg wel dat je node_modules opneemt in je git ignore )

KISS, je hebt gelijk, zo simpel mogelijk. Toch heb ik soms het idee dat bepaalde command line installs wat makkelijker/beter/simpeler gaan onder Linux. Ik ga nog even proberen of het met wsl kan.

Slurpgeit schreef op maandag 10 januari 2022 @ 18:39:
VS Code kent ook het concept van "devcontainers" die automatisch een docker container aanmaken waar je in kan developen zodat je voor elk project een eigen dedicated development omgeving hebt met alle benodigde dependencies:

Misschien veel te ingewikkeld voor wat je zoekt, maar denk geef je toch de optie . Zie voor info: https://code.visualstudio.com/docs/remote/containers

Edit: ah, was al genoemd. Oh well

Ja, erg interessante materie. Wist niet dat er zoveel mogelijk was!

[farlane]

Red devil schreef op maandag 10 januari 2022 @ 18:54:
[...]
Toch heb ik soms het idee dat bepaalde command line installs wat makkelijker/beter/simpeler gaan onder Linux.

Ik denk dat je daar wel gelijk in hebt. Mijn ervaring is dat programmatuur wat een niet-Windows platform ondersteunt vaak makkelijker aan te slingeren is op een niet-Windows platform, waaronder build -en aanverwante tools zoals bv Docker.

FWIW, WSL2 komt een eind in de richting.

[Masvic]

Jezus wat komen hier complexe oplossingen voorbij...

Gewoon in elk project package.json en node modules folder en de .gitignore gebruiken om node_modules niet in je repository te committen.

Succes met je cursus!!

[ Voor 6% gewijzigd door Masvic op 11-01-2022 00:10 ]

[Vihaio]

farlane schreef op maandag 10 januari 2022 @ 23:54:
[...]


Ik denk dat je daar wel gelijk in hebt. Mijn ervaring is dat programmatuur wat een niet-Windows platform ondersteunt vaak makkelijker aan te slingeren is op een niet-Windows platform, waaronder build -en aanverwante tools zoals bv Docker.

FWIW, WSL2 komt een eind in de richting.

Maar als je een beginnerscursus js doet waarbij je alleen wat node modules moet installeren ga je niet per se tegen meer problemen aanlopen dan met een andere manier.
Ik ben het volledig eens met @Woy. Gebruik aan het begin gewoon Windows. Docker, wsl, VMs en Windows van je pc afgooien zijn allemaal goede opties als je de basis onder de knie hebt, maar voor nu maakt dingen alleen maar complexer.

[Red devil]

Dank voor alle suggesties! Moet bekennen dat ik wel al ervaring heb met Linux/VMs/Dockers, dus dat schrikt mij niet af. Heb eerst de WSL2 route geprobeerd en tjonge, wat werkt dat fijn zeg.

Je installeert in mum van tijd Ubuntu 20.04 en daar installeert alles veel makkelijker dan op Windows. Vervolgens "ziet" Visual Studio Code dat je een WSL ubuntu hebt draaien en hij vraagt gelijk of hij daar mee mag samenwerken. Als je dat wil, integreert hij zich in de distro en dat werkt tot nu toe perfect! De Windows Terminal werkt ook erg lekker, ik denk dat ik Putty maar eens ga deinstalleren.

[Woy]

Buiten het feit dat het ongetwijfeld lekker werkt, vraag ik mij alleen wel af hoe het uberhaupt je initiele probleem van het installeren van een VeeValidate plugin oplost, want dat is op windows in principe gewoon exact hetzelfde als op linux.

npm install vee-validate@next --save

[Red devil]

Woy schreef op dinsdag 11 januari 2022 @ 10:25:
Buiten het feit dat het ongetwijfeld lekker werkt, vraag ik mij alleen wel af hoe het uberhaupt je initiele probleem van het installeren van een VeeValidate plugin oplost, want dat is op windows in principe gewoon exact hetzelfde als op linux.

npm install vee-validate@next --save

Geen idee, maar mijn zoon liep tegen meer zaken aan tijdens de installatie van node zaken. Was soms op te lossen met toevoegen aan PATH, maar vee-validate bleef sputteren.

Het probleem is dan dat je vast zit aan je windows distro, je kunt niet even alles opnieuw installeren.
Het zal allemaal prima kunnen werken op Windows hoor, daar twijfel ik niet aan. Maar als je een probleem hebt en je even overnieuw wilt beginnen, is dat soms best gedoe. Dan is een VMmetje, Vagrant, Docker, WSL install etc soms wel een uitkomst.

[Masvic]

Je hoeft helemaal niet overnieuw te beginnen als je met node werkt. Dat installeer je op systeemniveau. Npm install -g om packages op systeemniveau te installeren. En dan in elk project npm init gebruiken om een nieuwe verzameling libraries relevant voor dat project op te stellen.

Mbv vue-cli kun je relatief makkelijk een vue3 + tailwindcss project opstarten.

[farlane]

Masvic schreef op dinsdag 11 januari 2022 @ 00:09:
Jezus wat komen hier complexe oplossingen voorbij...

De man/vrouw/... geeft aan dat ie al ervaring heeft met Linux/Docker en VMs. Hij doet zichzelf en zijn zoon denk ik veel plezier om onder een Linux environment (WSL2/VM/native) te gaan devven en ervaring op doen.

Valt best mee hoe complex dat is, echt.

[Red devil]

farlane schreef op dinsdag 11 januari 2022 @ 21:31:
[...]

De man/vrouw/... geeft aan dat ie al ervaring heeft met Linux/Docker en VMs. Hij doet zichzelf en zijn zoon denk ik veel plezier om onder een Linux environment (WSL2/VM/native) te gaan devven en ervaring op doen.

Valt best mee hoe complex dat is, echt.

Zekers! De cursus Vue is weer begonnen, mooi wat bij geleerd zo. Thanks allemaal!