Nuxt.js-project maken en draaien met ServBay

Wat is Nuxt.js?

Nuxt.js is een open-source framework dat gebouwd is bovenop het populaire Vue.js-framework, specifiek ontwikkeld om moderne en krachtige webapplicaties te maken. Het neemt veel complexe configuratie uit handen, zodat ontwikkelaars zich kunnen richten op de bedrijfslogica. Nuxt.js blinkt vooral uit in server-side rendering (SSR), maar biedt ook sterke mogelijkheden voor statische site generatie (SSG), waardoor het ideaal is voor het bouwen van content-rijke, SEO-vriendelijke websites en applicaties.

Belangrijkste kenmerken en voordelen van Nuxt.js

• Server-side rendering (SSR): Vue-pagina's worden vooraf op de server gerenderd, wat zorgt voor snellere laadtijden, een betere gebruikerservaring en verbeterde indexering door zoekmachines, perfect voor SEO.
• Statische site generatie (SSG): Tijdens build worden volledige statische HTML-bestanden geproduceerd. Dat zorgt voor extreem goede prestaties, eenvoudige deployment en geen server-runtime, ideaal voor blogs en documentatie.
• Automatische code-splitting: Nuxt.js splitst JavaScript automatisch per route, waardoor alleen noodzakelijke code wordt geladen bij het openen van een pagina: grote prestatieverbetering.
• File-based routing: Door .vue-bestanden toe te voegen in de pages-map genereert Nuxt.js automatisch routes, wat het beheer sterk vereenvoudigt.
• Modulair ecosysteem: Uitgebreide module-ondersteuning maakt het eenvoudig om extra functies en diensten te integreren (zoals Axios, PWA, CMS-integraties enz.).
• Convention over configuration: Door vaste mappenstructuren en naamgevingen is er minder gedoe met configureren.
• Geoptimaliseerde ontwikkelervaring: Hot-module reloading (HMR), duidelijke foutmeldingen en andere dev-tools verbeteren je workflow.

Dankzij deze eigenschappen maakt Nuxt.js het eenvoudig om complexe, krachtige en SEO-vriendelijke webapps efficiënt en effectief te bouwen.

Nuxt.js-project opzetten en draaien in ServBay

In deze handleiding leer je hoe je gebruikmaakt van het krachtige lokale ontwikkelplatform van ServBay – met name het Node.js-pakket en het websitebeheer – om een Nuxt.js-project te creëren, configureren en uitvoeren. We behandelen instellingen voor zowel ontwikkelmodus (met reverse proxy) als productieomgeving (met statische hosting via ServBay).

Vereisten

Voordat je begint, zorg dat je het volgende geregeld hebt:

1. ServBay-applicatie succesvol geïnstalleerd.
2. Node.js-pakket geïnstalleerd en geactiveerd in ServBay (controleer via het tabblad 'Pakketten' in het dashboard).
3. Basiskennis van Node.js, npm (of Yarn/pnpm) en werken met de terminal.
4. (Aanbevolen) Een code editor geïnstalleerd zoals VS Code.

Nuxt.js-project aanmaken

We gebruiken het create-nuxt-app scaffolding-tool om snel een nieuw Nuxt.js-project op te zetten.

1. Open de terminal en ga naar de webroot van ServBay

   De standaard-webroot is /Applications/ServBay/www. Hier sla je bij voorkeur je lokale projecten op. Open je terminal en navigeer naar deze map:

   cd /Applications/ServBay/www

2. Initialiseer een nieuw Nuxt.js-project

   Met npx create-nuxt-app maak je een nieuwe map aan (bijvoorbeeld servbay-nuxt-app). Npx draait het pakket zonder globale installatie.

   npx create-nuxt-app servbay-nuxt-app

   Volg de prompts in je terminal voor de configuratie. Kies opties naar wens. Voorbeeld:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm         # Kies je pakketmanager, bijvoorbeeld Npm of Yarn
   ? UI framework: None          # Eventueel een UI-framework
   ? Nuxt.js modules: Axios      # Voeg Nuxt-modules toe indien gewenst
   ? Linting tools: ESLint       # Een linting tool kiezen
   ? Testing framework: None     # Optioneel een test-framework
   ? Rendering mode: Universal (SSR / SSG) # 'Universal' ondersteunt SSR en SSG
   ? Deployment target: Server (Node.js hosting) # 'Server' is geschikt voor lokale dev en Node.js-hosting
   ? Development tools: jsconfig.json (Recommended for VS Code) # Kies devtools naar wens

3. Projectafhankelijkheden installeren

   Ga naar de nieuw aangemaakte projectmap en installeer de afhankelijkheden met de gekozen pakketmanager:

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

   Wacht tot alle dependencies zijn geïnstalleerd.

