Konfigurera en React-applikation eller statisk webbplats på Kinsta

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

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. Utöver detta blir det 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 arkiv från den här mallen (Använd den här mallen > Skapa ett nytt arkiv): Kinsta – Hello world – React.
2. I MyKinsta, lägg till en statisk webbplats med Hello World – React-förrådet och följande Bygg-inställningar:
   • Byggkommando: npm kör bygg
   • Nodversion: 18.16.0
   • Publicerings-katalog: build
3. Webbplatsen är tillgänglig så snart som 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 arkiv från den här mallen (Använd den här mallen > Skapa ett nytt arkiv): Kinsta – Hello world – React.
2. I MyKinsta lägger du till en applikation med Hello World – React-kodförrådet. 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 inte hårdkoda den i applikationen.

Startkommando

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

Livscykel för distribution

När en distribution initieras (genom att skapa en applikation eller omplacera på grund av en inkommande commit), körs kommandona npm start 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.