8 gratis React app-hostingservices11 min read

U heeft dus een React-app gebouwd, maar u weet niet zeker hoe of waar u deze moet hosten. In dit artikel leiden we u door 8 gratis React-hostingservices en laten we u zien hoe we deze hebben geïmplementeerd deze React-app we gebruiken ze allemaal en vertellen wat we daarbij hebben geleerd.

We hebben onze app in Figma gebouwd met behulp van de Anima plug-in, waarmee we functionaliteit, responsief gedrag en rijke media konden toevoegen exporteer dev-ready React-code voor de volledige gebruikersinterface. Het kostte ons een dag om te ontwerpen en te implementeren.

Waar u uw React-app gratis kunt hosten

Er is een groeiend aantal serverloze hostingoplossingen beschikbaar dankzij de opkomst van op componenten gebaseerde raamwerken zoals React. Amazon AWS, Microsoft Azure en Google Cloud zijn momenteel de dominante platforms. Er is echter een groeiende verschuiving naar speciale frontend-hostingservices die minder inspanning vergen en waarmee u in een mum van tijd aan de slag kunt – en de meeste omvatten CI/CD. Hier zijn de 8 gratis React app-hostingservices die we hebben getest:

1. Netlificeren

2. Vercel

3. AWS versterken

4. Vuurbasis

5. GitHub-pagina’s

6. GitLab-pagina’s

7. Renderen

8. Schommeling

Laten we eens dieper ingaan op deze gratis React app-hostingservices en laten zien hoe we met elke app een React-app hebben geïmplementeerd. 

Netlificeren

Achtergrond

Netlify is opgericht in 2014 en richtte zich vanaf het begin op het hosten van statische websites. Het trok veel ontwikkelaars aan vanwege de genereuze gratis laag. Een paar jaar later groeide Netlify uit tot een van de populairste JAMstack- en statische websitehosts die er zijn.

Hoe te gebruiken

1. Idealiter registreert of logt u in met GitHub. Dit zorgt ervoor dat u toegang heeft tot de opslagplaatsen op uw profiel en deze snel kunt implementeren.
2. Nadat u bent ingelogd, klikt u op ‘Nieuwe site toevoegen’ en kiest u ‘Een bestaand project importeren’.
3. Klik vervolgens op GitHub als uw provider.
4. Kies de “bankwebsite” of wat uw projectnaam ook is.
5. Verfijn de implementatie-instellingen (in het geval van onze website werken de standaardinstellingen perfect) en klik vervolgens op ‘Site implementeren’.
6. Eenmaal geïmplementeerd, kunt u het bekijken op een openbare URL die u met de wereld kunt delen. Jawel!

Hier is de live app geïmplementeerd op Netlify.

Voor- en nadelen

Netlify is eenvoudig in te stellen en te implementeren, om nog maar te zwijgen van het feit dat dit een van de snelste services is die we hier hebben getest. Een nadeel is dat als je medewerkers en/of een team nodig hebt, je moet upgraden naar een betaald abonnement.

Vercel

Achtergrond

Vercel (oorspronkelijk bekend als Zeit) werd opgericht in 2015 en werd al snel beroemd. Zij zijn de beheerders van Next.js, een populair React-framework voor het bouwen van websites. Ze bieden een gratis laag voor niet-commerciële websites, evenals manieren om hun Edge-netwerk te gebruiken voor serverloze functies.

Hoe te gebruiken

1. Meld u aan of registreer u bij GitHub.
2. Klik op de vervolgkeuzelijst ‘Nieuw toevoegen…’ en selecteer ‘Project’.                                                             
3. Kies de “bankwebsite” of uw favoriete React-project.
4. We gingen met de standaardinstellingen voor de implementatie-instellingen en klikten vervolgens op ‘Implementeren’.
5. Na enige tijd kregen we de website in gebruik.

Hier is de live-URL.

Voor- en nadelen

