Een Nuxt.js-project maken en uitvoeren met ServBay

Wat is Nuxt.js?

Nuxt.js is een open-source framework gebaseerd op het populaire Vue.js, speciaal ontworpen voor het maken van moderne en snelle webapplicaties. Het neemt veel complexe configuraties uit handen, waardoor ontwikkelaars zich kunnen richten op de bedrijfslogica. Nuxt.js is bijzonder krachtig voor server-side rendering (SSR), maar biedt tevens geavanceerde mogelijkheden voor het genereren van statische sites (SSG). Dit maakt het ideaal voor het bouwen van contentrijke en SEO-vriendelijke applicaties en websites.

Belangrijkste kenmerken en voordelen van Nuxt.js

• Server-side rendering (SSR): Rendert Vue-pagina’s vooraf op de server, waardoor de initiële laadtijd aanzienlijk daalt, de gebruikerservaring verbetert en zoekmachines content beter kunnen indexeren – voordelig voor SEO.
• Statische site generatie (SSG): Genereert tijdens de buildfase compleet statische HTML-bestanden. Dit levert maximale performance, eenvoudige uitrol en geen server-runtime overhead op, ideaal voor sites met weinig veranderende content zoals blogs of documentatie.
• Automatische code-splitting: JavaScript wordt automatisch per route gesplitst; gebruikers laden alleen de benodigde code, wat de prestaties merkbaar verbetert.
• Bestandsgebaseerde routing: Door .vue-bestanden aan te maken in de map pages, worden routes automatisch gegenereerd. Dit vereenvoudigt het routebeheer.
• Modulair: Een rijk ecosysteem van modules maakt het eenvoudig functies en externe diensten (zoals Axios, PWA-support, CMS-integraties) toe te voegen.
• Convention over configuration: Duidelijke mappenstructuur en vaste conventies verminderen handmatig configuratiewerk.
• Verbeterde developer experience: Functies als Hot Module Reloading (HMR) en foutrapportages verhogen de ontwikkelsnelheid.

Met deze eigenschappen maakt Nuxt.js het bouwen van complexe, snelle en SEO-geoptimaliseerde webapplicaties makkelijker en efficiënter.

Nuxt.js-project configureren en uitvoeren binnen ServBay

Deze handleiding laat zien hoe je het krachtige lokale ontwikkelplatform van ServBay benut – met name de Node.js-software en websitebeheer – om een Nuxt.js-project stap voor stap op te zetten, te configureren en uit te voeren. De gids behandelt het opzetten van een ontwikkelomgeving (met reverse proxy) en een productieomgeving (met statische bestanden).

Vereisten

Voordat je begint, zorg dat je aan deze voorwaarden voldoet:

1. ServBay is geïnstalleerd.
2. Het Node.js-pakket is geïnstalleerd en geactiveerd in ServBay. Controleer dit in het tabblad ‘Pakketten’ van het ServBay-configuratiescherm.
3. Je hebt basiskennis van Node.js, npm (of Yarn/pnpm) en terminalcommando’s.
4. (Aanbevolen) Installeer een code-editor zoals VS Code.

Een Nuxt.js-project aanmaken

We gebruiken de create-nuxt-app CLI om snel een Nuxt.js-project te initialiseren.

1. Open de terminal en ga naar de ServBay website-rootmap

   De standaard website-rootmap van ServBay is ideaal voor lokale projecten. Open de terminal en navigeer:

   macOS:

   cd /Applications/ServBay/www

   Windows:

   cd C:\ServBay\www

2. Start een nieuw Nuxt.js-project

   Initieer een nieuw project genaamd servbay-nuxt-app met het commando npx create-nuxt-app. npx is ingebouwd vanaf npm 5.2+, en kan CLI-commando’s uitvoeren zonder globale installatie.

   npx create-nuxt-app servbay-nuxt-app

   Volg de prompts in de terminal om het project naar wens te configureren. Een voorbeeldconfiguratie zou eruitzien als:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm         # Kies de gewenste package manager, npm of Yarn wordt aanbevolen
   ? UI framework: None          # Selecteer een UI-framework indien nodig
   ? Nuxt.js modules: Axios      # Kies de gewenste Nuxt.js-modules
   ? Linting tools: ESLint       # Selecteer een linter naar keuze
   ? Testing framework: None     # Kies indien nodig een testframework
   ? Rendering mode: Universal (SSR / SSG) # Universal ondersteunt SSR en SSG
   ? Deployment target: Server (Node.js hosting) # Server is geschikt voor lokaal en Node.js-hosting
   ? Development tools: jsconfig.json (Recommended for VS Code) # Kies devtools naar wens

3. Installeer de projectafhankelijkheden

   Navigeer naar de projectmap en installeer dependencies met jouw package manager:

   cd servbay-nuxt-app
   npm install
   # Of met Yarn: yarn install
   # Of met pnpm: pnpm install

   Wacht tot de installatie is voltooid.

De homepage aanpassen

Om je installatie te testen, pas je de indexpagina aan zodat er eenvoudige tekst wordt weergegeven.

1. Open het bestand pages/index.vue

   Open het bestand pages/index.vue in je code-editor.

