Toon posts:

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

Pagina: 1
Acties:

Vraag


  • Red devil
  • Registratie: December 1999
  • Nu online
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?

Alle reacties


Acties:
  • +1Henk 'm!

  • 1superheld
  • Registratie: September 2011
  • Laatst online: 07:53
'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
  • Registratie: December 1999
  • Nu online
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!

Acties:
  • +1Henk 'm!

  • DJMaze
  • Registratie: Juni 2002
  • Niet online
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.

Maak je niet druk, dat doet de compressor maar


  • Red devil
  • Registratie: December 1999
  • Nu online
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
  • Registratie: December 1999
  • Nu online
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
  • Registratie: Juni 2002
  • Niet online
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.

Maak je niet druk, dat doet de compressor maar


  • Woy
  • Registratie: April 2000
  • Niet online

Woy

Moderator Devschuur®
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.

“Build a man a fire, and he'll be warm for a day. Set a man on fire, and he'll be warm for the rest of his life.”


  • Red devil
  • Registratie: December 1999
  • Nu online
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
  • Registratie: Januari 2003
  • Laatst online: 10:04
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
  • Registratie: December 1999
  • Nu online
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
  • Registratie: April 2000
  • Niet online

Woy

Moderator Devschuur®
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]

“Build a man a fire, and he'll be warm for a day. Set a man on fire, and he'll be warm for the rest of his life.”


  • Slurpgeit
  • Registratie: November 2003
  • Laatst online: 09:04
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 :P

  • Red devil
  • Registratie: December 1999
  • Nu online
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 :P
Ja, erg interessante materie. Wist niet dat er zoveel mogelijk was!

  • farlane
  • Registratie: Maart 2000
  • Laatst online: 06-02 19:07
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.

Somniferous whisperings of scarlet fields. Sleep calling me and in my dreams i wander. My reality is abandoned (I traverse afar). Not a care if I never everwake.


  • Masvic
  • Registratie: Juli 2011
  • Laatst online: 10:43
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
  • Registratie: November 2006
  • Laatst online: 06-02 20:04
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
  • Registratie: December 1999
  • Nu online
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
  • Registratie: April 2000
  • Niet online

Woy

Moderator Devschuur®
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

“Build a man a fire, and he'll be warm for a day. Set a man on fire, and he'll be warm for the rest of his life.”


  • Red devil
  • Registratie: December 1999
  • Nu online
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
  • Registratie: Juli 2011
  • Laatst online: 10:43
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
  • Registratie: Maart 2000
  • Laatst online: 06-02 19:07
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.

Somniferous whisperings of scarlet fields. Sleep calling me and in my dreams i wander. My reality is abandoned (I traverse afar). Not a care if I never everwake.


  • Red devil
  • Registratie: December 1999
  • Nu online
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!
Pagina: 1


Tweakers maakt gebruik van cookies

Tweakers plaatst functionele en analytische cookies voor het functioneren van de website en het verbeteren van de website-ervaring. Deze cookies zijn noodzakelijk. Om op Tweakers relevantere advertenties te tonen en om ingesloten content van derden te tonen (bijvoorbeeld video's), vragen we je toestemming. Via ingesloten content kunnen derde partijen diensten leveren en verbeteren, bezoekersstatistieken bijhouden, gepersonaliseerde content tonen, gerichte advertenties tonen en gebruikersprofielen opbouwen. Hiervoor worden apparaatgegevens, IP-adres, geolocatie en surfgedrag vastgelegd.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Toestemming beheren

Hieronder kun je per doeleinde of partij toestemming geven of intrekken. Meer informatie vind je in ons cookiebeleid.

Functioneel en analytisch

Deze cookies zijn noodzakelijk voor het functioneren van de website en het verbeteren van de website-ervaring. Klik op het informatie-icoon voor meer informatie. Meer details

janee

    Relevantere advertenties

    Dit beperkt het aantal keer dat dezelfde advertentie getoond wordt (frequency capping) en maakt het mogelijk om binnen Tweakers contextuele advertenties te tonen op basis van pagina's die je hebt bezocht. Meer details

    Tweakers genereert een willekeurige unieke code als identifier. Deze data wordt niet gedeeld met adverteerders of andere derde partijen en je kunt niet buiten Tweakers gevolgd worden. Indien je bent ingelogd, wordt deze identifier gekoppeld aan je account. Indien je niet bent ingelogd, wordt deze identifier gekoppeld aan je sessie die maximaal 4 maanden actief blijft. Je kunt deze toestemming te allen tijde intrekken.

    Ingesloten content van derden

    Deze cookies kunnen door derde partijen geplaatst worden via ingesloten content. Klik op het informatie-icoon voor meer informatie over de verwerkingsdoeleinden. Meer details

    janee