Surge VS GitHub -sivut: Kuinka luoda-reagoida-sovellus-projekti otetaan käyttöön

Kehittäjänä on useita tapoja, joilla voit osoittaa taitosi ikäisillesi ja mahdollisille työnantajille. Avoimen lähdekoodin panokset ovat suuria. Bloggaaminen on hienoa. Mutta jossain vaiheessa haluat saada projektit verkkoon, jossa ihmiset voivat todella käyttää niitä.

Liian monta kertaa olen aloittanut jotain paikallisesti enkä koskaan nähnyt sitä läpi. Olet ehkä tehnyt saman. Yksi syy tähän on niin yleistä, koska kaikki käyttöönottoon liittyvät ylimääräiset työt johtuvat.

Eikö olisikaan mukavaa saada keskuskeskus, jossa kaikki projektisi asuvat huolimatta isännöinnistä ja palvelimen määrityksistä? Tässä viestissä käydään läpi kaksi suosittua käyttöönottotyökalua, jotka vaativat vähäistä vaivaa.

luoda-reagoida-sovellus

Ennen kuin aloitat, haluan kertoa teille uusi paras ystävä, create-react-app. Jos olet ajatellut oppia Reactia - mutta olet ottanut takaisin ajan, jonka se vaatii projektin käynnistämiseen, tämä komentoriviliittymän (CLI) työkalu on sinun armoasi. Se huolehtii suurimmasta osasta projektin aloittamiseen tarvittavaa kattilaa.

Asenna se ja luo ensimmäinen projekti siirtymällä päätelaitteeseesi ja suorittamalla nämä komennot:

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

Laatikossa create-react-appon muutama kätevä skripti, joiden avulla voit kehittää projektiasi paikallisesti ja ottaa sen käyttöön myöhemmin. Ne löytyvät package.jsonprojektihakemiston juuressa olevasta tiedostosta.

Käytä npm startprojektin suorittamiseen paikallisesti samalla, kun kehität sitä. Sitten käytä npm run buildvalmistella projektin käyttöönottoa varten.

Surge.sh- ja GitHub-sivut

Nopeasti eteenpäin hieman. Olet rakentanut perussovelluksen ja olet valmis ottamaan sen käyttöön verkossa.

Staattisten sivustojen isäntäalustojen alueella on monia vaihtoehtoja, mutta kaksi, joiden kanssa työskentelemme, ovat Surge.sh ja GitHub Pages.

Molemmat näistä alustoista ovat itsessään tehokkaita. Kumpi käytät, tulee alas tilanteeseesi. Tavoitteenani on antaa sinulle parempi käsitys siitä, miksi nämä työkalut ovat olemassa ja mitä voit tehdä niiden kanssa.

Huomaa myös, että vaikka tässä viestissä on kyse create-react-appCLI: llä luotujen projektien julkaisemisesta , Surge- ja GitHub Pages -sovellukset toimivat myös perustavanlaatuisimpien projektien kanssa. Voit ehkä ohittaa joitain näistä vaiheista, jos et käytä itse Reactia.

Surge.sh

Surge on todella mahtava ohjelmisto, jonka löysin äskettäin Reddit-langasta. Ytimessä Surge on CLI, jonka avulla voit ottaa projektisi käyttöön ilmaiseksi. Ja myös nopeasti. Surge todella erottuu sen yksinkertaisuudesta.

Käydään läpi yksinkertainen esimerkki create-react-app.

Asenna surgepaketti ensin maailmanlaajuisesti:

npm install -g surge 

Nyt kun Surge on asennettu koneellesi, sinun on valmisteltava projekti käyttöönottoa varten. Mainitsin yllä, create-react-appjolla on komento package.jsonkutsutulla build. Tämä komentosarja valmistelee lähinnä sovelluksen tuotantoa varten niputtamalla ja optimoimalla koko koodin.

Suorita npm run buildprojektisi juuressa:

npm run build

Huomaa, että uusi kansio on luotu projektihakemistosi päähakemistoon nimeltä build. Tämä kansio sisältää tuotantovalmiiden sovellusten.

Erinomainen, olet melkein valmis. Ainoa mitä on jäljellä, on suorittaa surgekomento projektisi juuressa:

surge

Jos tämä on ensimmäinen kerta, surgesinua pyydetään luomaan tili. Lisää sähköpostiosoite ja salasana ja paina Enter. Sitten näet samanlaisen tuotoksen:

Projektin käyttöönottamiseksi Surge tarvitsee vain kaksi asiaa sinulta:

  1. Polku projektiin
  2. Verkkotunnus, jolla sitä isännöidään

Projektin polku

Huomaat, että projektin polkukentän pääte oletuksena juurihakemistoon. Surge olettaa, että kumpi tahansa hakemisto, jossa suoritat surgekomennon, on hakemisto, jonka haluat ottaa käyttöön. Sinun tapauksessasi sinun on osoitettava Surge buildhakemistoon, joka luotiin suoritettaessa npm run build.

Jos projektisi polku on path/to/my-project, muokkaa tätä kohtaan path/to/my-project/build. Kun olet tehnyt tämän muutoksen, vahvista painamalla Enter.

Verkkotunnus

Kun olet kirjoittanut projektin polun, Surge ehdottaa satunnaista verkkotunnusta käytettäväksi. Voit poistaa sen ja lisätä oman verkkotunnuksesi, jos haluat. Sillä on vain oltava .surge.shlaajennus lopussa. Työkalu sallii myös mukautetut verkkotunnukset, mikä on todella mahtavaa.

Hyväksy ehdotettu verkkotunnus tai lisää oma (mukautettu tai satunnainen, jossa on oikea ylijännitteen laajennus) ja paina sitten Enter.