2. Wijzig de inhoud

   Update de code zodat het “Hello ServBay!” laat zien:

   <template>
     <div>
       <h1>Hello ServBay!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'IndexPage'
   }
   </script>
   
   <style scoped>
   div {
     text-align: center;
     margin-top: 50px;
     font-family: sans-serif;
   }
   h1 {
     color: #333;
   }
   </style>

   De scoped-eigenschap zorgt ervoor dat de CSS alleen geldt voor deze component. Daarnaast is de tekst iets mooier opgemaakt.

Nuxt.js in ontwikkelmodus uitvoeren via ServBay

De Nuxt.js-development server draait op een lokaal poortnummer. Om deze te benaderen via ServBay’s eigen domein, SSL-certificaat en de standaard webpoort (80/443), gebruiken we ServBay’s websitebeheer om een reverse proxy in te stellen.

1. Start de Nuxt.js-development server

   Voer onderstaande commando uit in de projectmap om de dev-server te starten op poort 8585 (je kunt een andere vrije poort kiezen):

   macOS:

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run dev -- --port 8585
   # Of met Yarn: yarn dev --port 8585
   # Of met pnpm: pnpm run dev --port 8585

   Windows:

   cd C:\ServBay\www\servbay-nuxt-app
   npm run dev -- --port 8585
   # Of met Yarn: yarn dev --port 8585
   # Of met pnpm: pnpm run dev --port 8585

   Na het starten, draait de server meestal op http://localhost:8585. Laat deze terminal open zodat de server actief blijft.

2. ServBay-website instellen (reverse proxy)

   Open het ServBay-configuratiescherm, ga naar het tabblad ‘Websites’ en klik op de +-knop in de linkerbenedenhoek om een nieuwe site toe te voegen:

   • Naam: Geef een herkenbare naam, bijvoorbeeld Nuxt.js Dev Site (Proxy).
   • Domein: Vul het gewenste custom domein in, bijvoorbeeld nuxt-dev.servbay.demo. De extensie .servbay.demo werkt goed als ServBay-standaard.
   • Website type: Kies Reverse Proxy.
   • IP-adres: Geef 127.0.0.1 op, het lokale adres.
   • Poort: Vul de gebruikte poort in, bijvoorbeeld 8585.

   Sla de configuratie op. ServBay past de instellingen toe en activeert de proxy.

   Voor meer details, zie Node.js ontwikkelsite toevoegen.

3. Site in ontwikkelmodus bekijken

   Open je browser en ga naar het gekozen domein, bijvoorbeeld https://nuxt-dev.servbay.demo.

   Dankzij ServBay’s reverse proxy kun je je applicatie via een beheerd custom domein én HTTPS benaderen. ServBay genereert automatisch een SSL-certificaat (geïssued door ServBay User CA, zorg dat jouw systeem deze CA vertrouwt). Zo simuleer je een productieomgeving, test je o.a. Service Workers of andere beveiligde features — wat ideaal is voor development.

Productieversie bouwen en hosten

Zodra de ontwikkeling klaar is, kun je een productiebouw maken van Nuxt.js. Wie Universal mode gebruikt en een statische site wil, draait meestal nuxt generate (of via het script npm run export).

1. De build en statische bestanden genereren

   Voer deze commando’s uit, die de code compileren (npm run build) en op basis van de routes statische HTML genereren (npm run export, standaard naar de map dist):

   macOS:

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run build
   npm run export
   # Of met Yarn: yarn build && yarn export
   # Of met pnpm: pnpm build && pnpm run export

   Windows:

   cd C:\ServBay\www\servbay-nuxt-app
   npm run build
   npm run export
   # Of met Yarn: yarn build && yarn export
   # Of met pnpm: pnpm build && pnpm run export

   Na de build vind je alle gegenereerde bestanden in de map dist.

2. ServBay-site instellen als statische site

   Open ServBay en voeg een nieuw website-config toe via het ‘Websites’-tabblad:

   • Naam: Gebruik een herkenbare naam zoals Nuxt.js Prod Site (Static).
   • Domein: Het domein voor productie, bijvoorbeeld nuxt-prod.servbay.demo.
   • Websitetype: Kies Static.
   • Website root: Geef het pad naar de gegenereerde bestanden:
     • macOS: /Applications/ServBay/www/servbay-nuxt-app/dist
     • Windows: C:\ServBay\www\servbay-nuxt-app\dist

   Sla de configuratie op. ServBay past alles toe.

3. Productiesite bekijken

   Bezoek jouw productiedomein in de browser, bijv. https://nuxt-prod.servbay.demo.

   ServBay’s snelle webserver (Caddy of Nginx, afhankelijk van je configuratie) serveert nu direct de statische content uit de dist-map. Deze methode is extreem efficiënt en razendsnel. Ook nu profiteer je van custom domeinen en gratis SSL via ServBay.

Samenvatting

Met ServBay beheer je eenvoudig Nuxt.js-projecten — zowel voor lokale ontwikkeling als live preview. Je gebruikt het Node.js-pakket voor de dev-server, stelt via ServBay’s websitebeheer eenvoudig een reverse proxy en HTTPS in op custom domeinen. Na de bouw genereer je statische bestanden en host je die supersimpel met ServBay’s statische website-optie. Deze workflow benut ServBay’s kracht en gemak optimaal en versnelt frontend development en testing lokaal. Hopelijk helpt deze handleiding je nóg efficiënter te werken met Nuxt.js en ServBay!