8 gratis React app-vertstjenester10 min read

So you built a React app, but you’re not sure how or where to host it. In this article, we’ll walk you through 8 free React hosting services, show you how we deployed this React app using each one, and tell you what we learned in the process.

Vi bygde appen vår i Figma ved å bruke Anima plugin, som tillot oss å legge til funksjonalitet, responsiv oppførsel og rike medier, da export dev-ready React code for the entire UI. Det tok oss en dag å designe og distribuere.

Hvor du kan være vert for din React-app gratis

There are a growing number of serverless hosting solutions out there thanks to the rise of component-based frameworks like React. Amazon AWS, Microsoft Azure, and Google Cloud are currently the dominant platforms. Det er imidlertid et økende skifte mot dedikerte frontend-hostingtjenester som krever mindre innsats, og som kan få deg i gang på kort tid – og de fleste inkluderer CI/CD. Here are the 8 free React app hosting services we tested:

1. Netlify

2. Vercel

3. AWS Amplify

4. Firebase

5. GitHub Pages

6. GitLab Pages

7. Render

8. Surge

Let’s dive into these free React app hosting services in more detail, and demonstrate how we deployed a React app using each one. 

Netlify

Bakgrunn

Netlify was founded in 2014 and it focused from the start on hosting static websites. It attracted a lot of developers because of its generous free tier. A couple of years down the line, Netlify grew to be one of the most popular JAMstack and static website hosts around.

Hvordan bruke

1. Ideally, you’ll register or sign in with GitHub. This makes sure you can access the repositories on your profile and deploy them quickly.
2. Once logged in, click «Add new site» and choose «Import an existing project.»
3. Klikk deretter GitHub som din leverandør.
4. Velg «bank-nettstedet» eller hva prosjektet ditt heter.
5. Finjuster distribusjonsinnstillingene (når det gjelder nettstedet vårt, fungerer standardinnstillingene perfekt), og klikk deretter «Deploy nettsted».
6. Når den er distribuert, kan du se den på en offentlig URL som du kan dele med verden. Jaja!

Her er live-appen som er distribuert på Netlify.

Fordeler og ulemper

Netlify er lett å sette opp og distribuere, for ikke å nevne at det er en av de raskeste tjenestene vi testet her. En ulempe er at hvis du trenger samarbeidspartnere og/eller et team, må du oppgradere til en betalt plan.

Vercel

Bakgrunn

Vercel (opprinnelig kjent som Zeit) ble grunnlagt i 2015 og ble raskt kjent. De er vedlikeholderne av Next.js, et populært React-rammeverk for å bygge nettsteder. De tilbyr et gratis nivå til ikke-kommersielle nettsteder, samt måter å bruke Edge-nettverket for serverløse funksjoner.

Hvordan bruke

1. Logg på eller registrer deg med GitHub.
2. Klikk på rullegardinmenyen «Legg til ny…» og velg «Prosjekt».                                                             
3. Velg «bank-nettstedet» eller ditt favoritt React-prosjekt.
4. Vi gikk med standardinnstillingene for distribusjonsinnstillinger og klikket deretter «Deploy».
5. Etter en tid fikk vi utplassert nettsiden.

Her er live URL.

Fordeler og ulemper

Vercel trenger litt tid på å bufre installasjonsdelen av distribusjonsprosessen, men etter det er det en av de raskeste tjenestene. Den viser forhåndsvisninger for hver gren du trykker på, og den gjør det raskt på grunn av caching.

AWS Amplify

Bakgrunn

AWS er ​​en enorm samling av skyprodukter, og Amplify er annonsert som en enkel måte å få tak i noen av dem. Med AWS Amplify kan du raskt bygge, sende og være vert for fullstack-applikasjoner på AWS, med fleksibiliteten til å utnytte bredden av AWS-tjenester etter hvert som brukstilfeller utvikler seg.

Hvordan bruke

1. Registrer deg eller logg på AWS, søk deretter etter AWS Amplify og klikk på «Kom i gang».
2. Velg GitHub og autoriser den (jeg tillot det bare for repoen «banknettsted»).
3. Velg repoen i delen «Nylig oppdaterte depoter».
   1. I byggeinnstillingen må vi endre baseDirectory for appen vår å være dist sånn: Deretter skal byggeinnstillingene se slik ut:
4. I neste trinn klikker du på «Lagre og distribuer».
5. Etter en tid vil nettsiden være distribuert og klar til bruk.

Og vi lever! Her er URL.

Fordeler og ulemper

Du må redigere baseDirectory i distribusjonsspesifikasjonen – den gjenkjennes ikke ut av esken. Brukergrensesnittet føles litt klønete, men dette er en personlig preferanse. Det er et stort potensial for AWS Amplify fordi mange andre AWS-netttjenester er innen rekkevidde.

