8 besplatnih usluga hostinga aplikacija React10 min read

Dakle, izgradili ste React aplikaciju, ali niste sigurni kako i gdje je ugostiti. U ovom članku ćemo vas provesti kroz 8 besplatnih usluga hostinga React, pokazati vam kako smo implementirali ovu aplikaciju React koristeći svaki od njih i reći vam što smo naučili u procesu.

Napravili smo našu aplikaciju u Figma koristeći Anima dodatak, koji nam je omogućio dodavanje funkcionalnosti, responzivnog ponašanja i obogaćenih medija izvoz React koda spremnog za razvojne programere za cijelo korisničko sučelje. Trebao nam je jedan dan za dizajn i implementaciju.

Gdje možete besplatno ugostiti svoju React aplikaciju

Postoji sve veći broj hosting rješenja bez poslužitelja zahvaljujući porastu okvira temeljenih na komponentama kao što je React. Amazon AWS, Microsoft Azure i Google Cloud trenutno su dominantne platforme. Međutim, postoji sve veći pomak prema namjenskim uslugama hostinga koje zahtijevaju manje truda i mogu vas pokrenuti u tren oka – a većina uključuje CI/CD. Evo 8 besplatnih usluga hostinga aplikacija React koje smo testirali:

1. Netlify

2. Vercel

3. AWS Amplify

4. Firebase

5. GitHub Stranice

6. GitLab stranice

7. Render

8. Prenapon

Uronimo detaljnije u ove besplatne usluge hostinga aplikacija React i demonstriramo kako smo implementirali React aplikaciju koristeći svaku od njih. 

Netlify

Pozadina

Netlify je osnovan 2014. godine i od početka se fokusirao na hostiranje statičnih web stranica. Privukao je mnogo programera zbog svoje izdašne besplatne razine. Nekoliko godina kasnije, Netlify je izrastao u jednog od najpopularnijih hostova za JAMstack i statične web stranice.

Kako koristiti

1. Idealno bi bilo da se registrirate ili prijavite sa GitHub. To osigurava da možete pristupiti spremištima na svom profilu i brzo ih implementirati.
2. Nakon što se prijavite, kliknite “Dodaj novu stranicu” i odaberite “Uvezi postojeći projekt.”
3. Zatim kliknite GitHub kao svog pružatelja usluga.
4. Odaberite “web-mjesto banke” ili kako god se zove vaš projekt.
5. Fino podesite postavke postavljanja (u slučaju naše web stranice, zadane vrijednosti rade savršeno), a zatim kliknite “Postavi web mjesto.”
6. Nakon implementacije, možete ga vidjeti na javnom URL koji možete podijeliti sa svijetom. Jupi!

Evo aplikacija uživo postavljena na Netlify.

Za i protiv

Netlify je jednostavan za postavljanje i implementaciju, a da ne spominjemo da je to jedna od najbržih usluga koje smo ovdje testirali. Jedan nedostatak je da ako trebate suradnike i/ili tim, morate nadograditi na plaćeni plan.

Vercel

Pozadina

Vercel (izvorno poznat kao Zeit) osnovan je 2015. i brzo se proslavio. Oni su održavatelji Next.js, popularnog okvira React za izradu web stranica. Oni nude besplatnu razinu za nekomercijalne web stranice, kao i načine korištenja svoje Edge mreže za funkcije bez poslužitelja.

Kako koristiti

1. Prijavite se ili registrirajte na GitHub.
2. Kliknite padajući izbornik “Dodaj novi…” i odaberite “Projekt”.                                                             
3. Odaberite “web-stranicu banke” ili svoj omiljeni projekt React.
4. Odabrali smo zadane postavke za implementaciju, a zatim kliknuli “Razpostavi”.
5. Nakon nekog vremena postavili smo web stranicu.

Evo uživo URL.

Za i protiv

Vercel treba neko vrijeme da predmemorira instalacijski dio procesa implementacije, ali nakon toga, to je jedna od najbržih usluga. Prikazuje implementacije pregleda za svaku granu koju pritisnete i radi to brzo zbog predmemoriranja.

AWS Amplify

Pozadina

AWS je ogromna zbirka cloud proizvoda, a Amplify se reklamira kao jednostavan način da se dočepate nekih od njih. Uz AWS Amplify, možete brzo izgraditi, isporučiti i ugostiti full-stack aplikacije na AWS-u, uz fleksibilnost da iskoristite širinu AWS usluga kako se slučajevi upotrebe razvijaju.

Kako koristiti

1. Prijavite se ili se prijavite na AWS, zatim potražite AWS Amplify i kliknite “Get Started”.
2. Odaberite GitHub i autorizirajte ga (dopustio sam samo za repo “banka-website”).
3. Odaberite repo u odjeljku “Nedavno ažurirana spremišta”.
   1. U postavci izrade morat ćemo promijeniti baseDirectory kako bi naša aplikacija bila dist ovako: Tada bi postavke izgradnje trebale izgledati ovako:
