React

Hieronder staan voorbeelden van hoe je een React statische site en een React met Vite statische site kunt opzetten om te deployen op Kinsta’s Statische Site Hosting 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.

Je kunt deze Quickstart templates ook gebruiken op Kinsta’s Applicatie Hosting zonder extra configuratie. Als je Applicatie Hosting gebruikt, kun je het Start commando leeg laten voor het webproces, omdat Kinsta automatisch de vereiste opdracht detecteert tijdens de eerste deployment.

Vereisten

• Kinsta’s Quickstart templates worden opgeslagen en beheerd in GitHub; daarom heb je een GitHub account nodig om ze te openen.
• Je moet een MyKinsta account aanmaken om de applicatie te deployen.

Een statische React site deployen

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 Statische sites > Site toevoegen > selecteer GitHub, klik op Verbind git provider > Autoriseren, en log in op je GitHub account.
3. Kies de Hello World – React repository, klik op Doorgaan, en voer het volgende in bij de Build instellingen:
   • Build commando: npm run build
   • Node versie: 18.16.0
   • Publish directory: build

Kinsta installeert automatisch de dependencies die zijn gedefinieerd in je package.json bestand tijdens het deploymentproces. De site is beschikbaar zodra de deployment is voltooid en de Kinsta welkomstpagina wordt geladen op de URL van je site.

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), worden de commando’s npm start en npm build uitgevoerd.

React met Vite

Dit is een voorbeeld van hoe je een React statische site opzet met Vite om te deployen op Kinsta’s Statische Site Hosting 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.

Kinsta installeert automatisch de dependencies die zijn gedefinieerd in je package.json bestand tijdens het deployment proces.

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. Voeg een statische site toe in MyKinsta met de Hello World – Vite + React repository en de volgende Build instellingen:
   • Build commando: npm run build
   • Node versie: 18.16.0
   • Publishdirectory: dist
3. De site is beschikbaar zodra het bouwen is voltooid en de Kinsta welkomstpagina wordt geladen op de URL van je site.

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), worden de commando’s npm install en npm build uitgevoerd.