Сурге ВС ГитХуб странице: Како применити пројекат за креирање-реаговање-апликација

Као програмер, постоји неколико начина на које можете показати своје вештине вршњацима и потенцијалним послодавцима. Доприноси отвореног кода су сјајни. Блогање је сјајно. Али у једном тренутку ћете желети да покренете пројекте на Интернету, где их људи заправо могу користити.

Превише пута сам започео нешто локално и никада то нисам прозрео. Можда сте и ви учинили исто. Један од разлога што је ово тако често је сав додатни рад који иде на постављање.

Зар не би било лепо имати централно чвориште у којем живе сви ваши пројекти без бриге о хостингу и конфигурацији сервера? Овај пост ће вас провести кроз два популарна алата за примену који захтевају минимални напор.

креирајте-реагујте-апликацију

Пре него што почнете, да ти кажем о мом новом најбољем пријатељу, create-react-app. Ако сте размишљали о учењу Реацт-а - али вас враћа време потребно за покретање пројекта - овај алат за интерфејс командне линије (ЦЛИ) је ваша уштеда. Побринуће се за већину плочастих плоча потребних за започињање пројекта.

Да бисте га инсталирали и креирали свој први пројекат, уђите у терминал и покрените ове наредбе:

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

Испоручује create-react-appсе са неколико згодних скрипти које вам омогућавају да локално развијете пројекат и након тога га примените. Могу се наћи у package.jsonдатотеци у корену директорија вашег пројекта.

Користите га npm startза локално покретање пројекта док га развијате. Затим користите npm run buildза припрему пројекта за примену.

Сурге.сх и ГитХуб странице

Идемо мало унапред. Направили сте основну апликацију и спремни сте да је примените на вебу.

Постоји много опција у домену статичких платформи за хостинг веб локација, али две са којима ћемо радити су Сурге.сх и ГитХуб Пагес.

Обе ове платформе су саме по себи моћне. Који од њих користите, своди се на вашу ситуацију. Мој циљ је да вам пружим боље разумевање зашто ови алати постоје и шта са њима можете учинити.

Такође имајте на уму да иако се у овом посту ради о објављивању пројеката креираних са create-react-appЦЛИ, Сурге и ГитХуб Пагес ће радити чак и са најосновнијим пројектима. Можда нећете моћи да прескочите неке од ових корака ако не користите сам Реацт.

Сурге.сх

Сурге је заиста сјајан софтвер који сам недавно открио из нити на Реддиту. У својој основи Сурге је ЦЛИ који вам омогућава да бесплатно примените своје пројекте. И брзо такође. Оно што Сурге заиста истиче јесте његова једноставност.

Прођимо кроз једноставан пример користећи create-react-app.

Прво инсталирајте surgeпакет глобално:

npm install -g surge 

Сада када је Сурге инсталиран на вашој машини, морате да припремите пројекат за примену. Горе сам споменуо да create-react-appсе скрипта package.jsonзове build. Ова скрипта у основи припрема апликацију за продукцију спајањем и оптимизацијом читавог кода.

Покрените npm run buildу корену вашег пројекта:

npm run build

Требали бисте приметити да је у директоријуму вашег пројекта названа нова фасцикла build. Ова фасцикла садржи апликацију спремну за производњу.

Одлично, скоро сте завршили. Преостало је само покренути surgeкоманду у корену вашег пројекта:

surge

Ако ово први пут користите, од surgeвас ће бити затражено да отворите налог. Додајте е-маил и лозинку, а затим притисните ентер. Тада ћете видети излаз сличан овом:

Да би применио свој пројекат, Сургеу требају само две ствари од вас:

  1. Пут до пројекта
  2. Домен на коме ће се хостовати

Путања пројекта

Приметићете да је пут пројектапоље у терминалу подразумевано има основни директоријум. Сурге претпоставља да је који год директоријум у коме покрећете surgeнаредбу директориј који желите да примените. У вашем случају, морате усмерити Сурге на buildдиректоријум креиран када сте трчали npm run build.

Ако је пут вашег пројекта path/to/my-project, уредите ово на path/to/my-project/build. Када извршите ову промену, притисните тастер ентер да бисте потврдили.

Домаин

Након уласка у путању пројекта, Сурге ће предложити насумичну домену за употребу. Можете га избрисати и додати свој домен ако желите. Само треба да има .surge.shпродужетак на крају. Алат такође омогућава прилагођене домене, што је заиста сјајно.

Прихватите предложени домен или додајте свој (прилагођени или насумични са исправним екстензијом пренапона), а затим притисните тастер ентер.

То је све што је она написала! Дођите до домена у прегледачу и требало би да видите свој пројекат како ради.

