Een Vue.js project maken en uitvoeren met ServBay

Vue.js is een populair, progressief JavaScript-framework voor het bouwen van gebruikersinterfaces. Het is eenvoudig te leren, flexibel en biedt hoge prestaties, vooral bij het bouwen van Single Page Applications (SPA's). ServBay is een krachtige lokale webontwikkelomgeving die ontwikkelaars van eenvoudige Node.js-ondersteuning voorziet, zowel op macOS als Windows. Hiermee vormt ServBay het ideale platform voor Vue.js-ontwikkeling.

Deze handleiding beschrijft stap voor stap hoe je met ServBay een nieuw Vue.js-project aanmaakt, en hoe je het zowel in ontwikkel- als productiemodus via ServBay toegankelijk maakt.

Wat is Vue.js?

Vue.js is een progressief JavaScript-framework voor het bouwen van gebruikersinterfaces. In tegenstelling tot andere grote frameworks is Vue ontworpen voor incrementele, bottom-up integratie. De kernbibliotheek van Vue richt zich puur op de weergavecomponenten, wat niet alleen instapvriendelijk is, maar ook eenvoudige integratie met externe bibliotheken of bestaande projecten mogelijk maakt. Vue 3 is de nieuwste versie van Vue.js, en brengt tal van vernieuwingen zoals hogere prestaties, kleinere pakketgroottes, en verbeterde TypeScript-integratie.

Belangrijkste features en voordelen van Vue 3

• Composition API: Logische componentcode wordt georganiseerd via functiecombinaties. Dit maakt het onderhoud van grote componenten makkelijker en bevordert hergebruik.
• Prestatieverbeteringen: Vue 3 gebruikt Proxy-objecten voor het reactieve systeem en optimaliseert de virtuele DOM, wat leidt tot een veel snellere werking.
• Kleiner pakketformaat: Dankzij tree-shaking technologie is de kernbibliotheek veel kleiner, wat resulteert in snellere laadtijden.
• Beter TypeScript-ondersteuning: Vue 3 biedt sterk verbeterde TypeScript type-definities, wat het ontwikkelen van Vue-apps in TypeScript aangenamer maakt.
• Verbeterde levenscyclus van componenten: Nieuwe lifecycle hooks en de Setup-functie zorgen voor meer overzichtelijke componentlogica en eenvoudig beheer.

Met Vue 3 kunnen ontwikkelaars efficiënt moderne, responsieve webapplicaties bouwen.

Een Vue.js project maken en draaien met ServBay

In dit artikel maken en draaien we een Vue.js-project met behulp van ServBay’s Node.js-omgeving. De Websites functie van ServBay wordt gebruikt om de webserver te configureren, en via reverse proxy en statische bestanden kun je het project lokaal benaderen.

Vooraf: Benodigdheden

Voordat je begint, zorg dat je onderstaande stappen hebt voltooid:

1. ServBay geïnstalleerd: Je hebt ServBay lokaal geïnstalleerd.
2. Node.js pakket geïnstalleerd: Je hebt het Node.js pakket geïnstalleerd via ServBay’s pakketbeheer functie. Zie Node.js installeren in ServBay.

Een Vue.js project starten

1. Project initialiseren

   Open je terminal. Het wordt aanbevolen om ServBay webprojecten in de standaardmap te plaatsen. Ga naar deze map en initialiseer een nieuw Vue.js project met npm create vue@latest. Met @latest gebruik je altijd de laatste versie (meestal Vue 3).

   macOS:

   cd /Applications/ServBay/www
   npm create vue@latest

   Windows:

   cd C:\ServBay\www
   npm create vue@latest

   Volg in de terminal de aanwijzingen voor de projectnaam (bijvoorbeeld servbay-vue-app) en kies naar wens TypeScript, Vue Router, Pinia, enzovoort. Een voorbeeldconfiguratie:

   ✔ Project name: … servbay-vue-app
   ✔ Add TypeScript? … No # Kies Yes of No naar wens
   ✔ Add JSX Support? … No # Kies Yes of No naar wens
   ✔ Add Vue Router for Single Page Application development? … Yes # Aanbevolen: Yes
   ✔ Add Pinia for state management? … No # Kies Yes of No naar wens
   ✔ Add Vitest for Unit testing? … No # Kies Yes of No naar wens
   ✔ Add an End-to-End Testing Solution? … No # Kies Yes of No naar wens
   ✔ Add ESLint for code quality? … Yes # Aanbevolen: Yes
   ✔ Add Prettier for code formatting? … Yes # Aanbevolen: Yes
   ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No # Kies Yes of No naar wens

2. Afhankelijkheden installeren

   Ga na het initialiseren naar de nieuw aangemaakte map servbay-vue-app en voer npm install uit om alle benodigde pakketten te installeren.

   cd servbay-vue-app
   npm install

Projectvoorbeeld aanpassen (optioneel)

Ter controle of het project werkt, kun je src/App.vue wijzigen en vervangen door een eenvoudige "Hello ServBay!" boodschap.

Open het bestand src/App.vue en vervang de inhoud door:

<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>Dit is een Vue.js app die draait via ServBay.</p>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Ontwikkelomgeving instellen (reverse proxy)

Tijdens ontwikkeling draait de Vue-app meestal op een lokale dev-server (Vite of Webpack) met hot module reloading (HMR). ServBay kan via reverse proxy een lokaal domein koppelen aan het adres en de poort van deze server.

1. Dev-server starten

   Start de dev-server met onderstaande opdracht vanuit de hoofdmap. Gebruik het argument --port (bijvoorbeeld: 8585) om een poort te kiezen die vrij is.

   npm run dev -- --port 8585

   In de terminal verschijnt het bericht dat de server draait, bijvoorbeeld op http://localhost:8585.

2. ServBay: Reverse Proxy configureren

   Open de ServBay interface en ga naar de Websites instellingen. Voeg een nieuwe website toe en kies het type Reverse Proxy:

   • Naam: My first Vue dev site (of andere herkenbare naam)
   • Domein: servbay-vue-dev.servbay.demo (of een .servbay.demo domein naar keuze)
   • Website type: Reverse Proxy
   • Proxy-doel IP: 127.0.0.1
   • Proxy-doel poort: 8585 (dezelfde poort die je hierboven koos)

   Sla de instelling op. ServBay past dan automatisch zijn webserver (Caddy of Nginx) zo aan dat alle verzoeken naar servbay-vue-dev.servbay.demo worden doorgeleid naar http://127.0.0.1:8585.

   Voor meer details over het toevoegen van een Node.js ontwikkel-website bekijk Node.js ontwikkelwebsite toevoegen in ServBay.

3. Ontwikkelmodus benaderen

   Controleer of de webserver van ServBay actief is. Open je browser en ga naar het domein https://servbay-vue-dev.servbay.demo.

   ServBay regelt automatisch SSL-certificaten voor lokale domeinen (via ServBay User CA of ServBay Public CA), dus je kunt het project veilig via HTTPS bekijken - perfect als representatie van productieomstandigheden. Meer info over SSL-instellingen vind je in SSL-certificaat instellen in ServBay.

   Je zou nu je Vue-app in ontwikkelmodus moeten zien en genieten van hot-reloading.

Productieversie bouwen en deployen (statische site)

Is de ontwikkeling afgerond en klaar voor productie? Dan maak je een geoptimaliseerde build: dit zijn statische bestanden (HTML, CSS, JavaScript) die eenvoudig via de statische websitefunctie in ServBay te hosten zijn.

1. Productie build maken

   Voer in de hoofdmap:

   npm run build

   De buildbewerkingen maken een zo klein mogelijke, geoptimaliseerde set statische bestanden in de map dist.

2. Statische website instellen

   Open ServBay en ga naar de Websites instellingen. Voeg een nieuwe site toe van het type Statisch:

   • Naam: My first Vue production site (of andere herkenbare naam)
   • Domein: servbay-vue-prod.servbay.demo (of een .servbay.demo domein naar keuze)
   • Website type: Statisch
   • Rootmap van de website: verwijs naar het pad van de dist map:
     • macOS: /Applications/ServBay/www/servbay-vue-app/dist
     • Windows: C:\ServBay\www\servbay-vue-app\dist

   Sla op; ServBay stelt zijn webserver zo in dat hij deze statische bestanden direct serveert.

3. Productiemodus benaderen

   Controleer of ServBay’s webserver draait, en bezoek in je browser het domein https://servbay-vue-prod.servbay.demo.

   Je ziet nu de productieversie van je Vue-app: geoptimaliseerd, snel en direct bereikbaar. Ook nu geldt de automatische SSL-bescherming en zijn de voordelen van lokale domeininstellingen volledig benut voor een realistische testomgeving.

Let op

• Poortconflicten: Wordt poort 8585 (of elke andere gekozen poort) al gebruikt, dan krijg je een foutmelding bij npm run dev. Kies dan een andere vrije poort en update ook de reverse proxy-instelling van ServBay.
• ServBay webserverstatus: Controleer of ServBay’s webserver (Caddy of Nginx, afhankelijk van jouw configuratie) echt gestart is – anders werkt benaderen via het domein niet.
• Domeinresolutie: .servbay.demo domeinen worden automatisch door ServBay aan je lokale adres (127.0.0.1) gekoppeld. Kies je een ander domein, dan moet je mogelijk handmatig je hosts-bestand aanpassen, of gebruikmaken van de Hosts Manager in ServBay voor juiste resolutie.

Samenvatting

Met ServBay kun je op macOS en Windows moeiteloos een lokaal Node.js ontwikkelomgeving opzetten en Vue.js projecten beheren – van ontwikkeling tot productiedeploy. Dankzij de Websites-functie is het instellen van reverse proxy’s of statische sites eenvoudig, en profiteer je van eigen domeinnamen en automatische SSL-bescherming. Zo wordt het lokale setup- en ontwikkelproces van Vue.js aanzienlijk eenvoudiger en professioneler.