4. U sljedećem koraku kliknite “Spremi i implementiraj”.
5. Nakon nekog vremena web stranica će biti postavljena i spremna za korištenje.

I živimo! Evo URL.

Za i protiv

Morate urediti baseDirectory u specifikaciji implementacije—ne prepoznaje se odmah. UI se čini pomalo nezgrapnim, ali ovo je osobna preferencija. Postoji ogroman potencijal za AWS Amplify jer su mnoge druge AWS web usluge na dohvat ruke.

Firebase

Pozadina

Firebase je Googleova usluga koja je najpoznatija kao platforma za pohranu u stvarnom vremenu. Ali također ima opciju hostinga za statične web stranice i mikroservise Express.js ili API, te podržava pregled URL za grane na kojima vaš tim radi. Kao i kod Netlifyja, Vercel i drugih, on poslužuje postavljeni sadržaj preko CDN mreže.

Kako koristiti

1. Instaliraj firebase-alati sa npm install -g firebase-tools.
2. Prijavite se u Firebase s prijava na firebase. Nakon što se prijavite, trebali biste vidjeti poruku poput ove:
3. Premjestite se u direktorij projekta i pokrenite firebase init, trebali biste vidjeti nešto poput ovoga: Odaberite opciju za konfiguriranje datoteka za Firebase Hosting s dodatnim implementacijama GitHub Action. Zatim možete izraditi projekt izravno iz CLI-ja ili koristiti Firebase UI da biste to učinili i kasnije ga povezali. Stvorili smo projekt iz naredbenog retka i ovako smo odgovorili na pitanja koja su nastala:                                                                    Nakon toga će se stvoriti jednostavne datoteke `firebase.json` i `.firebaserc`.
4. Onda trči implementacija firebase da biste zapravo implementirali datoteke iz distimenik. Ako direktorij nedostaje, obavezno ga pokrenite npm pokrenuti izgradnju prvi za generiranje datoteka. The implementacija firebase naredba bi trebala generirati izlaz sličan primjeru u nastavku:

Sada možete pogledajte web stranicu na dostavljenom URL. Jupi! 

Za i protiv

Firebase je prilično jednostavan, ali kada ga postavite unutar svog projekta, pitanja na koja trebate odgovoriti pomalo su zbunjujuća. Srećom, odgovorili smo vam na njih u gornjem odjeljku, ali oni zahtijevaju razumijevanje stvarnih značajki Firebasea prije nastavka. Osim toga, Firebase se brzo postavlja i može generirati URL gdje možete pregledati implementirane datoteke. Također ga možete jednostavno automatizirati s implementacijama GitHub Action s CLI-jem, što je zgodno.

GitHub Stranice

Pozadina

GitHub Pages postoji već neko vrijeme i to je jednostavan način za objavljivanje dokumenata ili osobne web stranice izravno sa GitHub. Lijep je za statični sadržaj i mnogi ga ljudi koriste za postavljanje jednostavnih web stranica uz minimalna ulaganja. Besplatna je za upotrebu ako je vaš projekt javan i brz je i jeftin način za hostiranje web stranice.

Kako koristiti

Napominjemo da morate urediti App.jsx gdje zovemo Usmjerivač i dodajte osnovno ime da odgovara nazivu spremišta. Dakle, ovako App.jsx treba izgledati:                                                                                        Moramo promijeniti osnovno ime jer će stranice GitHub implementirati web mjesto na URL ovog oblika `https://GITHUB_USERNAME.gitlab.io/REPO_NAME`. Web stranica neće ispravno funkcionirati bez osnovnog imena postavljenog za reagirati-usmjerivač-dom.

1. Nakon što se kod promijeni, moramo instalirati gh-stranice paket sa:
2. I dodajte a unaprijed rasporediti i a rasporediti skripta za paket.json:
3. Zatim jednostavno trčimo npm pokrenuti implementaciju. To će pokrenuti npm pokrenuti izgradnju i koristit će se gh-stranice objaviti sadržaj dist u zasebnu granu na GitHub tzv gh-stranice.
4. Na kraju provjerite je li gh-stranice koristi se za GitHub stranice poput dolje:

Evo uživo URL.

Za i protiv

Ako implementirate projekt koji se razlikuje od vašeg korisničkog imena, on će biti implementiran unutar poddirektorija na našoj besplatnoj domeni unutar GitHub. Zatim morate napisati dodatni kod da biste podržali logiku unutar poddirektorija.

Ne podržava kontinuiranu implementaciju izvan okvira u našem slučaju upotrebe, ali možete je postaviti. Nakon postavljanja, brzo se implementiraju promjene.

GitLab stranice

Pozadina

Kao i GitHub, GitLab ima vlastito hosting rješenje, a zovu ga GitLab Pages. Moram im dati, lakše je postaviti kontinuiranu implementaciju na GitLab stranice nego na GitHub stranice.

Kako koristiti

