Een Vue.js-project opzetten en uitvoeren met ServBay op macOS

Vue.js is een populair progressief JavaScript-framework voor het bouwen van gebruikersinterfaces. Het is eenvoudig te leren, flexibel en zeer krachtig, met name geschikt voor het bouwen van Single Page Applications (SPA). ServBay is een krachtige lokale webontwikkelomgeving die ontwikkelaars voorziet van handige Node.js-ondersteuning, waardoor het een ideaal platform is voor Vue.js-ontwikkeling op macOS.

In deze handleiding leer je hoe je met de geïntegreerde omgeving van ServBay van nul af aan een Vue.js-project opzet en hoe je het zowel in ontwikkelings- 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 volgt Vue een ‘bottom-up’ aanpak die incrementele ontwikkeling faciliteert. De kern van Vue richt zich uitsluitend op de viewlaag, waardoor het gemakkelijk te leren en eenvoudig te integreren is met andere bibliotheken of bestaande projecten. Vue 3 is de nieuwste versie van Vue.js, met diverse nieuwe functies en verbeteringen zoals hogere prestaties, een kleinere pakketgrootte en betere TypeScript-ondersteuning.

Belangrijkste kenmerken en voordelen van Vue 3

• Composition API: Organiseer logica binnen componenten efficiënt met behulp van functies, waardoor grootschalige componenten overzichtelijker en herbruikbaarder worden.
• Prestatieverbeteringen: Vue 3 maakt gebruik van Proxy-objecten voor reactiviteit en geoptimaliseerde virtual DOM-algoritmes, wat resulteert in merkbaar betere prestaties.
• Kleinere pakketgrootte: Dankzij tree-shaking is de kernbibliotheek van Vue 3 nog kleiner en sneller te laden.
• Betere TypeScript-ondersteuning: Vue 3 biedt uitgebreide en nauwkeurige TypeScript-typingen voor een optimale ontwikkelervaring met TypeScript.
• Verbeterde component lifecycle: Nieuwe lifecycle hooks en de Setup-functie zorgen voor duidelijkere en beheerbaardere componentlogica.

Met Vue 3 bouw je vlot moderne, responsieve webapplicaties.

Een Vue.js-project opzetten en uitvoeren met ServBay

In dit artikel gebruiken we de Node.js-omgeving die ServBay biedt om een Vue.js-project op te zetten en te draaien. We gebruiken de Websites-functionaliteit van ServBay om de webserver te configureren, en maken lokaal gebruik van reverse proxying en statische bestandsbediening.

Vereisten

Voordat je begint, controleer of je aan het volgende voldoet:

1. ServBay geïnstalleerd: Je hebt ServBay succesvol geïnstalleerd op je macOS-systeem.
2. Node.js-pakket geïnstalleerd: Via het pakketbeheer van ServBay heb je Node.js geïnstalleerd. Gedetailleerde stappen vind je in Node.js installeren en gebruiken in ServBay.

Een Vue.js-project aanmaken

1. Project initialiseren

   Open allereerst je terminal. ServBay raadt aan projecten op te slaan in de map /Applications/ServBay/www. Navigeer hiernaartoe en initialiseer een nieuw Vue.js-project met het commando npm create vue@latest. Met @latest zorg je ervoor dat je altijd de nieuwste Vue CLI of create-vue tool gebruikt (standaard Vue 3).

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

   Volg in de terminal de aanwijzingen voor het kiezen van de projectnaam (bijvoorbeeld servbay-vue-app) en selecteer afhankelijk van je wensen opties zoals 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

   Na initialisatie ga je naar de aangemaakte map servbay-vue-app en installeer je de benodigde afhankelijkheden met:

   cd servbay-vue-app
   npm install

Voorbeeldinhoud van het project aanpassen (optioneel)

Wil je controleren of het project goed werkt, vervang dan de standaardinhoud van het bestand src/App.vue door een eenvoudige "Hello ServBay!" output.

Open src/App.vue in de projectmap en wijzig het naar:

<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 opzetten (met reverse proxy)

In de ontwikkelmodus start een Vue-project doorgaans een lokale dev-server (meestal met Vite of Webpack) die hot module reloading (HMR) biedt voor gemakkelijk ontwikkelen. Met ServBay kun je eenvoudig een lokaal domein via reverse proxy mappen naar deze dev-server.

1. Dev-server starten

   Start de dev-server vanuit de hoofdmap van je project, en kies bijvoorbeeld poort 8585 (controleer dat deze niet al in gebruik is):

   npm run dev -- --port 8585

   In de terminal zie je nu dat de server draait, bijvoorbeeld op http://localhost:8585.

