Konfigurera en React-applikation eller statisk webbplats med Vite på Kinsta

Det här är ett exempel på hur man ställer in en React-applikation eller statisk webbplats med Vite från ett GitHub-kodförråd, för distribuering på Kinsta’s tjänster för Applikationshosting eller hosting av statiska webbplatser.

Vite är ett verktyg som hjälper dig att bygga decentraliserade applikationer. Det tillhandahåller exempelvis utvecklarverktyg och API: er för att förenkla utvecklingsprocessen. Vite stöder dessutom flera programmeringsspråk. Mer information finns på Vite’s webbplats.

React är ett populärt JavaScript-bibliotek för att bygga användargränssnitt. Det gör det exempelvis möjligt för utvecklare att skapa återanvändbara UI-komponenter. Det blir dessutom mer effektivt att uppdatera UI som svar på dataändringar. Mer information finns på React-webbplatsen.

Kinsta installerar beroenden som definieras i din package.json-fil under distribuerings-processen automatiskt.

Hosting av statiska webbplatser

1. Logga in på GitHub och skapa därefter ett nytt kodförråd från den här mallen (Använd den här mallen > Skapa ett nytt kodförråd): Kinsta – Hello world – Vite + React.
2. I MyKinsta, lägg till en statisk webbplats med Hello World – Vite + React-förrådet och följande Bygg-inställningar:
   • Byggkommando: npm run build
   • Nodversion: 18.16.0
   • Publicerings-katalog: dist
3. Webbplatsen är tillgänglig så snart bygget är klart, och Kinsta’s välkomstsida laddas på din webbplats webbadress.

Applikationshosting

1. Logga in på GitHub och skapa därefter ett nytt kodförråd från den här mallen (Använd den här mallen > Skapa ett nytt kodförråd): Kinsta – Hello world – Vite + React.
2. I MyKinsta lägger du till en applikation med Hello World – Vite + React-förvaret. Startkommandot kan lämnas tomt för webb-processen. Kinsta upptäcker nämligen det nödvändiga kommandot under den första distribueringen automatiskt.
3. Appen är tillgänglig så snart som bygget är klart, och Kinsta’s välkomstsida laddas på din applikations webbadress.

Inställning av webbserver

Port

Kinsta ställer automatiskt in miljövariabeln PORT. Du bör därför inte definiera den själv, och du bör inte hårdkoda den i applikationen.

Startkommando

Kinsta skapar automatiskt en webbprocess baserat på kommandot npm start i filen package.json. Detta sker alltid när du distribuerar en applikation.

Livscykel för distribuering

När en distribution initieras (exempelvis genom att skapa en applikation eller omplacera på grund av ett inkommande utförande), körs kommandona npm install och npm build.

Välkomstsida

Appen eller webbplatsen är tillgänglig så snart som bygget är klart, och Kinsta’s välkomstsida laddas på din applikations webbadress eller den statiska webbplatsens webbadress.