„Surge VS GitHub Pages“: kaip įdiegti „create-reaguoti“ programos projektą

Kaip kūrėjas, galite keliais būdais parodyti savo įgūdžius bendraamžiams ir būsimiems darbdaviams. Atvirojo kodo indėlis yra puikus. Tinklaraščių rašymas yra puikus. Bet tam tikru momentu norėsite pritraukti projektus internete, kur žmonės iš tikrųjų gali jais naudotis.

Per daug kartų aš ką nors pradėjau vietoje ir niekada to nemačiau. Gali būti, kad padarėte tą patį. Viena iš priežasčių, kodėl tai yra taip įprasta, yra visas papildomas darbas, reikalingas diegimui.

Ar nebūtų malonu turėti centrinį centrą, kuriame gyvena visi jūsų projektai, nesijaudindami dėl prieglobos ir serverio konfigūracijos? Šiame įraše rasite du populiarius diegimo įrankius, kuriems reikia minimalių pastangų.

sukurti-reaguoti-programą

Prieš pradėdamas, leisk man papasakoti apie savo naują geriausią draugą create-react-app,. Jei galvojote apie „React“ išmokimą, bet jus atgauna laikas, kurio reikia projektui paleisti ir paleisti, šis komandinės eilutės sąsajos (CLI) įrankis yra jūsų taupymo malonė. Ji pasirūpins didžiąja dalimi katilo, kurio jums reikia norint pradėti projektą.

Norėdami jį įdiegti ir sukurti savo pirmąjį projektą, eikite į terminalą ir vykdykite šias komandas:

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

Iš dėžutės create-react-appyra keli patogūs scenarijai, leidžiantys plėtoti savo projektą vietoje ir paskui jį įdiegti. Juos galite rasti package.jsonfaile, esančiame jūsų projekto katalogo šaknyje.

Naudokite npm startprojektą vykdyti vietoje, kol jį vystote. Tada naudokite npm run buildparuošdami savo projektą dislokavimui.

„Surge.sh“ ir „GitHub“ puslapiai

Truputį pirmyn. Sukūrėte pagrindinę programą ir esate pasirengę ją įdiegti žiniatinklyje.

Statinių svetainių talpinimo platformų srityje yra daugybė variantų, tačiau du, su kuriais dirbsime, yra „Surge.sh“ ir „GitHub Pages“.

Abi šios platformos yra galingos atskirai. Kuris iš jų naudojamas, priklauso nuo jūsų situacijos. Mano tikslas yra geriau suprasti, kodėl šios priemonės egzistuoja ir ką galite su jomis padaryti.

Taip pat atkreipkite dėmesį, kad nors šiame įraše kalbama apie projektų, sukurtų naudojant create-react-appCLI, paskelbimą , „Surge“ ir „GitHub Pages“ dirbs net su pačiais pagrindiniais projektais. Kai kuriuos iš šių veiksmų galite praleisti, jei nenaudojate pačios „React“.

Surge.sh

„Surge“ yra tikrai nuostabi programinė įranga, kurią neseniai atradau iš „Reddit“ gijos. Iš esmės „Surge“ yra CLI, leidžianti nemokamai diegti savo projektus. Ir greitai. Iš tikrųjų „Surge“ išsiskiria paprastumu.

Panagrinėkime paprastą pavyzdį naudodamiesi create-react-app.

Pirmiausia įdiekite surgepaketą visame pasaulyje:

npm install -g surge 

Dabar, kai „Surge“ jau įdiegta jūsų kompiuteryje, turite paruošti savo projektą, kad galėtumėte jį įdiegti. Aš minėjau aukščiau, kad create-react-appscenarijus yra package.jsonvadinamas build. Šis scenarijus iš esmės paruošia programą gamybai, sujungdamas ir optimizuodamas visą kodą.

Vykdykite npm run buildsavo projekto šaknyje:

npm run build

Turėtumėte pastebėti, kad jūsų projekto katalogo šaknyje, pavadintame, sukurtas naujas aplankas build. Šiame aplanke yra parengta naudoti programa.

Puiku, jūs beveik baigėte. Liko tik paleisti surgekomandą projekto šaknyje:

surge

Jei paleisite pirmą kartą surge, būsite paraginti sukurti paskyrą. Pridėkite el. Pašto adresą ir slaptažodį, tada paspauskite „Enter“. Tada pamatysite panašų išvestį:

Norėdami įdiegti projektą, „Surge“ jums reikia tik dviejų dalykų:

  1. Kelias į projektą
  2. Domenas, kuriame jį priglobsite

Projekto kelias

Jūs pastebėsite, kad projekto keliaslauke terminalo numatytasis šakninis katalogas. „Surge“ daro prielaidą, kad bet kuris katalogas, kuriame vykdote surgekomandą, yra katalogas, kurį norite įdiegti. Jūsų atveju turite nukreipti „Surge“ į buildkatalogą, sukurtą paleidus npm run build.

Jei jūsų projekto kelias yra path/to/my-project, redaguokite tai path/to/my-project/build. Atlikę šį pakeitimą, paspauskite „Enter“, kad patvirtintumėte.

Domenas

Įvedęs projekto kelią, „Surge“ pasiūlys naudoti atsitiktinį domeną. Jei norite, galite jį ištrinti ir pridėti savo domeną. Jis tiesiog turi turėti .surge.shpratęsimą pabaigoje. Šis įrankis taip pat leidžia pritaikyti domenus, o tai yra tikrai nuostabu.

Priimkite siūlomą domeną arba pridėkite savo (pasirinktinį ar atsitiktinį su tinkamu viršįtampio plėtiniu), tada paspauskite „Enter“.