Uitvoer van de projectpagina aanpassen

Ter controle wijzigen we de homepage zodat deze een simpele tekst toont.

1. Open het bestand pages/index.vue

   Gebruik je code editor om pages/index.vue te openen in de projectmap.

2. Pas de inhoud aan

   Vervang de content door onderstaande code zodat "Hello ServBay!" zichtbaar is op de pagina:

   <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>

   Met het scoped attribuut worden stijlen beperkt tot deze component en maken we de output wat fraaier.

Nuxt.js in ontwikkelmodus draaien met ServBay

Nuxt.js' dev-server draait op een lokaal poortnummer. Om te profiteren van ServBay's custom domeinen, SSL en standaard poorten (80/443), zetten we via ServBay een reverse proxy op.

1. Nuxt.js ontwikkelserver starten

   Start de ontwikkelserver met het volgende commando in de projectroot. We kiezen poort 8585, maar je kunt ieder vrij poortnummer gebruiken.

   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

   De dev-server is nu bereikbaar op http://localhost:8585. Laat dit terminalvenster open staan om de server actief te houden.

2. ServBay-website aanmaken (reverse proxy)

   Open het ServBay-dashboard en ga naar het tabblad 'Websites'. Klik linksonder op de + om een nieuwe website toe te voegen:

   • Naam (Name): Bijvoorbeeld Nuxt.js Dev Site (Proxy).
   • Domein (Domain): Vul een custom domein in als nuxt-dev.servbay.demo. Gebruik .servbay.demo voor de ServBay-conventie.
   • Website type: Kies Reverse Proxy.
   • IP-adres: Vul 127.0.0.1 in (localhost).
   • Poort: Vul de gebruikte poort in, bijv. 8585.

   Klik op “Toevoegen” of “Opslaan”. De configuratie wordt direct toegepast.

   Zie ook: Node.js-ontwikkelwebsite toevoegen voor een gedetailleerde uitleg.

3. Dev-website bezoeken

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

   Dankzij ServBay’s reverse proxy kun je je Nuxt.js dev-server benaderen via het beheerde domein en HTTPS. ServBay genereert automatisch een SSL-certificaat (uitgegeven door de ServBay User CA – zorg dat je besturingssysteem deze CA vertrouwt). Zo kun je in een veilige, productie-nabije omgeving ontwikkelen en testen, wat handig is voor service workers of functies die HTTPS vereisen.

Productieversie bouwen en draaien

Is je Nuxt.js-project klaar om te deployen of wil je de productieomgeving lokaal simuleren, dan bouw je een productieversie. Heb je Universal mode gekozen en wil je een statische site genereren, dan gebruik je meestal nuxt generate (of via npm run export).

1. Productieversie bouwen en statische bestanden genereren

   Voer vanuit de projectmap de volgende commando’s uit. npm run build compileert de code; npm run export genereert per route een statisch HTML-bestand in de outputmap (dist).

   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

   Klaar? Dan vind je een map dist met alle gegenereerde statische bestanden.

2. ServBay-website aanmaken (statische bestandshosting)

   In het ServBay-dashboard, tabblad 'Websites', klik je linksonder op ‘+’ voor een nieuwe site:

   • Naam (Name): Bijvoorbeeld Nuxt.js Prod Site (Static).
   • Domein (Domain): Vul een passend domein in, zoals nuxt-prod.servbay.demo.
   • Website type: Kies Static.
   • Webroot: Zet het pad van de gegenereerde statische bestanden, dus /Applications/ServBay/www/servbay-nuxt-app/dist.

   Klik op “Toevoegen” of “Opslaan”. De configuratie wordt direct actief.

3. Productiesite bezoeken

   Open je browser en navigeer naar het ingestelde domein, bijv. https://nuxt-prod.servbay.demo.

   De hoogwaardige webserver van ServBay (Caddy of Nginx, afhankelijk van je settings) serveert nu direct de statische bestanden uit je dist-map – de snelste en veiligste manier om statische content aan te bieden. Ook op de productiesite beschik je over een gratis SSL-certificaat en custom domein.

Samenvatting

Met ServBay beheer je eenvoudig de lokale ontwikkeling en preview van je Nuxt.js-projecten. Je ontwikkelserver draait in de Node.js-omgeving van ServBay en via website-instellingen kun je reverse proxy gebruiken voor custom domeinen en HTTPS. Ben je klaar met ontwikkelen, bouw dan je project en zet de statische bestanden via ServBay online voor een razendsnelle lokale productie-preview. Zo combineer je de kracht en het gemak van ServBay met een moderne front-end workflow, rechtstreeks op je eigen Mac. Hopelijk helpt deze gids je om ServBay optimaal te benutten voor jouw Nuxt.js-projecten!