Vercel heeft enige tijd nodig om het installatiegedeelte van het implementatieproces in de cache op te slaan, maar daarna is het een van de snelste services. Het toont preview-implementaties voor elke branch die je pusht en doet dit snel dankzij caching.

AWS versterken

Achtergrond

AWS is een enorme verzameling cloudproducten, en Amplify wordt geadverteerd als een gemakkelijke manier om er een paar te bemachtigen. Met AWS Amplify kunt u snel full-stack-applicaties op AWS bouwen, verzenden en hosten, met de flexibiliteit om de breedte van de AWS-services te benutten naarmate de gebruikssituaties evolueren.

Hoe te gebruiken

1. Meld u aan of log in bij AWS, zoek vervolgens naar AWS Amplify en klik op ‘Aan de slag’.
2. Kies GitHub en autoriseer het (ik heb het alleen toegestaan ​​voor de repository van de “bankwebsite”).
3. Selecteer de repository in het gedeelte ‘Onlangs bijgewerkte repository’s’.
   1. In de build-instelling moeten we de basisDirectory voor onze app afstand zoals zo: Vervolgens zouden de build-instellingen er als volgt uit moeten zien:
4. Klik in de volgende stap op ‘Opslaan en implementeren’.
5. Na enige tijd zal de website uitgerold en klaar voor gebruik zijn.

En we zijn live! Hier is de URL.

Voor- en nadelen

Je moet de basisDirectory in de implementatiespecificatie: deze wordt niet standaard herkend. De gebruikersinterface voelt een beetje onhandig aan, maar dit is een persoonlijke voorkeur. Er is een enorm potentieel voor AWS Amplify omdat veel andere AWS-webservices binnen handbereik zijn.

Vuurbasis

Achtergrond

Firebase is een Google-service die vooral bekend staat als een realtime opslagplatform. Maar het heeft ook een hostingoptie voor statische websites en Express.js-microservices of API’s, en ondersteunt preview-URL’s voor vestigingen waar uw team aan werkt. Net als bij Netlify, Vercel en anderen, levert het de geïmplementeerde inhoud via een CDN-netwerk.

Hoe te gebruiken

1. Installeren firebase-tools met npm install -g firebase-tools.
2. Log in op Firebase met Firebase-login. Zodra u zich aanmeldt, zou u een bericht als dit moeten zien:
3. Ga naar de projectmap en voer het uit vuurbasis init, zou je zoiets als dit moeten zien: Kies de optie om bestanden te configureren voor Firebase Hosting met optionele GitHub Action-implementaties. Vervolgens kunt u rechtstreeks vanuit de CLI een project maken of de Firebase UI gebruiken om dit te doen en later verbinding maken. We hebben het project vanaf de opdrachtregel gemaakt en zo hebben we de resulterende vragen beantwoord:                                                                  Daarna zullen eenvoudige `firebase.json`- en `.firebaserc`-bestanden worden gemaakt.
4. Ren dan vuurbasis inzetten om de bestanden daadwerkelijk te implementeren vanuit het afstandmap. Als de map ontbreekt, zorg er dan voor dat u deze uitvoert npm run-build eerst bestanden genereren. De vuurbasis inzetten opdracht zou uitvoer moeten genereren die vergelijkbaar is met het onderstaande voorbeeld:

Nu kan dat bekijk de website op de meegeleverde URL. Jawel! 

Voor- en nadelen

Firebase is vrij eenvoudig, maar als u het binnen uw project instelt, zijn de vragen die u moet beantwoorden een beetje verwarrend. Gelukkig hebben we ze in het bovenstaande gedeelte voor u beantwoord, maar ze vereisen inzicht in de daadwerkelijke Firebase-functies voordat u verder kunt gaan. Afgezien daarvan is Firebase snel te implementeren en kan het een URL genereren waar u een voorbeeld van de geïmplementeerde bestanden kunt bekijken. Je kunt het ook eenvoudig automatiseren met GitHub Action-implementaties met de CLI, wat handig is.