1. Prijavite se ili prijavite na GitLab
2. Dodajte repo u GitLab ako ga tamo već nemate. možete vilicu koju sam tamo dodao 
   Slično GitHub stranicama, morate urediti App.jsx gdje zovemo Usmjerivač i dodajte  osnovno ime da odgovara nazivu spremišta. Dakle, ovo je konačna promjena:                                                               Moramo promijeniti osnovno ime jer će GitLab stranice postaviti web mjesto na URL ovog oblika: https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. Web stranica neće ispravno funkcionirati bez osnovnog imena postavljenog za reagirati-usmjerivač-dom.
3. Nakon što uredite i gurnete projekt u GitLab, idite na Postavke > Stranice i dočekat će vas čarobnjak u četiri koraka za implementaciju repoa na GitLab stranice. 
4. Prvi korak u čarobnjaku je unos slike za izgradnju. Koristit ćemo Node.js LTS.
5. Zatim ćemo unijeti naredbu pre-build. The npm ci ovdje će biti dovoljno.
6. Sada za korak izgradnje. Moramo proći — –dist-dir javni jer GitLab Pages očekuje da web mjesto bude ugrađeno u javni imenik. Ne možete se izvući ni s jednim drugim imenikom, oprostite.
7. Predajte novogenerirani .gitlab-ci.yml datoteku koja govori GitLabu kako implementirati vašu web stranicu.
8. Sada idite na odjeljak CI/CD -> Cjevovodi u spremištu i promatrajte izvedbu novododanog cjevovoda.
9. Nakon nekog vremena, posao cjevovoda će završiti i web stranica će biti postavljena na GitLab stranice.

Evo rezultat.

Za i protiv

Paketi se sporo instaliraju i morate dodati dodatni kod da bi funkcionirali, ali čarobnjak je super intuitivan sa samo četiri koraka za implementaciju.

Render

Pozadina

Render je novo dijete u bloku koje je pokrenuto 2019. Pokušava poremetiti način na koji ljudi koriste svoje usluge (uključujući statične web stranice). Zasad im ide dobro i sve više raste.

Kako koristiti

1. Prijavite se ili se prijavite na Render.
2. Napravite novu statičnu web stranicu pritiskom na gumb “Novo” i odabirom “Statična stranica”.
3. Odaberite repo koji želite implementirati.
4. Zadrži pređa; pređa graditi naredba za izgradnju u postavci za izgradnju. Nažalost, ne radi s npm ci; npm pokrenuti izgradnju kao i druge službe. Promijenite “Objavi imenik” u dist i kliknite “Stvori statičnu stranicu”.
5. Nakon nekog vremena Render će implementirati kod.

Evo URL uživo iz Rendera.

Za i protiv

Zaista je brz, ali ne radi dobro za naš projekt s naredbama `npm ci` i `npm run build`. Čini se da samo “pređa” funkcionira.

Prenapon

Pozadina

Surge postoji već neko vrijeme. Pravo, njihova je usluga jednostavna za korištenje i potrebne su samo jedna ili dvije naredbe za postavljanje vaše statične web stranice. Besplatan je, ali nudi plaćeni plan od 30 USD mjesečno. Stoicizam alata je ono što ga čini sjajnim. Nije potrebno složeno postavljanje, samo instalirajte `surge` i pokrenite ga sa `surge`.

Kako koristiti

1. Za pripremu, trčite npm pokrenuti izgradnju za generiranje statičkih datoteka unutra dist imenik. The val koristit će ih za implementaciju.
2. Trči npm instalacija –globalni porast
3. Onda trči val.

Imajte na umu nekoliko stvari:
Ako ga pokrećete prvi put, morat ćete kreirati račun kod Surgea. Ne brinite, lako je. Samo unesite svoju e-poštu i željenu lozinku.

Zatim ćete dobiti upit da unesete “projekt”, koji bi trebao biti put do dist imenik. Možete samo dodati dist na put koji ste dobili ako ste pokrenuli surge unutar repoa koji implementirate.

Zatim unesite budući URL vaše web stranice. Pokušajte nešto jedinstveno jer što val ponuđeno mi nije odgovaralo.

Nakon unosa URL, val će rasporediti sadržaje iz dist preko navedenog URL. Evo što sam dobio:

Za i protiv

Brz je i jednostavan i ne zahtijeva od vas da usvojite zasebno sučelje – ali ne uspijeva predložiti dostupni URL za vašu aplikaciju.

Vrijeme je za implementaciju za svaku uslugu hostinga

Naše 3 najbolje besplatne usluge hostinga React

1. Netlify
2. Vercel
3. Prenapon

Ključni podaci za van

Nakon testiranja svake od ovih besplatnih usluga hostinga aplikacija React, mislimo da je Netlify najbolja od svih. Omogućuje brzu implementaciju s puno značajki koje bi vam mogle zatrebati. Odmah nakon toga je Vercel koji ima mnogo značajki i prilično je brz nakon početne implementacije. Zatim, imamo Surge koji je alat za minimalnu implementaciju koji može biti prilično jeftin ako se odlučite za nadogradnju.

Automatizirajte svoju izradu sučelja i isporučite svoju aplikaciju 10 puta brže. Saznajte više.