Firebase

Bakgrunn

Firebase er en Google-tjeneste som er best kjent som en sanntidslagringsplattform. Men den har også et vertsalternativ for statiske nettsteder og Express.js-mikrotjenester eller APIs, og støtter forhåndsvisning av URL-er for grener teamet ditt jobber med. Som med Netlify, Vercel og andre, serverer den det distribuerte innholdet over et CDN-nettverk.

Hvordan bruke

1. Installer firebase-verktøy med npm installer -g firebase-verktøy.
2. Logg på Firebase med firebase pålogging. Når du logger på, bør du se en melding som denne:
3. Flytt inn i prosjektkatalogen og kjør brannbase init, bør du se noe slikt: Velg alternativet for å konfigurere filer for Firebase Hosting med valgfrie GitHub Action-distribusjoner. Deretter kan du opprette et prosjekt rett fra CLI eller bruke Firebase UI for å gjøre det og senere koble det til. Vi opprettet prosjektet fra kommandolinjen, og dette er hvordan vi svarte på de resulterende spørsmålene:                                                                  Deretter blir det opprettet enkle j `fire og `er.` filer.
4. Så løp brannbase utplassering å faktisk distribuere filene fra distkatalog. Hvis katalogen mangler, sørg for å kjøre npm kjøre bygge først til å generere filer. Den brannbase utplassering kommandoen skal generere utdata som ligner på eksemplet nedenfor:

Nå kan du se nettsiden på den medfølgende URL. Jaja! 

Fordeler og ulemper

Firebase er ganske enkelt, men når du setter det opp i prosjektet ditt, er spørsmålene du trenger å svare på litt forvirrende. Heldigvis svarte vi dem for deg i avsnittet ovenfor, men de krever en forståelse av de faktiske Firebase-funksjonene før du fortsetter. Annet enn det er Firebase rask å distribuere og kan generere en URL der du kan forhåndsvise de distribuerte filene. Du kan også enkelt automatisere det med GitHub Action-distribusjoner med CLI, som er pent.

GitHub Pages

Bakgrunn

GitHub Pages har eksistert ganske lenge, og det er en enkel måte å publisere dokumenter eller et personlig nettsted direkte fra GitHub. Det er nydelig for statisk innhold, og mange bruker det til å distribuere enkle nettsteder med minimal investering. Det er gratis å bruke hvis prosjektet ditt er offentlig og er en rask og billig måte å være vert for et nettsted.

Hvordan bruke

Vær oppmerksom på at du må redigere App.jsx hvor vi ringer Ruter og legg til basenavn til den for å matche reponavnet. Så dette er hvordan App.jsx skal se:                                                                                        Vi må endre basenavn fordi GitHub-sider vil distribuere nettstedet til en URL i denne formen `https://GITHUB_USERNAME.gitlab.io/REPO_NAME`. Nettstedet vil ikke fungere ordentlig uten basenavnet som er angitt for reager-ruter-dom.

1. Etter at koden endres, må vi installere gh-sider pakke med:
2. Og legg til en forhåndsdistribusjon og a utplassere skript til package.json:
3. Da løper vi bare npm kjøre distribusjon. Det vil utløse npm kjøre bygge og den vil bruke gh-sider å publisere innholdet i dist til en egen gren på GitHub kalt gh-sider.
4. Til slutt, sjekk om gh-sider brukes for GitHub-sider som nedenfor:

Her er live URL.

Fordeler og ulemper

Hvis du distribuerer et prosjekt som er forskjellig fra brukernavnet ditt, vil det bli distribuert i en underkatalog på vårt gratis domene innenfor GitHub. Deretter må du skrive ekstra kode for å støtte logikken i å være inne i en underkatalog.

Den støtter ikke kontinuerlig distribusjon rett ut av esken i vårt brukstilfelle, men du kan sette den opp. Når det er konfigurert, er det raskt å implementere endringer.

GitLab Pages

Bakgrunn

I likhet med GitHub har GitLab sin egen hostingløsning, og de kaller den GitLab Pages. Jeg må gi det til dem, det er lettere å sette opp en kontinuerlig distribusjon til GitLab Pages enn det er for GitHub Pages.

Hvordan bruke

1. Registrer deg eller logg inn på GitLab
2. Legg til en repo til GitLab hvis du ikke har den der allerede. Du kan gaffel den jeg la til der 
   I likhet med GitHub-sider, må du redigere App.jsx hvor vi ringer Ruter og legg til  basenavn til den for å matche reponavnet. Så dette er den siste endringen:                                                               Vi må endre basenavn fordi GitLab-sider vil distribuere nettstedet til en URL i denne formen: https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. Nettstedet vil ikke fungere ordentlig uten basenavnet som er angitt for reager-ruter-dom.
