8 gratis React app-värdtjänster12 min read

Så du byggde en React-app, men du är inte säker på hur eller var du ska vara värd för den. I den här artikeln går vi igenom 8 gratis React-värdtjänster, visar dig hur vi distribuerade denna React-app använda var och en och berätta vad vi lärde oss under processen.

Vi byggde vår app i Figma med hjälp av Anima plugin, som gjorde det möjligt för oss att lägga till funktionalitet, responsivt beteende och rich media exportera dev-ready React-kod för hela användargränssnittet. Det tog oss en dag att designa och implementera.

Var du kan vara värd för din React-app gratis

Det finns ett växande antal serverlösa värdlösningar där ute tack vare uppkomsten av komponentbaserade ramverk som React. Amazon AWS, Microsoft Azure och Google Cloud är för närvarande de dominerande plattformarna. Det finns dock ett växande skifte mot dedikerade frontend-värdtjänster som kräver mindre ansträngning och som kan få dig igång på nolltid – och de flesta inkluderar CI/CD. Här är de 8 gratis React-appvärdtjänsterna som vi testade:

1. Netlify

2. Vercel

3. AWS Amplify

4. Firebase

5. GitHub sidor

6. GitLab-sidor

7. Rendera

8. Surge

Låt oss dyka in i dessa gratis React-appvärdtjänster mer i detalj och demonstrera hur vi distribuerade en React-app med var och en. 

Netlify

Bakgrund

Netlify grundades 2014 och fokuserade från början på att vara värd för statiska webbplatser. Det lockade många utvecklare på grund av dess generösa gratisnivå. Ett par år senare växte Netlify till att bli en av de mest populära JAMstack- och statiska webbplatsvärdarna.

Hur man använder

1. Helst ska du registrera dig eller logga in med GitHub. Detta säkerställer att du kan komma åt arkiven på din profil och distribuera dem snabbt.
2. När du är inloggad klickar du på ”Lägg till ny webbplats” och väljer ”Importera ett befintligt projekt.”
3. Klicka sedan på GitHub som din leverantör.
4. Välj ”bank-webbplatsen” eller vad ditt projekt heter.
5. Finjustera distributionsinställningarna (när det gäller vår webbplats fungerar standardinställningarna perfekt), klicka sedan på ”Distribuera webbplats”.
6. När du har distribuerat den kan du se den på en offentlig URL som du kan dela med världen. Jaja!

Här är liveappen som är installerad på Netlify.

För- och nackdelar

Netlify är lätt att installera och distribuera, för att inte tala om att det är en av de snabbaste tjänsterna vi testade här. En nackdel är att om du behöver kollaboratörer och/eller ett team måste du uppgradera till en betald plan.

Vercel

Bakgrund

Vercel (ursprungligen känd som Zeit) grundades 2015 och blev snabbt berömmelse. De är underhållare av Next.js, ett populärt React-ramverk för att bygga webbplatser. De erbjuder en gratis nivå till icke-kommersiella webbplatser, såväl som sätt att använda deras Edge-nätverk för serverlösa funktioner.

Hur man använder

1. Logga in eller registrera dig med GitHub.
2. Klicka på rullgardinsmenyn ”Lägg till ny…” och välj ”Projekt”.                                                             
3. Välj ”bank-webbplatsen” eller ditt favoritprojekt React.
4. Vi gick med standardinställningarna för distributionsinställningar och klickade sedan på ”Distribuera”.
5. Efter ett tag fick vi webbsidan utplacerad.

Här är live URL.

För- och nackdelar

Vercel behöver lite tid för att cachelagra installationsdelen av distributionsprocessen, men efter det är det en av de snabbaste tjänsterna. Det visar förhandsgranskningar för varje gren du trycker på och det gör det snabbt på grund av caching.

AWS Amplify

Bakgrund

AWS är en enorm samling molnprodukter, och Amplify annonseras som ett enkelt sätt att få tag i några av dem. Med AWS Amplify kan du snabbt bygga, skicka och vara värd för fullstack-applikationer på AWS, med flexibiliteten att utnyttja bredden av AWS-tjänster i takt med att användningsfallen utvecklas.

Hur man använder

1. Registrera dig eller logga in på AWS, sök sedan efter AWS Amplify och klicka på ”Kom igång”.
2. Välj GitHub och auktorisera det (jag tillät det bara för ”bank-webbplatsen”-repo).
3. Välj repo i avsnittet ”Nyligen uppdaterade förråd”.
   1. I bygginställningen måste vi ändra baseDirectory för att vår app ska vara dist sådär: Sedan bör bygginställningarna se ut så här:
