Surge VS GitHub Pages: Sådan implementeres et create-react-app-projekt

Som udvikler er der flere måder, du kan vise dine evner til jævnaldrende og potentielle arbejdsgivere. Open source-bidrag er gode. Blogging er fantastisk. Men på et tidspunkt vil du gerne få projekter op på nettet, hvor folk faktisk kan bruge dem.

For mange gange har jeg startet noget lokalt og aldrig set det igennem. Du har muligvis gjort det samme. En af grundene til, at dette er så almindeligt, er på grund af alt det ekstra arbejde, der går i implementering.

Ville det ikke være rart at have et centralt knudepunkt, hvor alle dine projekter bor uden at bekymre sig om hosting og serverkonfiguration? Dette indlæg fører dig gennem to populære implementeringsværktøjer, der kræver et minimum af indsats.

Opret-reager-app

Lad mig fortælle dig om min nye bedste ven inden du går i gang create-react-app. Hvis du har tænkt på at lære React - men bliver taget tilbage med den tid, det kræver at få et projekt i gang - er dette kommandolinjegrænseflade (CLI) værktøj din reddende nåde. Det tager sig af det meste af kogepladen, du har brug for for at starte et projekt.

For at installere det og oprette dit første projekt skal du gå ind i din terminal og køre disse kommandoer:

npm install -g create-react-app 
create-react-app 
cd 

Ud af kassen create-react-appkommer med et par praktiske scripts, der giver dig mulighed for at udvikle dit projekt lokalt og implementere det bagefter. De kan findes i package.jsonfilen i roden til dit projektkatalog.

Brug npm starttil at køre dit projekt lokalt, mens du udvikler det. Brug derefter npm run buildtil at forberede dit projekt til implementering.

Surge.sh og GitHub-sider

Lad os hurtigt fremad. Du har bygget en grundlæggende app og er klar til at implementere den på internettet.

Der er mange muligheder inden for statiske webhostingplatforme, men de to, vi vil arbejde med, er Surge.sh og GitHub Pages.

Begge disse platforme er stærke i sig selv. Hvilken du bruger kommer ned til din situation. Mit mål er at give dig en bedre forståelse af, hvorfor disse værktøjer findes, og hvad du kan gøre med dem.

Bemærk også, at selvom dette indlæg handler om at offentliggøre projekter, der er oprettet med create-react-appCLI, vil Surge og GitHub Pages arbejde med selv de mest basale projekter. Du kan muligvis springe nogle af disse trin over, hvis du ikke bruger React selv.

Surge.sh

Surge er et rigtig fantastisk stykke software, som jeg for nylig opdagede fra en tråd på Reddit. I sin kerne er Surge en CLI, der giver dig mulighed for at implementere dine projekter gratis. Og hurtigt også. Hvad der får Surge til at skille sig ud, er dens enkelhed.

Lad os gennemgå et simpelt eksempel ved hjælp af create-react-app.

Først skal du installere surgepakken globalt:

npm install -g surge 

Nu hvor Surge er installeret på din maskine, skal du forberede dit projekt til implementering. Jeg nævnte ovenfor, der create-react-apphar et script package.jsonkaldet build. Dette script forbereder i det væsentlige applikationen til produktion ved at samle og optimere al koden.

Kør npm run buildi dit projekts rod:

npm run build

Du skal bemærke, at der er oprettet en ny mappe i roden til dit projektmappe, der kaldes build. Denne mappe indeholder den produktionsklare applikation.

Fremragende, du er næsten færdig. Alt der er tilbage er at køre surgekommandoen i dit projekts rod:

surge

Hvis dette er første gang, du kører surge, bliver du bedt om at oprette en konto. Tilføj en e-mail og adgangskode, og tryk derefter på enter. Du vil derefter se output lignende dette:

For at implementere dit projekt har Surge kun brug for to ting fra dig:

  1. Vejen til projektet
  2. Domænet til at være vært for

Projektsti

Du vil bemærke, at projektstienfelt i terminalen er som standard rodmappen. Surge antager, at den mappe, du kører surgekommandoen i, er den mappe, du vil implementere. I dit tilfælde skal du pege Surge på den buildmappe, der blev oprettet, da du løb npm run build.

Hvis din projektsti er path/to/my-project, skal du redigere den til path/to/my-project/build. Når du har foretaget denne ændring, skal du trykke på enter for at bekræfte.

Domæne

Efter indtastning af projektstien vil Surge foreslå et tilfældigt domæne, der skal bruges. Du kan slette det og tilføje dit eget domæne, hvis du ønsker det. Det skal bare have .surge.shudvidelsen i slutningen. Værktøjet giver også mulighed for brugerdefinerede domæner, hvilket er virkelig fantastisk.

Accepter det foreslåede domæne, eller tilføj dit eget (brugerdefineret eller tilfældigt med korrekt overspændingsudvidelse), og tryk derefter på enter.

Det er alt, hvad hun skrev! Naviger til domænet i din browser, og du skal se dit projekt køre.