Имајте на уму да ако ваша апликација користи рутирање на страни клијента , Сурге препоручује да преименујете index.htmlдатотеку у свом buildдиректоријуму у 200.htmlпре покретања surgeкоманде. Више информација можете пронаћи у Сурге документацији.

ГитХуб странице

ГитХуб странице олакшавају претварање ГитХуб спремишта у пуноправне статичке веб локације. Многе организације користе ову услугу за хостовање своје документације и демонстрација пројеката, али можете је користити за шта год желите.

Имајте на уму да да би ово функционисало, прво морате гурнути код у спремиште на ГитХуб-у. Ако вам ово звучи страно, погледајте даљу документацију овде.

Ако сте икада раније npm run buildкористили коришћење create-react-app, можда сте приметили излаз који изгледа овако:

create-react-appдолази са детаљном документацијом која помаже корисницима да објаве свој рад користећи све врсте алата. Овде можете видети излаз терминала у реалном времену који нас упућује како то учинити путем ГитХуб Пагес. Пробајмо.

Корак 1

Измените package.jsonдодавањем новог поља са именомhomepage:

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

Ако је ваше корисничко име за ГитХуб george-lucas, а ГитХуб спремиште вашег пројекта SithJS, вредност homepageпоља треба да буде "//george-lucas.github.io/SithJS".

Покренимо npm run buildпоново након промене:

Да ли сте приметили нови излаз изнад? create-react-appПГ нас хода кроз цео процес. Прилично сназзи.

Корак 2

Даље треба да инсталирате gh-pagesдодатак. То ће нам омогућити да објавимо у gh-pagesогранку на ГитХуб-у директно из терминала:

npm install --save-dev gh-pages

gh-pagesје посебна грана коју ГитХуб Пагес користи за објављивање пројеката. Најлепша ствар у вези с тим је што грана живи у истом спремишту као и код вашег пројекта, али не утиче на сам пројекат.

Имајте на уму да ће, ако већ имате gh-pagesграну у спремишту вашег пројекта, ажурирати грану у складу с тим. Ако грана не постоји, створиће је у лету.

3. корак

У scriptsпоље изнутра додајте нову скрипту package.json. Назовимо скрипту deploy:

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

И на крају, покренимо:

npm run deploy

npm run deployпрво ће изградити ваш пројекат путем npm run build. Затим ће га објавити у gh-pagesогранку на ГитХуб-у путем gh-pages -d build.

4. корак

Скоро смо готови. Идите на подешавања спремишта вашег пројекта на ГитХуб-у. У одељку ГитХуб странице потврдите да је ваш пројекат постављен да користи gh-pagesграну.

Сада можете доћи до УРЛ адресе коју сте унели у homepageпоље ваше package.jsonдатотеке, где ћете видети да је ваш пројекат примењен!

Имајте на уму да - као и код Сурге - и ГитХуб Пагес има проблема са рутирањем на страни клијента. create-react-appнаводи неколико решења у документацији за интеграцију ГитХуб Пагес.

Победник

Искрено, ни са једном од ових опција не можете погрешити. Обоје су сјајни. Осврнимо се на неке кључне карактеристике сваке од њих:

Напредак

  • Минимална конфигурација за примену пројекта
  • Не претпоставља о коришћеној технологији
  • Беспрекорна интеграција са алаткама за изградњу, као што су Грунт и Гулп
  • Може се користити као развојна зависност приликом израде сопствених алата

ГитХуб странице

  • Задржава пројектни код и веб странице смештене у једном спремишту
  • Централизује све пројекте испод вашег .гитх уб.ио домена
  • Примените из командне линије или из подешавања спремишта на ГитХуб-у
  • Одлично функционише са статичким генераторима веб локација као што је Јекилл

Лично сам одабрао ГитХуб Пагес за свој најновији пројекат, јер ГитХуб већ користим свакодневно и волим да све буде централизовано. Можда то говори мој ОЦД, али волим да имам појединачна ГитХуб спремишта за пројекте које могу да применим као поддомен jake-wies.github.io.

Ако једноставно креирате тест пројекат или желите да покажете демонстрацију клијенту, тешко је пропустити употребу Сурге-овог супер брзог ЦЛИ-а за генерисање веб странице. Можете брзо генерисати домен и након тога га срушити.

На крају, најбољи алат за посао је онај који вас чини продуктивним. Информације које сам пружио треба да вам пруже добро разумевање где свако светли. Ревидирајте потребе свог пројекта и одаберите који је прави за вас.

Хвала за читање! Ја сам самоуки програмер и већину свог слободног времена проводим ронећи у фронт-енд алатима и пишући свој излаз. Ако имате питања, обратите ми се на Твиттер-у.