Бесплатно хостујте своју Ангулар локацију користећи овај једноставан процес.
Када хостујете Ангулар веб локацију на мрежи, можете бирати између многих доступних платформи. Један од њих који можете бесплатно користити је Нетлифи.
Ако складиштите копију изворног кода своје веб локације у ГитХуб спремишту, можете користити Нетлифи за хостовање те локације.
Нетлифи такође аутоматски поново распоређује вашу веб локацију када унесете нове промене у грану спремишта коју хостујете.
Како направити основни пример угаоне апликације
Можете креирати једноставну Ангулар апликацију користећи уређивач као што је Висуал Студио Цоде. Затим можете да хостујете ову веб локацију користећи Нетлифи.
- Створити нова апликација Ангулар.
- Направите једноставну почетну страницу. Замените код у апп.цомпонент.хтмл датотека са следећим садржајем одредишне странице:
<див цласс="контејнер-тамно заглавље">
<х2>Наш пословни веб-сајт</h2>
</div>
<див цласс="контејнер-бела">
<див цласс="садржаја">
<х2>Наш пословни веб-сајт</h2>
<стр>Научите како да дизајнирате, развијете и одржавате своју професионалну веб локацију за кратко време.</п>
</div>
</div>
<див цласс="контејнер-наранџаста">
<див цласс="садржаја">
<х2>Шта радимо</h2>
<стр>Дајемо вам алате за развој веб локација и јединствена решења за ваше клијенте. Такође пружамо обуку за
одржавање и друге теме везане за веб страницу.</п>
</div>
</div>
<див цласс="контејнер-бела">
<див цласс="садржаја">
<х2>О нама</h2>
<стр>Ми смо мала фирма која послује из Мелбурна, Аустралија. Наши простори су јединствено израђени тако да могу и клијенти
посетите нас лично.</п>
</div>
</div>
<див цласс="контејнер-тамно подножје">
<стр>Ауторско право 2022</п>
</div> - Додајте мало стила у Ангулар апликацију додавањем мало ЦСС-а у апп.цомпонент.цсс фајл:
* {
породица фонтова: "Ариал", Санс Сериф;
}
.хеадер {
паддинг: 30пк 50пк;
}
.фоотер {
паддинг: 5пк 50пк;
тект-алигн: центар;
}
.контејнер-таман {
боја позадине: #202Ц39;
бела боја;
дисплеј: флек;
алигн-итемс: центар;
}
.контејнер-наранџаста {
боја позадине: #ФФД091;
боја: #202Ц39;
}
.контејнер-бела {
боја позадине: бели дим;
боја: #202Ц39;
}
.садржај {
паддинг: 100пк 25%;
дисплеј: флек;
флек-дирецтион: колона;
лине-хеигхт: 2рем;
фонт-сизе: 1.2ем;
алигн-итемс: центар;
тект-алигн: центар;
} - Додајте мало стила за целокупну Ангулар апликацију стилес.цсс:
тело {
маргина: 0;
паддинг: 0;
} - Да бисте тестирали апликацију, идите до њене основне фасцикле помоћу терминала или командне линије. Откуцајте нг служе команда:
нг служе - Сачекајте да се ваш код компајлира и посетите http://localhost: 4200/ у веб прегледачу да бисте видели своју апликацију.
- У .бровсерслистрц датотеку, уклоните иОС сафари верзију 15.2-15.3. Ово ће спречити да се грешке компатибилности приказују на конзоли када правите пројекат.
последња 1 верзија Цхроме-а
последња 1 верзија Фирефок-а
последње 2 Едге главне верзије
последње 2 главне верзије Сафарија
последње 2 главне верзије иОС-а
Фирефок ЕСР
неиос_саф 15.2-15.3
несафари 15.2-15.3 - Направите свој код користећи нг буилд команда у терминалу:
нг буилд - У .гитигноре датотеку, уклоните или коментаришите /dist линија. Уклањањем ће се осигурати дист фолдер се налази у скупу датотека које гурате у своје ГитХуб спремиште.
# /дист
Како пренети свој Ангулар код на ГитХуб
Мораћете да сачувате свој код у удаљеном спремишту да би Нетлифи приступио изворном коду.
Можете да направите ново спремиште на ГитХуб-у и гурнете код своје веб локације у то спремиште. Ако нисте упознати са ГитХуб-ом, можда би било корисно да разумете неке од њих Основне карактеристике ГитХуб-а први.
- Направите ново спремиште на ГитХуб-у. То можете учинити тако што ћете се пријавити на ГитХуб и кликнути на Нова.
- Унесите детаље за своје ново спремиште. Дајте му име као што је "нетлифи-апп" и опис. Немојте иницијализовати спремиште са РЕАДМЕ датотеком, .гитигноре датотеком или лиценцом.
- У терминалу на рачунару идите до директоријума у којем сте похранили своју Ангулар апликацију. Покрените следеће команде да бисте иницијализовали своју фасциклу као гит спремиште:
гит инит
гит адд .
гит урадити -м "први урадити" - Гурните код унутар ове фасцикле у ново удаљено спремиште које сте направили на ГитХуб-у. Пратите гит даљински додај оригинал, гит грана, и гит пусх команде које пружа ГитХуб на страници вашег удаљеног спремишта:
гит даљински додај оригинал <Ваша ГитХуб репо веза>
гит грана -М главна
гит пусх -у порекло главни - Можете да потврдите да је ваш Ангулар код апликације сада у вашем удаљеном ГитХуб спремишту тако што ћете освежити страницу ГитХуб спремишта.
Како користити Нетлифи за хостовање вашег кода
Да бисте угостили свој код користећи Нетлифи, мораћете да му дате приступ свом ГитХуб изворном коду. Нетлифи ће тада користити дист фасциклу вашег Ангулар пројекта да бисте објавили изграђену верзију вашег кода.
Сва ова подешавања можете да конфигуришете тако што ћете пратити кораке конфигурације приликом креирања новог сајта:
- Пријавите се или се пријавите на Нетлифи. То можете учинити користећи своје ГитХуб акредитиве.
- Са главне контролне табле и странице са листом сајтова проширите Додај нови сајти изаберите Увезите постојећи пројекат.
- Изаберите ГитХуб.
- Кликните на Конфигуришите Нетлифи на ГитХуб-у.
- Кликните на Инсталирај.
- Нетлифи ће приказати листу ваших ГитХуб спремишта. Изаберите ону коју желите да угостите. На пример, ако сте свом спремишту назвали "нетлифи-апп", изаберите "нетлифи-апп" са листе.
- На екрану конфигурације оставите Власник, Огранак за распоређивање, и Основни директоријум поља на њихове подразумеване вредности. Ако објављујете одређену грану, као што је засебна грана „Производња“, то можете додати у Огранак за распоређивање поље. Промијенити Команда изградње поље на "нг буилд". За Објавите именик поље, укуцајте дист/
. Ако не знате које је име пројекта, можете се кретати до фасцикле дист вашег пројекта да бисте га тамо пронашли. На пример, "дист/нетлифи-апп". - Кликните на Деплои сите.
- Сачекајте да се имплементација заврши. Ово може потрајати неколико минута и можда ћете морати да освежите страницу. Ако све прође добро, моћи ћете да видите успешну примену на листи распоређивања. Кликните на своју објављену примену, на пример, Производња: маин@ХЕАД.
- Кликните на Отворено постављање производње дугме.
- Сада можете да видите своју веб локацију на другој картици, користећи УРЛ у формату
.нетлифи.апп. Ако хостујете веб локацију са више преусмеравања, можда нећете моћи да преусмерите на друге странице. У овом случају постоји начин да поправите неуспешно преусмеравање на Нетлифи-у. Ако желите, можете такође измените име свог бесплатног домена.
Хостовање ваше веб странице помоћу ГитХуб-а и Нетлифи-а
Надајмо се да сада можете успешно да хостујете веб локацију користећи ГитХуб и Нетлифи. Можете подесити аутоматску примену у одређеним гранама ГитХуб спремишта. На овај начин можете аутоматизовати и поједноставити примену ваше веб локације.
Али Нетлифи није једини начин на који можете да примените Ангулар апликацију на мрежи. Такође можете користити друге платформе као што су ГитХуб Пагес.