Ga naar de content
Kinsta.comCommunityOpen in een nieuwe tabMyKinstaOpen in een nieuwe tab

JavaScript frameworks

Hieronder volgen voorbeelden van hoe je applicaties kunt opzetten met JavaScript frameworks om te deployen op Kinsta’s Applicatie Hosting diensten vanuit een GitHub repository. Hieronder vallen:

We hebben ook voorbeelden van Node.js applicatie.

Vereisten

  • De Quickstart templates van Kinsta worden opgeslagen en beheerd in GitHub; daarom heb je een GitHub account nodig om er toegang toe te krijgen.
  • Je moet een MyKinsta account aanmaken om de applicatie te deployen.

Astro SSR

Dit is een voorbeeld van hoe je een Astro site kunt opzetten met server-side rendering (SSR) op Kinsta’s Applicatie Hosting diensten vanuit een GitHub repository.

Standaard is Astro een statische sitebouwer die zich richt op websites met veel inhoud om snellere laadtijden te leveren met minder JavaScript. Het inschakelen van SSR in Astro maakt het mogelijk om dynamische functies zoals sessies voor inloggen, verbinding maken met een database en meer toe te voegen aan je site. Meer informatie is beschikbaar op de Astro website.

  1. Log in op GitHub en maak een nieuwe repository van deze template (Use this template > Create a new repository): Kinsta – Hello World – SSR Site With Astro.
  2. Klik in MyKinsta op Applicaties > Applicatie toevoegen > selecteer GitHub, klik op Verbind git provider > Autoriseren, en log in op je GitHub account.
  3. Kies de Hello World Astro SSR repository en een Datacenter locatie. Laat alle andere instellingen als standaard en klik op Doorgaan bij elke stap.
  4. Klik bij de stap Samenvatting op Deploy nu.

Tijdens de deployment detecteert Kinsta automatisch het Start commando voor het webproces en installeert de dependencies die zijn gedefinieerd in je package.json bestand. De app is beschikbaar zodra de deployment is voltooid en de Kinsta Welkomstpagina wordt geladen op de URL van je applicatie.

Kinsta welkomstpagina na succesvolle installatie van Astro.
Kinsta welkomstpagina na succesvolle installatie van Astro.

Bekijk je liever de videoversie?

Webserver instellen

Poort

Kinsta stelt automatisch de omgevingsvariabele PORT in. Je moet deze niet zelf definiëren of hard coderen in de applicatie.

Start commando

Wanneer je de applicatie deployt, maakt Kinsta automatisch een webproces aan met npm start als Start commando. Zorg ervoor dat je dit commando gebruikt om je server te starten.

Deployment levenscyclus

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

Deno

Dit is een voorbeeld van hoe je een Deno applicatie instelt om te deployen op Kinsta’s Applicatie Hosting diensten vanuit een GitHub repository.

Deno is een JavaScript, TypeScript en WebAssembly runtime waarmee je code kunt uitvoeren buiten een webbrowser waarmee je veilige server-side applicaties kunt bouwen. Meer informatie is beschikbaar op de Deno website.

  1. Log in op GitHub en maak een nieuwe repository van deze template (Use this template > Create a new repository): Kinsta – Hello World – Deno.
  2. Klik in MyKinsta op Applicaties > Applicatie toevoegen > selecteer GitHub, klik op Verbind git provider > Autoriseren, en log in op je GitHub account.
  3. Kies de Hello World – Deno repository en een Datacenter locatie. Laat alle andere instellingen als standaard en klik op Doorgaan bij elke stap.
  4. Klik bij de stap Samenvatting op Deploy nu.

Tijdens de deployment detecteert Kinsta automatisch het Start commando voor het webproces en installeert de dependencies die zijn gedefinieerd in je package.json bestand. De app is beschikbaar zodra de deployment is voltooid en een Hello World pagina wordt geladen op de URL van je applicatie.

Deno Hello World page after successful installation.
Deno Hello World pagina na succesvolle installatie.

Webserver instellen

Poort

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

Startcommando

Wanneer je de applicatie deployt, maakt Kinsta automatisch een webproces aan met npm start als startcommando.

Deployment levenscyclus

Telkens wanneer een deployment wordt gestart (door het maken van een applicatie of opnieuw deployen vanwege een binnenkomende commit), wordt de npm build command uitgevoerd, gevolgd door het npm start commando.

Next.js met Prisma ORM

Dit is een voorbeeld van hoe je een Next.js en Prisma applicatie instelt om te deployen op Kinsta’s Applicatie Hosting en Database Hosting diensten vanuit een GitHub repository.

Prisma is een open-source database toolkit die databasetoegang voor developers vereenvoudigt door een type-safe en intuïtieve API te bieden. Het ondersteunt meerdere databases en genereert efficiënte, geoptimaliseerde SQL-queries voor snellere prestaties. Meer informatie is beschikbaar op de website prisma.io.

Deze applicatie vereist een PostgreSQL database om te kunnen werken.

  1. Klik in MyKinsta op Databases > Database toevoegen > voer een naam in > selecteer bij Database typePostgreSQL, kies een Datacenter locatie en Grootte en klik op Doorgaan > Database maken.
  2. Log in op GitHub en maak een nieuwe repository van deze template (Use this template > Create a new repository): Kinsta – Hello World – Prisma.
  3. Klik in MyKinsta op Applicaties > Applicatie toevoegen > selecteer GitHub, klik op Verbind git provider > Autoriseren, en log in op je GitHub account.
  4. Kies de Hello World – Prisma repository en dezelfde Datacenter locatie als je database. Laat alle andere instellingen als standaard en klik op Doorgaan bij elke stap.
  5. Klik bij de stap Samenvatting op Deploy nu.
  6. Zodra de database klaar is voor verbindingen (er staat een groen vinkje naast), moet je de interne verbinding tussen je applicatie en de database toevoegen. Klik op Applicaties > naam applicatie > Instellingen > Verbinding toevoegen.
  7. Selecteer je database > selecteer Omgevingsvariabelen toevoegen… > selecteer Omgevingsvariabelen toevoegen aan de applicatie > klik op Verbinding toevoegen.
  8. Ga naar de Deployments pagina van de applicatie en klik op Deploy nu > Deploy applicatie.