GitHub-pagina’s

Achtergrond

GitHub Pages bestaat al geruime tijd en het is een gemakkelijke manier om documenten of een persoonlijke website rechtstreeks vanuit GitHub te publiceren. Het is geweldig voor statische inhoud en veel mensen gebruiken het om eenvoudige sites te implementeren met minimale investeringen. Het is gratis te gebruiken als uw project openbaar is en het is een snelle en goedkope manier om een ​​website te hosten.

Hoe te gebruiken

Houd er rekening mee dat u de App.jsx waar we bellen Router en toevoegen basisnaam ernaar zodat deze overeenkomt met de naam van de repository. Dus dit is hoe App.jsx zou moeten kijken:                                                                                        We moeten de basisnaam omdat GitHub-pagina’s de website zullen implementeren op een URL van deze vorm `https://GITHUB_USERNAME.gitlab.io/REPO_NAME`. De website zal niet goed functioneren zonder dat de basisnaam is ingesteld voor de reageer-router-dom.

1. Nadat de code is gewijzigd, moeten we installeren gh-pagina’s pakket met:
2. En voeg een toe vooraf inzetten en een aanwenden scriptje naar pakket.json:
3. Dan rennen we gewoon weg npm uitvoeren implementeren. Het zal triggeren npm run-build en het zal gebruiken gh-pagina’s om de inhoud ervan te publiceren afstand naar een aparte vestiging op GitHub gebeld gh-pagina’s.
4. Controleer ten slotte of de gh-pagina’s wordt gebruikt voor GitHub-pagina’s zoals hieronder:

Hier is de live-URL.

Voor- en nadelen

Als u een project implementeert dat afwijkt van uw gebruikersnaam, wordt het geïmplementeerd in een submap op ons gratis domein binnen GitHub. Vervolgens moet u extra code schrijven om de logica van het zich in een submap bevinden te ondersteunen.

In ons gebruiksscenario ondersteunt het geen continue out-of-the-box-implementatie, maar u kunt het wel instellen. Eenmaal ingesteld, zijn wijzigingen snel door te voeren.

GitLab-pagina’s

Achtergrond

Net als GitHub heeft GitLab zijn eigen hostingoplossing, en zij noemen dit GitLab Pages. Ik moet het ze geven: het is gemakkelijker om een ​​continue implementatie voor GitLab Pages op te zetten dan voor GitHub Pages.

Hoe te gebruiken

1. Meld u aan of log in op GitLab
2. Voeg een repository toe aan GitLab als je deze daar nog niet hebt. Dat kan vork degene die ik daar heb toegevoegd 
   Net als bij GitHub Pages moet je het App.jsx waar we bellen Router en toevoegen  basisnaam ernaar zodat deze overeenkomt met de naam van de repository. Dit is dus de laatste wijziging:                                                               We moeten de basisnaam omdat GitLab-pagina’s de website zullen implementeren op een URL van deze vorm: https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. De website zal niet goed functioneren zonder dat de basisnaam is ingesteld voor de reageer-router-dom.
3. Zodra je het project hebt bewerkt en naar GitLab hebt gepusht, ga je naar Instellingen > Pagina’s en je wordt begroet met een wizard van vier stappen om de repository naar GitLab Pages te implementeren. 
4. De eerste stap in de wizard is het invoeren van de build-image. We gebruiken de Node.js LTS.
5. Vervolgens voeren we de pre-build-opdracht in. De npm ci zal hier volstaan.
6. Nu voor de bouwstap. We moeten passeren — –dist-dir publiek omdat GitLab Pages verwacht dat de website wordt gebouwd in de publiek map. Sorry, je kunt met geen enkele andere map wegkomen.
7. Leg de nieuw gegenereerde vast .gitlab-ci.yml bestand dat GitLab vertelt hoe uw website moet worden geïmplementeerd.
8. Ga nu naar het gedeelte CI/CD -> Pipelines van de repository en kijk hoe de nieuw toegevoegde pijplijn presteert.
9. Na enige tijd zal de pijplijntaak voltooid zijn en zal de website op GitLab Pages worden geïmplementeerd.

