Dit is een voorbeeld van hoe je een React applicatie of statische site kunt opzetten met Vite om te deployen op Kinsta’s Applicatie Hosting of Statische Site Hosting vanuit een GitHub repository.
Vite is een tool die je helpt gedecentraliseerde applicaties te bouwen; het biedt ontwikkelaarstools en API’s om het ontwikkelingsproces 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.
Kinsta installeert automatisch de afhankelijkheden die zijn gedefinieerd in je package.json bestand tijdens het deployment proces.
Statische Site Hosting
- Log in op GitHub en maak een nieuwe repository van deze template (Use this template > Create a new repository): Kinsta – Hello World – Vite + React.
- 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
- Publish directory: dist
- Build commando:
- De site is beschikbaar zodra het bouwen is voltooid en de Kinsta Welkomstpagina wordt geladen op de URL van je site.
Applicatie Hosting
- Log in op GitHub en maak een nieuwe repository van dit sjabloon (Use this template > Create a new repository): Kinsta – Hello World – Vite + React.
- Voeg een applicatie toe in MyKinsta met de Hello World – Vite + React repository. Het Start commando kan leeg blijven voor het webproces, omdat Kinsta automatisch het vereiste commando detecteert tijdens de eerste deployment.
- De app is beschikbaar zodra de build is voltooid en de Kinsta welkomstpagina wordt geladen op de URL van je applicatie.
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 door het herinstalleren als gevolg van een inkomende commit), worden de commando’s npm install en npm build uitgevoerd.
Welkomstpagina
De app of site is beschikbaar zodra de bouw is voltooid en de Kinsta welkomstpagina wordt geladen op de URL van je applicatie of statische site.