Bemærk, at hvis din applikation bruger routingklientsiden , anbefaler Surge, at du omdøber index.htmlfilen i din buildmappe til, 200.htmlfør du kører surgekommandoen. Du kan finde ud af mere information i Surge-dokumentationen.

GitHub-sider

GitHub Pages gør det nemt at gøre GitHub-arkiver til fuldt ud statiske websteder. Mange organisationer bruger denne service til at være vært for deres dokumentation og projektdemoer, men du kan bruge den til hvad du vil.

Bemærk, at for at dette skal fungere, skal du først skubbe koden til et lager på GitHub. Hvis dette lyder fremmed for dig, skal du tjekke yderligere dokumentation her.

Hvis du nogensinde har kørt npm run buildmed create-react-appfør, så har du måske bemærket output, der ser sådan ud:

create-react-appleveres med detaljeret dokumentation, der hjælper brugerne med at offentliggøre deres arbejde ved hjælp af alle mulige værktøjer. Her kan du se terminaludgang i realtid, der instruerer os om, hvordan du gør det via GitHub Pages. Lad os prøve det.

Trin 1

Rediger package.jsonved at tilføje et nyt felt med navnethomepage:

"homepage": "//.github.io/"

Hvis dit GitHub-brugernavn er george-lucas, og dit projekts GitHub-lager er SithJS, skal værdien af homepagefeltet være "//george-lucas.github.io/SithJS".

Lad os løbe npm run buildigen efter ændringen:

Har du bemærket den nye output ovenfor? Den create-react-appCLI er at gå os gennem hele processen. Temmelig snazzy.

Trin 2

Dernæst skal du installere gh-pagespluginet. Dette giver os mulighed for at offentliggøre til gh-pagesfilialen på GitHub direkte fra terminalen:

npm install --save-dev gh-pages

gh-pageser en speciel gren, som GitHub Pages bruger til at udgive projekter. Det smukke ved det er, at filialen bor i samme arkiv som dit projekts kode, men ikke påvirker selve projektet.

Bemærk, at hvis du allerede har en gh-pagesfilial i projektets arkiv, opdaterer den filialen i overensstemmelse hermed. Hvis grenen ikke findes, opretter den den i farten.

Trin 3

Tilføj et nyt script til scriptsfeltet indeni package.json. Lad os kalde scriptet deploy:

"deploy" : "npm run build&&gh-pages -d build"

Og endelig lad os køre det:

npm run deploy

npm run deployvil først opbygge dit projekt via npm run build. Derefter offentliggør den det til en gh-pagesfilial på GitHub via gh-pages -d build.

Trin 4

Vi er næsten færdige. Gå til dit projekts arkivindstillinger på GitHub. I sektionen GitHub Pages skal du bekræfte, at dit projekt er indstillet til at bruge gh-pagesfilialen.

Du kan nu navigere til den URL, du indtastede i homepagedin package.jsonfilfelt, hvor du kan se, at dit projekt er blevet implementeret!

Bemærk, at - ligesom med Surge - GitHub Pages også har problemer med routing på klientsiden. create-react-appviser et par løsninger i dokumentationen til GitHub Pages-integration.

Vinderen

Helt ærligt kan du ikke gå galt med nogen af ​​disse muligheder. De er begge gode. Lad os sammenfatte nogle nøglefunktioner for hver:

Overspænding

  • Minimal konfiguration til implementering af et projekt
  • Giver ingen antagelser om anvendt teknologi
  • Problemfri integration med byggeværktøjer som Grunt og Gulp
  • Kan bruges som en udviklingsafhængighed, når du bygger dine egne værktøjer

GitHub-sider

  • Opbevarer projektkode og webside (r) i et enkelt arkiv
  • Centraliserer alle projekter under dit .gith ub.io domæne
  • Implementere fra kommandolinjen eller fra dine lagerindstillinger på GitHub
  • Fungerer godt med statiske stedgeneratorer som Jekyll

Personligt valgte jeg GitHub-sider til mit seneste projekt, fordi jeg allerede bruger GitHub dagligt, og jeg kan godt lide at holde alt centralt. Måske er det min OCD-tale, men jeg elsker at have individuelle GitHub-arkiver til projekter, som jeg kan implementere som underdomæne jake-wies.github.io.

Hvis du bare opretter et testprojekt, eller hvis du vil vise en demo til en klient, er det svært at give Surges superhurtige CLI til at generere en webside. Du kan generere domænet hurtigt og rive det ned bagefter.

I slutningen af ​​dagen er det bedste værktøj til jobbet det, der gør dig produktiv. De oplysninger, jeg har givet, skal give dig en god forståelse af, hvor hver skinner. Audit dit projekt behov og vælg, hvad der passer til dig.

Tak for læsningen! Jeg er en selvlært udvikler og bruger det meste af min fritid på at dykke ned i frontend-værktøjer og skrive mig ud. Kontakt mig på Twitter, hvis du har spørgsmål!