Siinä kaikki mitä hän kirjoitti! Siirry selaimesi verkkotunnukseen ja projektisi pitäisi näkyä käynnissä.

Huomaa, että jos sovelluksesi käyttää asiakaspuolen reititystä , Surge suosittelee, että nimeät hakemistossa olevan index.htmltiedoston uudelleen ennen komennon suorittamista. Löydät lisätietoja Surge-dokumentaatiosta.build200.htmlsurge

GitHub-sivut

GitHub-sivujen avulla on helppo muuttaa GitHub-arkistot täysimittaisiksi staattisiksi verkkosivustoiksi. Monet organisaatiot käyttävät tätä palvelua dokumenttiensa ja projektidemojensa ylläpitoon, mutta voit käyttää sitä mihin tahansa.

Huomaa, että tämä toimii, sinun on ensin työnnettävä koodi GitHubin tietovarastoon. Jos tämä kuulostaa vieraalta sinulle, tutustu muihin asiakirjoihin täällä.

Jos olet joskus npm run buildkäyttänyt create-react-appaiemmin, olet ehkä huomannut seuraavanlaisen tuotoksen:

create-react-appmukana tulee yksityiskohtainen dokumentaatio, joka auttaa käyttäjiä julkaisemaan työnsä kaikenlaisten työkalujen avulla. Täällä näet reaaliaikaisen päätelaitteen, joka opastaa meitä tekemään niin GitHub Pagesin kautta. Kokeillaan sitä.

Vaihe 1

Muokkaa package.jsonlisäämällä uusi kenttä nimeltähomepage:

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

Jos GitHub-käyttäjänimesi on george-lucasja projektisi GitHub-arkisto on SithJS, kentän arvon homepagetulisi olla "//george-lucas.github.io/SithJS".

Juetaan npm run buildtaas muutoksen jälkeen:

Huomasitko uuden tuotoksen yllä? create-react-appCLI on kävely meidät läpi koko prosessin. Melko snazzy.

Vaihe 2

Seuraavaksi sinun on asennettava gh-pageslaajennus. Tämän avulla voimme julkaista gh-pagesGitHubin haaratoimistolle suoraan terminaalista:

npm install --save-dev gh-pages

gh-pageson erityinen haara, jota GitHub Pages käyttää projektien julkaisemiseen. Kaunis asia on, että haara asuu samassa arkistossa kuin projektisi koodi, mutta ei vaikuta itse projektiin.

Huomaa, että jos sinulla on jo gh-pageshaara projektisi arkistossa, se päivittää haaran vastaavasti. Jos haaraa ei ole, se luo sen lennossa.

Vaihe 3

Lisää uusi komentosarja scriptskenttään package.json. Soitetaan komentosarja deploy:

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

Ja lopuksi suoritetaan se:

npm run deploy

npm run deployrakentaa projektisi ensin kautta npm run build. Sitten se julkaisee sen gh-pageshaaratoimistoon GitHubissa gh-pages -d build.

Vaihe 4

Olemme melkein valmista. Siirry projektisi arkistoasetuksiin GitHubissa. Vuonna GitHub Sivut osio, vahvistavat, että projekti on asetettu käyttämään gh-pageshaara.

Nyt voit siirtyä tiedostosi homepagekenttään kirjoittamaasi URL-osoitteeseen package.json, jossa näet, että projekti on otettu käyttöön!

Huomaa, että kuten Surge, GitHub Pagesilla on myös ongelmia asiakaspuolen reitityksessä. create-react-appluetellaan muutama ratkaisu GitHub Pages -integraation dokumentaatiossa.

Voittaja

Rehellisesti sanottuna et voi mennä pieleen kummassakaan näistä vaihtoehdoista. He ovat molemmat hienoja. Kerrotaan uudelleen joidenkin keskeisistä ominaisuuksista:

Ylijännite

  • Pienin määritys projektin käyttöönottoa varten
  • Ei tee oletuksia käytetystä tekniikasta
  • Saumaton integrointi rakennustyökalujen, kuten Grunt ja Gulp, kanssa
  • Voidaan käyttää kehitysriippuvuutena omien työkalujen rakentamisessa

GitHub-sivut

  • Pitää projektikoodin ja verkkosivut yhdellä arkistossa
  • Keskitä kaikki projektit .gith ub.io -verkkotunnuksesi alle
  • Ota käyttöön komentoriviltä tai arkistoasetuksista GitHubissa
  • Toimii hyvin staattisten sivustojen generaattoreiden, kuten Jekyllin, kanssa

Henkilökohtaisesti valitsin GitHub Pages viimeisimpään projektiini, koska käytän jo GitHubia päivittäin ja pidän kaiken keskitetysti. Ehkä se on OCD-puheeni, mutta rakastan yksittäisiä GitHub-arkistoja projekteille, jotka voin ottaa käyttöön aliverkkotunnuksena jake-wies.github.io.

Jos luot yksinkertaisesti testiprojektia tai haluat näyttää esittely asiakkaalle, Surgen supernopean CLI: n käyttäminen verkkosivun luomiseen on vaikea siirtää. Voit luoda verkkotunnuksen nopeasti ja repiä sen jälkeenpäin.

Päivän päätteeksi paras työkalu työhön on se, joka tekee sinusta tuottavan. Antamieni tietojen pitäisi antaa sinulle hyvä käsitys siitä, missä kukin loistaa. Tarkasta projektisi tarpeet ja valitse sinulle sopiva.

Kiitos lukemisesta! Olen itseoppinut kehittäjä ja vietän suurimman osan vapaa-ajastani sukeltamalla käyttöliittymän työkaluihin ja kirjoittamalla tien ulos. Ota yhteyttä Twitteriin, jos sinulla on kysyttävää!