2. ServBay reverse proxy instellen

   Open de ServBay-app en ga naar de Websites-instelling. Voeg een nieuwe website toe van het type Reverse Proxy:

   • Naam: My first Vue dev site (of een andere herkenbare naam)
   • Domein: servbay-vue-dev.servbay.demo (of een ander .servbay.demo-domein naar jouw voorkeur)
   • Websitetype: Reverse Proxy
   • Proxy-doel IP: 127.0.0.1
   • Proxy-doel poort: 8585 (dezelfde poort als waarmee je de dev-server startte)

   Na opslaan werkt ServBay zijn webserverconfiguratie bij (Caddy of Nginx), zodat verzoeken naar servbay-vue-dev.servbay.demo automatisch worden doorgestuurd naar http://127.0.0.1:8585.

   Meer details over het toevoegen van een Node.js-devsite vind je in Een Node.js ontwikkelwebsite toevoegen in ServBay.

3. Toegang tot de ontwikkelmodus

   Zorg dat de webserver van ServBay draait. Open je browser en surf naar het ingestelde domein: https://servbay-vue-dev.servbay.demo.

   Aangezien ServBay automatisch een SSL-certificaat regelt (via ServBay User CA of ServBay Public CA), heb je ook lokaal een veilige HTTPS-verbinding, net als in productie. Details over SSL vind je in Een SSL-certificaat instellen voor je website in ServBay.

   Nu zou je je Vue-app in ontwikkelmodus moeten zien, inclusief hot reloading bij het wijzigen van je code.

Productieversie bouwen en uitrollen (statische hosting)

Ben je klaar voor productie, dan bouw je een geoptimaliseerde versie van je Vue.js-project. Dit resultaat bestaat uit statische bestanden (HTML, CSS, JS) die je rechtstreeks via de statische site-functionaliteit van ServBay host.

1. Productieversie genereren

   Draai in de hoofdmap van je project het volgende build-commando:

   npm run build

   Er wordt nu een geoptimaliseerde set statische bestanden aangemaakt in de map dist in je projectmap.

2. Statische bestanden serveren

   Open ServBay, ga opnieuw naar Websites en voeg een nieuwe site toe van het type Static:

   • Naam: My first Vue production site (of een andere duidelijke naam)
   • Domein: servbay-vue-prod.servbay.demo (of een ander gewenst .servbay.demo-domein)
   • Websitetype: Static
   • Document root: /Applications/ServBay/www/servbay-vue-app/dist (volledig pad naar je gebuilde dist map)

   Sla op, en ServBay laat zijn webserver de bestanden uit jouw dist-map direct serveren.

3. Productiemodus benaderen

   Zorg dat de ServBay-webserver actief is. Open je browser en ga naar het domein: https://servbay-vue-prod.servbay.demo.

   Je bekijkt nu de geoptimaliseerde productieversie van je Vue-app: snel en klaar voor gebruik. Ook hier profiteer je van ServBay’s eenvoudige domeinbeheer en automatische SSL.

Aandachtspunten

• Poortconflicten: Als poort 8585 (of jouw eigen keuze) al door een ander programma wordt gebruikt wanneer je npm run dev start, krijg je een foutmelding. Kies dan een andere vrije poort en pas je reverse proxy-configuratie in ServBay dienovereenkomstig aan.
• Status van de ServBay-webserver: Controleer dat ServBay’s webserver (Caddy of Nginx, afhankelijk van je configuratie) actief is. Anders kun je je website niet bereiken via het ingestelde domein.
• Domeinnaamresolutie: ServBay regelt automatisch dat .servbay.demo-domeinen uit de Websites-instelling verwijzen naar lokaal (127.0.0.1). Gebruik je een ander domein, pas dan mogelijk handmatig jouw hosts-bestand aan of gebruik ServBay’s Hosts Manager voor correcte lokale resolutie.

Samenvatting

Dankzij ServBay kun je eenvoudig een lokale ontwikkelomgeving met Node.js inrichten op macOS en je Vue.js-projecten efficiënt beheren in zowel ontwikkelings- als productiemodus. Met de Websites-functie kun je razendsnel een reverse proxy of een statische siteserver configureren voor je project. Je profiteert bovendien van eenvoudige domeininstellingen en automatische SSL-certificaten, waardoor je lokale workflow soepel, veilig en professioneel blijft. ServBay maakt het opzetten en beheren van lokale Vue.js-projecten onbetwistbaar eenvoudig.