Dit is een voorbeeld van hoe je een Nuxt applicatie of statische site instelt om te deployen op Kinsta’s Applicatie of Statische Site Hosting diensten vanuit een GitHub repository.

Nuxt is een open-source webontwikkelingsframework waarmee je server-side gerenderde Vue applicaties en statische sites kunt bouwen. Meer informatie is beschikbaar op de Nuxt website.

Tijdens het deploymentproces installeert Kinsta automatisch de dependencies die in je package.json bestand zijn gedefinieerd.

Statische Site Hosting

  1. Log in op GitHub en maak een nieuwe repository vanuit deze template (Gebruik deze template > Create a new repository): Kinsta – Hello World – NuxtJS.
  2. Voeg in MyKinsta een statische site toe met de Hello World NuxtJS repository en de volgende Build instellingen:
    • Build commando: npm run generate
    • Node versie: 18.16.0
    • Publish directory: .output/public
  3. De site is beschikbaar zodra de build klaar is en de Hello World-pagina wordt geladen op de URL van je site.

Applicatie Hosting

  1. Log in op GitHub en maak een nieuwe repository aan vanuit deze template (gebruik deze template > maak een nieuwe repository): Kinsta – Hello World – NuxtJS.
  2. Voeg in MyKinsta een applicatie toe met de Hello World – NuxtJS repository. Het Start commando kan leeg gelaten worden voor het webproces, omdat Kinsta automatisch het vereiste commando detecteert tijdens de eerste deployment.
  3. De app is beschikbaar zodra de build is voltooid en de Hello World-pagina wordt geladen op de URL van je applicatie.

Webserver instellen

Poort

Kinsta stelt automatisch de PORT omgevingsvariabele in. Je hoeft deze niet te definiëren of te hardcoden in de applicatie.

Start commando

Wanneer je de applicatie implementeert, maakt Kinsta automatisch een webproces aan met npm start als Start commando.

Deployment levenscyclus

Telkens als een deployment wordt gestart (door een applicatie te maken of opnieuw te deployen vanwege een inkomende commit) wordt het commando npm build uitgevoerd, gevolgd door het commando npm start.

Hello World Pagina

De app is beschikbaar zodra de bouw is voltooid en de Hello World-pagina wordt geladen via de URL van je applicatie of site.

Nuxt Hello World pagina na een succesvolle deployment.
Nuxt Hello World pagina na een succesvolle deployment.