Hier is het resultaat.

Voor- en nadelen

Pakketten zijn traag te installeren en je moet extra code toevoegen om het werkend te krijgen, maar de wizard is super intuïtief en kan in slechts vier stappen worden geïmplementeerd.

Renderen

Achtergrond

Render is een nieuwkomer die in 2019 wordt gelanceerd. Het probeert de manier te verstoren waarop mensen hun diensten inzetten (inclusief statische websites). Tot nu toe doen ze het prima en groeien ze in aantal.

Hoe te gebruiken

1. Meld u aan of log in op Render.
2. Maak een nieuwe statische website door op de knop ‘Nieuw’ te drukken en ‘Statische site’ te selecteren.
3. Kies de opslagplaats die u wilt implementeren.
4. Houd de garen; garen opbouw build-opdracht in de build-instelling. Helaas werkt het niet met npm ci; npm run-build zoals andere diensten dat doen. Wijzig de “Publicatiemap” in afstand en klik op ‘Statische site maken’.
5. Na enige tijd zal Render de code implementeren.

Hier is de live URL van Render.

Voor- en nadelen

Het is erg snel, maar het werkt niet goed voor ons project met de opdrachten `npm ci` en `npm run build`. Alleen ‘garen’ lijkt te werken.

Schommeling

Achtergrond

Surge bestaat al een tijdje. Hun service is meteen eenvoudig te gebruiken en er zijn slechts een of twee opdrachten nodig om uw statische website te implementeren. Het is gratis, maar biedt een betaald abonnement van 30$/maand. Het stoïcisme van het instrument is wat het laat schitteren. Er is geen complexe installatie nodig, installeer gewoon `surge` en voer het uit met `surge`.

Hoe te gebruiken

1. Ren ter voorbereiding npm run-build om statische bestanden binnenin te genereren afstand map. De stijging zal deze gebruiken voor inzet.
2. Rennen npm install –global surge
3. Ren dan stijging.

Een paar dingen om op te merken:
Als het de eerste keer is dat je het gebruikt, moet je een account aanmaken bij Surge. Maak je geen zorgen, het is gemakkelijk. Voer gewoon uw e-mailadres en het gewenste wachtwoord in.

Vervolgens wordt u gevraagd om “project” in te voeren, wat het pad naar het afstand map. Je kunt gewoon toevoegen afstand naar het pad dat u krijgt als u een piek krijgt in de repository die u implementeert.

Voer vervolgens de toekomstige URL van uw website in. Probeer iets unieks, want wat stijging aangeboden werkte niet voor mij.

Na de URL-invoer wordt het stijging zal de inhoud implementeren van afstand over naar de gespecificeerde URL. Dit is wat ik heb:

Voor- en nadelen

Het is snel en eenvoudig en vereist geen aparte interface, maar er wordt geen beschikbare URL voor uw app voorgesteld.

Tijd om voor elke hostingservice te implementeren

Onze top 3 gratis React-hostingservices

1. Netlificeren
2. Vercel
3. Schommeling

Belangrijkste afhaalrestaurants

Na het testen van elk van deze gratis React app-hostingservices, denken we dat Netlify de beste van het stel is. Het biedt snelle implementaties met veel functies die u mogelijk nodig heeft. Direct daarna is er Vercel, die veel functies heeft en redelijk snel is na de eerste implementatie. Dan hebben we Surge, een minimale implementatietool die redelijk goedkoop kan zijn als je besluit te upgraden.

Automatiseer uw frontend-build en verzend uw app 10x sneller. Meer informatie.