Tai viskas, ką ji parašė! Naršyklėje eikite į domeną ir turėtumėte pamatyti, kaip jūsų projektas veikia ir veikia.

Atminkite, kad jei jūsų programa naudoja kliento nukreipimą , „Surge“ prieš paleisdami komandą rekomenduoja pervadinti index.htmlfailą savo buildkataloge į . Daugiau informacijos galite rasti Surge dokumentacijoje.200.htmlsurge

„GitHub“ puslapiai

„GitHub Pages“ leidžia lengvai paversti „GitHub“ saugyklas visaverčiais statiniais tinklalapiais. Daugelis organizacijų naudoja šią paslaugą savo dokumentams ir projektų demonstracijoms talpinti, tačiau jūs galite naudoti viską, ko norite.

Atminkite, kad tai veikia, pirmiausia turite nusiųsti kodą į „GitHub“ saugyklą. Jei tai jums atrodo svetima, peržiūrėkite daugiau dokumentų čia.

Jeigu jūs kada nors paleisti npm run buildnaudojant create-react-appanksčiau, tada jūs galbūt jau pastebėjote produkciją, kuri atrodo taip:

create-react-apppateikiama išsami dokumentacija, padedanti vartotojams paskelbti savo darbą naudojant įvairiausius įrankius. Čia galite pamatyti realaus laiko terminalo išvestį, nurodančią mums, kaip tai padaryti per „GitHub“ puslapius. Išbandykime.

1 žingsnis

Redaguokite package.jsonpridėdami naują lauką pavadinimuhomepage:

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

Jei jūsų „GitHub“ vartotojo vardas yra george-lucas, o jūsų projekto „GitHub“ saugykla yra SithJS, homepagelauko vertė turėtų būti "//george-lucas.github.io/SithJS".

Pabėkime npm run builddar kartą po pakeitimo:

Ar pastebėjote naują išvestį aukščiau? create-react-appCLI vaikščioti su mumis per visą procesą. Gana niūrus.

2 žingsnis

Tada turite įdiegti gh-pagespapildinį. Tai leis mums gh-pages„GitHub “ padalinyje tiesiai iš terminalo paskelbti:

npm install --save-dev gh-pages

gh-pagesyra specialus padalinys, kurį „GitHub Pages“ naudoja skelbdama projektus. Gražiausia tai, kad filialas gyvena toje pačioje saugykloje, kaip ir jūsų projekto kodas, tačiau neturi įtakos pačiam projektui.

Atminkite, kad jei gh-pagesjūsų projekto saugykloje jau yra filialas, jis atitinkamai atnaujins filialą. Jei filialas neegzistuoja, jis sukurs jį skrendant.

3 žingsnis

Pridėkite naują scenarijų į scriptslauką viduje package.json. Paskambinkime scenarijui deploy:

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

Ir pagaliau paleiskime:

npm run deploy

npm run deploypirmiausia sukurs jūsų projektą per npm run build. Tada ji paskelbs jį gh-pages„GitHub“ filiale per gh-pages -d build.

4 žingsnis

Mes beveik baigėme. Eikite į savo projekto saugyklos nustatymus „GitHub“. Skyriuje „ GitHub Pages“ patvirtinkite, kad jūsų projektas nustatytas naudoti gh-pagesfilialą.

Dabar galite pereiti prie URL, kurį įvedėte failo homepagelauke package.json, kur pamatysite, kad jūsų projektas buvo įdiegtas!

Atkreipkite dėmesį, kad „GitHub Pages“, kaip ir „Surge“, taip pat turi problemų su kliento nukreipimu. create-react-apppateikia kelis „GitHub Pages“ integracijos dokumentacijos sprendimus.

Nugalėtojas

Nuoširdžiai kalbant, negalima suklysti pasirinkus vieną iš šių variantų. Jie abu puikūs. Apibendrinkime keletą pagrindinių funkcijų:

Šuolis

  • Minimali konfigūracija projektui diegti
  • Nekelia prielaidų apie naudojamą technologiją
  • Sklandi integracija su tokiais kūrimo įrankiais kaip „Grunt“ ir „Gulp“
  • Galima naudoti kaip priklausomybę nuo kūrimo kuriant savo įrankius

„GitHub“ puslapiai

  • Išsaugo projekto kodą ir tinklalapį (-ius), esančius vienoje saugykloje
  • Centralizuoja visus projektus pagal .gith ub.io domeną
  • Diegimas iš komandinės eilutės arba iš „GitHub“ saugyklos nustatymų
  • Puikiai veikia su statinių svetainių generatoriais, tokiais kaip „Jekyll“

Asmeniškai savo naujausiam projektui pasirinkau „GitHub Pages“, nes jau dabar naudojuosi „GitHub“ ir man patinka viską laikyti centralizuotai. Gal tai mano OCD kalbėjimas, bet man patinka turėti atskiras „GitHub“ saugyklas projektams, kuriuos galiu panaudoti kaip padomenį jake-wies.github.io.

Jei tiesiog kuriate bandomąjį projektą arba norite klientui parodyti demonstracinę versiją, naudoti „Surge“ itin greitą CLI tinklalapio generavimui yra sunku. Galite greitai sugeneruoti domeną ir vėliau jį išardyti.

Dienos pabaigoje geriausias darbo įrankis yra tas, kuris daro jus produktyviu. Pateikta informacija turėtų gerai suprasti, kur kiekvienas šviečia. Patikrinkite savo projekto poreikius ir išsirinkite sau tinkamiausią.

Ačiū, kad skaitėte! Esu savamokslis kūrėjas ir didžiąją dalį laisvalaikio praleidžiu pasinerdamas į „front-end“ įrankius ir rašydamas savo išeitį. Kreipkitės į mane „Twitter“, jei turite klausimų!