4. I nästa steg klickar du på ”Spara och distribuera”.
5. Efter en tid kommer webbplatsen att distribueras och redo att användas.

Och vi är live! Här är URL.

För- och nackdelar

Du måste redigera baseDirectory i distributionsspecifikationen – det känns inte igen direkt. Användargränssnittet känns lite klumpigt, men detta är en personlig preferens. Det finns en enorm potential för AWS Amplify eftersom många andra AWS-webbtjänster är inom räckhåll.

Firebase

Bakgrund

Firebase är en Google-tjänst som är mest känd som en lagringsplattform i realtid. Men den har också ett värdalternativ för statiska webbplatser och Express.js-mikrotjänster eller APIs, och stöder förhandsvisning av URLs för grenar ditt team arbetar med. Som med Netlify, Vercel och andra, serverar den det distribuerade innehållet över ett CDN-nätverk.

Hur man använder

1. Installera firebase-verktyg med npm installera -g firebase-tools.
2. Logga in på Firebase med firebase-inloggning. När du har loggat in bör du se ett meddelande som detta:
3. Flytta in i projektkatalogen och kör firebase init, du borde se något sånt här: Välj alternativet att konfigurera filer för Firebase Hosting med valfria GitHub Action-distributioner. Sedan kan du skapa ett projekt direkt från CLI eller använda Firebase UI för att göra det och senare ansluta det. Vi skapade projektet från kommandoraden, och så här besvarade vi de resulterande frågorna:                                                                  Efter det skapas enkla j-fire- och `bas-filer.`
4. Spring sedan Firebase utplacering för att faktiskt distribuera filerna från distkatalog. Om katalogen saknas, se till att köra npm kör bygg först att generera filer. Den Firebase utplacering kommandot bör generera utdata som liknar exemplet nedan:

Nu kan du se webbplatsen på den medföljande URL. Jaja! 

För- och nackdelar

Firebase är ganska enkelt, men när du konfigurerar det i ditt projekt är frågorna du behöver besvara lite förvirrande. Lyckligtvis besvarade vi dem åt dig i avsnittet ovan, men de kräver en förståelse för de faktiska Firebase-funktionerna innan du fortsätter. Utöver det är Firebase snabb att distribuera och kan generera en URL där du kan förhandsgranska de distribuerade filerna. Du kan också enkelt automatisera det med GitHub Action-distributioner med CLI, vilket är snyggt.

GitHub sidor

Bakgrund

GitHub Pages har funnits ganska länge och det är ett enkelt sätt att publicera dokument eller en personlig webbplats direkt från GitHub. Det är underbart för statiskt innehåll och många använder det för att distribuera enkla webbplatser med minimala investeringar. Det är gratis att använda om ditt projekt är offentligt och är ett snabbt och billigt sätt att vara värd för en webbplats.

Hur man använder

Observera att du måste redigera App.jsx dit vi ringer Router och lägg till basnamn till den för att matcha reponamnet. Så här är det App.jsx ska titta:                                                                                        Vi måste ändra basnamn eftersom GitHub-sidor kommer att distribuera webbplatsen till en URL av denna form ”https://GITHUB_USERNAME.gitlab.io/REPO_NAME”. Webbplatsen fungerar inte korrekt utan basnamnet inställt för reagera-router-dom.

1. Efter koden ändras måste vi installera gh-sidor paket med:
2. Och lägg till en förinstallation och a distribuera manus till package.json:
3. Sedan springer vi helt enkelt npm kör driftsättning. Det kommer att trigga npm kör bygg och den kommer att använda gh-sidor att publicera innehållet i dist till en separat gren på GitHub anropad gh-sidor.
4. Slutligen, kontrollera om gh-sidor används för GitHub-sidor som nedan:

Här är live URL.

För- och nackdelar

Om du distribuerar ett projekt som skiljer sig från ditt användarnamn, kommer det att distribueras i en underkatalog på vår kostnadsfria domän inom GitHub. Sedan måste du skriva extra kod för att stödja logiken i att vara inne i en underkatalog.

Den stöder inte kontinuerlig driftsättning direkt i vårt användningsfall, men du kan ställa in den. När det väl har ställts in går det snabbt att implementera ändringar.

GitLab-sidor

Bakgrund

Liksom GitHub har GitLab sin egen värdlösning, och de kallar det GitLab Pages. Jag måste ge dem det, det är lättare att sätta upp en kontinuerlig distribution till GitLab Pages än det är för GitHub Pages.

Hur man använder

