Съвременният живот онлайн е живо чудо. Разполагаме с огромен набор от всякакви работещи решения. Като се започне от програмните езици, мине се през технологиите и се стигне до крайните продукти, които се базират на първите две.
И така, Javascript определено владее тази част от интернет, която остава извън света на WordPress. Този език работи директно в браузъра и въпреки че често се превръща в обект на шеги, кога сполучливи, кога – не, създава модерния вид на свръхсложните страници, които не се отличават от отделни приложения. Това се случва най-вече благодарение на трите модерни и нашумели през последните години фреймуърка, които позволяват всичко това да се случва бързо, лесно и безопасно.
И този път ще ви покажем нещо доста впечатляващо, най-вече с това колко е лесно един начален проект да се появи в мрежата. А случи ли се това, надграждането вече е по-лесната задача.
Здравей, Javascript!
Ще създадем двe съвсем, съвсем базови апликации от типа “Hello world!“, съответно ползвайки двете най-популярни „рамки“ – React или Angular. После, само с помощта на няколко стъпки и прости команди… базовият ни проект ще се зове в мрежата, където всеки потребител, където и да се намира по света ще може да го отвори на съответния адрес и да го разгледа.
Как ли ще стане това? За целта използваме автоматизиран вариант с помощта на платформата GitHub. Очаквайте скоро да продължим нататък, като ви покажем как да направите своите приложения и да ги качите на нашия безплатен хостинг, така че да са бързи и удобни за вашите потребители.
И така, започваме с експеримента. Може ли за броени минути нашето малко проектче да… се появи онлайн като истински сайт?
Реагирай бързо
Да, днес да имаш сайт е повече от лесно. За целите на експеримента ще използваме GitHub, колкото да се убедим, че дори най-големият световен сайт, „приютяващ“ код може да послужи за основа. Разбира се, това му приложение е чисто демонстративно и определено не е добра идея да деплойнете по този начин например сайта на световна верига хотели.
Най-удобната страна на този подход е, че не се изискват особени усилия. Нека отново споменем, че целта ни е изцяло демонстративна, а идеята е да ви покажем колко лесно може да се случи всичко.
Такава като цяло е и идеята на функционалността на GitHub, която ще използваме за нашия експеримент.
Въпрос „Пеликан“
Както за всеки експеримент, в духа и на упражненията по химия от 9-и клас, редно е да сме си подготвили необходимите предварителни условия. А именно – да имаме инсталирани React и Angular. Двата най-големи състезателя в битката на Javascript фреймуърци (подробно за нея – четете тук) през последните години наистина се откроиха драстично с възможностите, които дават, за бързо и удобно създаване на сложни, скалируеми и харесвани от потребителите уеб приложения.
Не е нужно да имате най-последните версии на избрания за целите на експеримента фреймуърк. Тъй като и React, и Angular се наложиха в огромен, огромен брой проекти през последните години, преходите между версиите им станаха наистина стабилни, с доста по-малко резки промени. Така че изискванията не са кой знае какви, ако сте в рамките на последните 5-6 версии на двата фреймуърка, това е напълно достатъчно.
В началото беше CLI
И така, първата реална стъпка е създаването на репозитори (за момента още нямаме достатъчно добър превод на този термин на български, но може би може да го наречем „проект“) в GitHub. Ако имате профил, всичко се случва само с един бутон. На нас ни трябват две репозиторита, съответно за двата проекта. Нека ги кръстим “zettahost-react“ и “zettahost-angular“ (за съжаление, налага се да са изцяло с малки букви, такива са правилата, които npm платформата залага за съвременните javascript проекти).
Стъпка две е създаването на самия “Hello World!” проект. Правите го на вашия компютър, важното за целите на скоростния ни експеримент е да бъде със същото название (съвсем същото, до буква) като създаденото репозитори.
Най-лесно е да използвате възможностите на двете платформи в терминала. Командата, с която се случва създаването на базов проект в React гласи:
npx create-react-app zettahost-react –template typescript –use-npm
(Да, позволяваме си да да добавим и поддръжката на Typescript, струва си да се направи дори за базова програма, някой ден ще ви разкажем подробно защо го препоръчваме.)
В Angular нещата са дори още по-семпли:
ng new zettahost-angular
Github и JavaScript, вечна дружба
И така вече имаме двата готови проекта. Ако ги „запалим“ със съответните команди, те ще се покажат в браузъра ни, веднага щом отворим адреса на съответен локален порт.
Продължаваме нататък с това са „свържем“ проектите, създадени дотук. Все още сме в терминала, независимо кой от двата фреймуърка ползваме. Отскачаме до прозореца с GitHub, колкото да копираме точния URL адрес на репозиторитата.
После сме готови да въведем следните команди.
git remote add origin remote (адреса, който сте копирали)
По този начин свързваме локалния си проект с отдалеченото репозитори в GitHub.
git remote -v
git push origin master
git pull
Изпращаме създадения от нас проект нататък и накрая синхронизираме, за да сме сигурни, че всичко е както трябва. В нашия случай го правим два пъти, поотделно за всеки от двата проекта, с които си експериментираме.
Въпрос на инфраструктура
Продължаваме със следващата стъпка, да добавим npm библиотеката, която ще се грижи за това когато решим, следващата версия на нашия проект да се деплойне чрез услугата, предлагана от GitHub и да се „покаже“ онлайн.
Командата е различна, защото двата ни проекта се нуждаят от съответните библиотеки, предназначени за тях.
“Angular”:
npm install angular-cli-ghpages –save-dev
“React”:
npm install gh-pages –save-dev
Почти сме готови! Вълнувате ли се?
Скрити скриптове
Време е самият проект да се билдне, тоест – кодът да се компилира, така че да е готов за „доставяне“ при потребителите. И след това новият вариант да се отправи към сървъра, където да ги очаква, готов да се покаже при съответната заявка от браузърите им.
За “Angular” имаме командата:
ng build –prod –base-href „https://(потребителско име).io/(име на репозиторито)/“
За “React” отиваме в добрия стар package.json и добавяме скриптовете:
“predeploy”: “npm run build”,
“deploy”: “gh-pages -d build”
Миражите са близо, пътят е далеч
И накрая идва време за същинското деплойване.
За “Angular” трябва просто да стартираме командата:
npx angular-cli-ghpages –dir=dist/(името на проекта)
За “React” е достатъчно да кажем:
npm run deploy
И… това е всичко! Проектът ви е онлайн на адреса, който му посочихте!
Можете да проверите. Отваряте браузър, въвеждате адреса https://(потребителско име).io/(име на репозиторито)/ и… там се отваря проектът, който допреди секунди „живееше“ само на локалната ви машина. Вълнуващо, нали?
И това е началото, но е прекрасно начало! Оттук нататък ви очакваме за сериозните проекти с качествения хостинг, който предлагаме от ZETTAHOST.bg. Опитайте безплатно тук!