3. Når du har redigert og overført prosjektet til GitLab, gå til Innstillinger > Sider og du vil bli møtt med en fire-trinns veiviser for å distribuere repoen til GitLab Pages. 
4. Det første trinnet i veiviseren er å gå inn i byggebildet. Vi bruker Node.js LTS.
5. Deretter går vi inn i pre-build-kommandoen. De npm ci vil være nok her.
6. Nå for byggetrinnet. Vi må bestå — –dist-dir offentlig fordi GitLab Pages forventer å ha nettstedet bygget i offentlig katalog. Du kan ikke komme unna med noen annen katalog, beklager.
7. Forplikte det nylig genererte .gitlab-ci.yml fil som forteller GitLab hvordan du skal distribuere nettstedet ditt.
8. Gå nå til CI/CD -> Pipelines-delen av repoen og observer at den nylig lagt til pipeline fungerer.
9. Etter en tid vil pipeline-jobben fullføres og nettstedet vil bli distribuert på GitLab-sider.

Her er resultatet.

Fordeler og ulemper

Pakker er trege å installere, og du må legge til ekstra kode for å få den til å fungere, men veiviseren er superintuitiv med bare fire trinn å distribuere.

Render

Bakgrunn

Render er en ny gutt på blokken som lanseres i 2019. Den prøver å forstyrre måten folk distribuerer tjenestene sine på (inkludert statiske nettsteder). Så langt har de det bra og vokser i antall.

Hvordan bruke

1. Registrer deg eller logg inn på Render.
2. Opprett et nytt statisk nettsted ved å trykke på «Ny»-knappen og velge «Statisk nettsted».
3. Velg repoen du vil distribuere.
4. Behold garn; oppbygging av garn bygg-kommando i bygge-innstillingen. Dessverre fungerer det ikke med npm ci; npm kjøre bygge som andre tjenester gjør. Endre «Publiser katalog» til dist og klikk «Opprett statisk nettsted».
5. Etter en tid vil Render distribuere koden.

Her er live URL fra Render.

Fordeler og ulemper

Det er veldig raskt, men det fungerer ikke bra for prosjektet vårt med kommandoene `npm ci` og `npm run build`. Bare `garn` ser ut til å fungere.

Surge

Bakgrunn

Surge har eksistert en stund nå. Rett for flaggermusen er tjenesten deres enkel å bruke, og det tar bare en eller to kommandoer for å distribuere ditt statiske nettsted. Det er gratis, men tilbyr en betalt plan på 30 $/måned. Stoisismen til verktøyet er det som får det til å skinne. Ingen komplisert oppsett er nødvendig, bare installer `surge` og kjør den med `surge`.

Hvordan bruke

1. For å forberede, løp npm kjøre bygge for å generere statiske filer inne dist katalog. Den bølge vil bruke disse for distribusjon.
2. Løp npm install –global surge
3. Så løp bølge.

Et par ting å merke seg:
Hvis det er første gang du kjører det, må du opprette en konto hos Surge. Ikke bekymre deg, det er enkelt. Bare skriv inn din e-post og ønsket passord.

Deretter vil du bli bedt om å legge inn «prosjekt», som skal være veien til dist katalog. Du kan bare legge til dist til banen du får hvis du løp bølge inne i repoen du distribuerer.

Skriv deretter inn den fremtidige URL på nettstedet ditt. Prøv noe unikt fordi hva bølge tilbudt fungerte ikke for meg.

Etter URL-inngangen vil bølge vil distribuere innhold fra dist over til spesifisert URL. Her er hva jeg fikk:

Fordeler og ulemper

Det er raskt og enkelt og krever ikke at du tar i bruk et eget grensesnitt – men det foreslår ikke en tilgjengelig URL for appen din.

På tide å distribuere hver vertstjeneste

Våre topp 3 gratis React-vertstjenester

1. Netlify
2. Vercel
3. Surge

Viktige takeaways

Etter å ha testet hver av disse gratis React app-vertstjenestene, tror vi Netlify er den beste av gjengen. Det gir raske distribusjoner med mange funksjoner du kanskje trenger. Rett etter det er Vercel som har mange funksjoner og er ganske rask etter den første distribusjonen. Deretter har vi Surge som er et minimalt distribusjonsverktøy som kan være ganske billig hvis du bestemmer deg for å oppgradere.

Automatiser frontend-byggingen og send appen 10 ganger raskere. Lær mer.