1. Registrera dig eller logga in på GitLab
2. Lägg till ett repo till GitLab om du inte redan har det där. Du kan gaffel den jag la till där 
   I likhet med GitHub-sidor måste du redigera App.jsx dit vi ringer Router och lägg till  basnamn till den för att matcha reponamnet. Så detta är den sista förändringen:                                                               Vi måste ändra basnamn eftersom GitLab-sidor kommer att distribuera webbplatsen till en URL i denna form: https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. Webbplatsen fungerar inte korrekt utan basnamnet inställt för reagera-router-dom.
3. När du har redigerat och skickat projektet till GitLab, gå till Inställningar > Sidor och du kommer att hälsas med en guide i fyra steg för att distribuera repet till GitLab Pages. 
4. Det första steget i guiden är att gå in i byggbilden. Vi kommer att använda Node.js LTS.
5. Därefter kommer vi att ange pre-build-kommandot. De npm ci kommer att räcka här.
6. Nu till byggsteget. Vi måste passera — –dist-dir public eftersom GitLab Pages förväntar sig att ha webbplatsen inbyggd i offentliga katalog. Du kan inte komma undan med någon annan katalog, tyvärr.
7. Begå det nygenererade .gitlab-ci.yml fil som talar om för GitLab hur du distribuerar din webbplats.
8. Gå nu till CI/CD -> Pipelines-sektionen i repet och observera att den nyligen tillagda pipelinen fungerar.
9. Efter en tid kommer pipeline-jobbet att slutföras och webbplatsen kommer att distribueras på GitLab-sidor.

Här är resultatet.

För- och nackdelar

Paketen är långsamma att installera och du måste lägga till extra kod för att få det att fungera, men guiden är superintuitiv med bara fyra steg att distribuera.

Rendera

Bakgrund

Render är ett nytt barn på blocket som lanseras 2019. Det försöker störa hur folk distribuerar sina tjänster (inklusive statiska webbplatser). Hittills mår de bra och växer i antal.

Hur man använder

1. Registrera dig eller logga in på Render.
2. Skapa en ny statisk webbplats genom att trycka på knappen ”Ny” och välja ”Statisk webbplats”.
3. Välj det arkiv du vill distribuera.
4. Behåll garn; garnbyggd byggkommando i bygginställningen. Tyvärr fungerar det inte med npm ci; npm kör bygg som andra tjänster gör. Ändra ”Publicera katalog” till dist och klicka på ”Skapa statisk webbplats”.
5. Efter en tid kommer Render att distribuera koden.

Här är live URL från Render.

För- och nackdelar

Det är riktigt snabbt, men det fungerar inte bra för vårt projekt med kommandon `npm ci` och `npm run build`. Bara `garn` verkar fungera.

Surge

Bakgrund

Surge har funnits ett tag nu. Till höger är deras tjänst enkel att använda och det krävs bara ett eller två kommandon för att distribuera din statiska webbplats. Det är gratis, men erbjuder en betald plan på 30 $/månad. Verktygets stoicism är det som får det att lysa. Ingen komplex installation behövs, bara installera `surge` och kör den med `surge`.

Hur man använder

1. För att förbereda, spring npm kör bygg för att generera statiska filer inuti dist katalog. Den uppsving kommer att använda dem för distribution.
2. Kör npm install –global surge
3. Spring sedan uppsving.

Några saker att notera:
Om det är första gången du kör det måste du skapa ett konto hos Surge. Oroa dig inte, det är lätt. Ange bara din e-postadress och önskat lösenord.

Sedan kommer du att bli ombedd att ange ”projekt”, vilket bör vara vägen till dist katalog. Du kan bara lägga till dist till vägen du får om du körde en svallvåg inuti repet du distribuerar.

Mata sedan in den framtida URL för din webbplats. Prova något unikt eftersom vad uppsving erbjuds fungerade inte för mig.

Efter URL-ingången, uppsving kommer att distribuera innehåll från dist över till den specificerade URL. Här är vad jag fick:

För- och nackdelar

Det är snabbt och enkelt och kräver inte att du använder ett separat gränssnitt – men det kan inte föreslå en tillgänglig URL för din app.

Dags att distribuera för varje värdtjänst

Våra topp 3 gratis React-värdtjänster

1. Netlify
2. Vercel
3. Surge

Nyckel takeaways

Efter att ha testat var och en av dessa gratis värdtjänster för React-appar tror vi att Netlify är den bästa i gänget. Det ger snabba implementeringar med massor av funktioner du kan behöva. Strax efter det är Vercel som har massor av funktioner och är ganska snabb efter den första utplaceringen. Sedan har vi Surge som är ett minimalt installationsverktyg som kan vara ganska billigt om du bestämmer dig för att uppgradera.

Automatisera ditt frontendbygge och skicka din app 10 gånger snabbare. Läs mer.