Tijdens de rollout detecteert Kinsta automatisch het Start commando voor het webproces en installeert de dependencies die zijn gedefinieerd in je package.json bestand. De app is beschikbaar zodra de deployment is voltooid en de Kinsta welkomstpagina wordt geladen op de URL van je applicatie.

Kinsta welkomstpagina na succesvolle installatie van Next.js en Prisma.
Kinsta welkomstpagina na succesvolle installatie van Next.js en Prisma.

Webserver instellen

Poort

Kinsta stelt automatisch de omgevingsvariabele PORT in. Je moet deze niet zelf definiëren en je moet deze niet hard coderen in de applicatie.

Start commando

Kinsta maakt automatisch een webproces aan bij het deployen van een applicatie met npm start als startcommando. Zorg ervoor dat je dit commando gebruikt om je server te starten.

Deployment levenscyclus

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

React

Dit is een voorbeeld van hoe je een React applicatie instelt om te deployen op Kinsta’s Applicatie Hosting diensten vanuit een GitHub repository.

React is een populaire JavaScript bibliotheek voor het bouwen van gebruikersinterfaces. Hiermee kunnen developers herbruikbare UI componenten maken en de UI efficiënt bijwerken als reactie op gegevenswijzigingen. Meer informatie is beschikbaar op de React website.

  1. Log in op GitHub en maak een nieuwe repository van deze template (Use this template > Create a new repository): Kinsta – Hello World – React.
  2. Klik in MyKinsta op Applicaties > Applicatie toevoegen > selecteer GitHub, klik op Verbind git provider > Autoriseren, en log in op je GitHub account.
  3. Kies de Hello World – React repository en een Datacenter locatie. Laat alle andere instellingen als standaard en klik op Doorgaan bij elke stap.
  4. Klik bij de stap Samenvatting op Deploy nu.

Tijdens de deployment detecteert Kinsta automatisch het Start commando voor het webproces en installeert de dependencies die zijn gedefinieerd in je package.json bestand. De app is beschikbaar zodra de deployment is voltooid en de Kinsta Welkomstpagina wordt geladen op de URL van je applicatie.

Kinsta welkomstpagina na het succesvol deployen van React.
Kinsta welkomstpagina na het succesvol deployen van React.

Webserver instellen

Poort

Kinsta stelt automatisch de omgevingsvariabele PORT in. Je moet deze niet zelf definiëren en je moet deze niet hard coderen in de applicatie.

Start commando

Kinsta maakt automatisch een webproces aan op basis van het commando npm start in het package.json bestand bij het deployen van een applicatie.

Deployment levenscyclus

Telkens wanneer een deployment wordt gestart (door het maken van een applicatie of door het opnieuw deployen als gevolg van een binnenkomende commit), worden de commando’s npm start en npm build uitgevoerd.

React met Vite

Dit is een voorbeeld van hoe je een React applicatie kunt opzetten met Vite om te deployen op Kinsta’s Applicatie Hosting diensten vanuit een GitHub repository.

Vite is een tool die je helpt gedecentraliseerde applicaties te bouwen; het biedt devtools en API’s om het ontwikkelproces te vereenvoudigen en ondersteunt meerdere programmeertalen. Meer informatie is te vinden op de website van Vite.

React is een populaire JavaScript bibliotheek voor het bouwen van gebruikersinterfaces. Hiermee kunnen developers herbruikbare UI-componenten maken en de UI efficiënt bijwerken als reactie op gegevenswijzigingen. Meer informatie is beschikbaar op de React website.

  1. Log in op GitHub en maak een nieuwe repository van deze template (Use this template > Create a new repository): Kinsta – Hello World – Vite + React.
  2. Klik in MyKinsta op Applicaties > Applicatie toevoegen > selecteer GitHub, klik op Verbind git provider > Autoriseren, en log in op je GitHub account.
  3. Kies de Hello World – Vite + React repository en een Datacenter locatie. Laat alle andere instellingen als standaard en klik op Doorgaan bij elke stap.
  4. Klik bij de stap Samenvatting op Deploy nu.

Tijdens de deployment detecteert Kinsta automatisch het Start commando voor het webproces en installeert de dependencies die zijn gedefinieerd in je package.json bestand. De app is beschikbaar zodra de deployment is voltooid en de Kinsta Welkomstpagina wordt geladen op de URL van je applicatie.

Kinsta welkomstpagina na het succesvol deployen van React met Vite.
Kinsta welkomstpagina na het succesvol deployen van React met Vite.

Webserver instellen

Poort

Kinsta stelt automatisch de omgevingsvariabele PORT in. Je moet deze niet zelf definiëren en je moet deze niet hard coderen in de applicatie.

Start commando

Kinsta maakt automatisch een webproces aan op basis van het commando npm start in het package.json bestand bij het deployen van een applicatie.

Deployment levenscyclus

Telkens als een deployment wordt gestart (door het maken van een applicatie of een redeploying als gevolg van een inkomende commit), worden de commando’s npm install en npm build uitgevoerd.

Was dit artikel nuttig?