Как да настроите локален сървър и да стартирате приложението си с Node.js

В този кратък урок ще научите как да настроите локален сървър с Node.js. В крайна сметка ще можете да стартирате основна версия на приложението на вашия собствен виртуален сървър.

Да започваме! 🚀

Защо ви е нужен уеб сървър и какво е това все пак?

Виртуален уеб сървър работи на вашия собствен компютър с помощта на сървърен софтуер. Ако сте амбициозен разработчик, определено ще искате да настроите такъв, тъй като ви позволява да тествате функциите на всяко уеб приложение, което сте създали.

Представете си, че качвате вашия уебсайт или приложение, за да го види светът, без да го тествате онлайн. Няма начин да сте сигурни дали работи добре за други потребители. Звучи лошо, нали? Затова е добра практика винаги да проверявате как работят функциите, които сте създали, когато влизате в сайта си онлайн.

Инсталирайте Node.js

За да започнем, първо ще трябва да инсталираме Node.js, което е среда за изпълнение на JavaScript (👉 на английски: Node ще ви помогне да изпълните JavaScript код).

Много разработчици се вълнуват, когато говорят за Node. Преди Node само уеб браузъри като Google Chrome имаха JavaScript двигател, който можеше да чете и показва код, написан на JavaScript. За Chrome този интерпретатор се нарича V8. Функцията, която направи Node толкова популярен, е, че позволява на JavaScript да работи основно на всички машини - което означава, че браузърът вече не е ограничение за изпълнението на JavaScript.

Безопасно е да се каже, че Node е най-добрият избор при изграждането на прост сървър за всички видове уеб приложения. Така че нека го инсталираме. Нека да разгледаме два начина, един бърз метод за инсталиране и друга опция, която в началото е малко по-сложна, но по-късно много по-удобна.

(1) Бърз начин за инсталиране на Node.js

  1. Отидете на официалната страница на Node.js и изтеглете инсталационния пакет за вашата операционна система. Използвайте LTS версията, а не текущата.
  2. След като изтеглянето приключи, инсталирайте пакета като всяко друго приложение на вашия Mac или PC
  3. След това можете да отидете до избраната от вас терминална програма. В случай, че нямате инсталирано терминално приложение като iTerm2 или Hyper, просто отворете терминала, който е предварително инсталиран на всеки Mac. Ако сте потребител на Windows, проверете тук.
  4. Можете да въведете следната команда във вашия терминал, за да видите дали всичко е инсталирано правилно: $ node -v. Ако работи добре, сега трябва да видите номера на версията на Node. Освен това проверете дали npm е инсталиран с $ npm -v. Npm е Node Package Manager, който идва с Node, когато се инсталира. Ще го използваме в следващите стъпки, за да инсталираме Express и да стартираме нашия виртуален сървър.

(2) По-добър начин за инсталиране на Node.js

Вместо гореописания начин предпочитам да използвам Homebrew, който е мениджър на пакети за macOS. Позволява ви да инсталирате липсващи приложения супер бързо чрез терминала. Потребителите на Windows трябва да използват друг пакетен мениджър като Scoop. Те са доста сходни и за демонстрационни цели ще ви покажа как да инсталирате Node чрез Homebrew.

  1. Отново \ отидете на терминала и поставете следния ред (без знака $) там. В случай, че се чудите: той просто проверява хранилището на GitHub от Homebrew и инсталира приложението от там.
    $ /usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)
  2. Ако Homebrew е инсталиран правилно, сега ще сме готови да инсталираме Node с тази проста команда: $ brew install node
  3. Можете да проверите дали всичко изглежда добре, като напишете: $ node -v и $ npm -v (което трябва да ви даде номера на версията на вашия инсталиран Node).

Но защо да правите това усилие да инсталирате Node чрез мениджър на пакети като Homebrew? Има няколко причини това да е добра идея:

  • Ако използвате мениджъра за инсталиране на Node, възможно е да се сблъскате с проблеми с достъпа, които изискват да направите промени във вашата система с помощта на команда, наречена $ sudo.
  • Освен това, ако някога искате да деинсталирате без Node, това ще бъде много объркващо, тъй като трябва да проследите всички създадени файлове.
  • И накрая, много по-лесно е да „поддържате версията си на Node актуална“, когато използвате Homebrew.

Настройте първото си приложение

Все още си с мен, нали? Страхотно, така че нека най-накрая да продължим и да изградим действително уеб приложение и локален сървър!

За да направим това доста удобно, можем да използваме express-generator, който е чудесен инструмент за команден ред, който създава скелет на приложение за нас. В противен случай ще трябва да напишете по-усъвършенстван код, като например настройка на екземпляр на сървър, конфигуриране на механизъм за преглед и т.н. Въпреки че това е страхотно да знаете, няма да е необходимо да стартирате първото си приложение на уеб сървър.

Express-generator е ясна. Просто вземете следната команда и я хакнете във вашия терминал: $ npm install express-generator -g. С -g ние инсталираме Express глобално, което означава, че имате достъп до пакета от всяка директория.

Докато все още сте на терминала, вече можете да създадете ново приложение с express-generator, като напишете: $ express -v ejs -c sass myapp. В този пример myapp ще бъде името на вашия проект. И познай какво? Току-що създадохте първото си приложение! За да посетите директорията myapp, която току-що създадохме, можете да въведете $ cd myapp.

Възхищавайте се на приложението, което току-що създадохте

Разгледайте проекта myapp, който току-що създадохте. За да видите вашите файлове в редактора на кодове, просто използвайте този ред: $ code ., докато все още сте в папката myapp на вашия терминал.

За да работи това, трябва, разбира се, да сте инсталирали редактор на код като Visual Studio Code или Atom.

Когато отворите редактора, можете да видите проекта и всички файлове, които са създадени автоматично за вас с Express generator. В рамките на index.ejs можете да правите редакции и да създавате вашето сложно уеб приложение оттам. Засега нека просто го оставим както е и да продължим да изграждаме нашия сървър.

Почти стигнахме.

Последно нещо: трябва да инсталираме различни допълнителни пакети на трети страни (които са посочени като зависимости във файла package.json). Те обикновено се изискват от Express, за да работи сървърът, както бихте очаквали. Добрата новина е, че това ще бъде доста лесно, тъй като можете да инсталирате всичко това чрез npm наведнъж. Отворете вашия терминал и използвайте тази подкана:

$ npm install. Можете да проверите дали вашата инсталация е била успешна, като влезете отново във вашия редактор на код. Ще видите нова папка, наречена node_modules като в моя пример по-горе (подсказка: изключете това в случай, че качвате в GitHub).

Стартирайте приложението си на виртуален уеб сървър

И накрая, нека стартираме нашето приложение на уеб сървър. Повечето от необходимото вече е направено в предишните стъпки! Две лесни стъпки и сте там:

  1. Докато сте в терминала, подканете тази команда: $ npm start. Това ще стартира виртуален сървър.
  2. Отидете в адресната лента на вашия интернет браузър и въведете localhost:3000. Localhost е домейн от първо ниво (TLD) точно като .com или .org. Въпреки това, той е запазен за целите на документацията и тестването. С :3000извиквате порта по подразбиране за достъп до новоизградения сървър.

Накъде да отида от тук

Поздравления! Създадохте първото си приложение и го пуснахте на собствен сървър. Оттук можете да започнете да създавате персонализирано приложение. Скелетът на приложението вече е настроен по начин, който ви позволява да изградите своя сайт в рамките на index.ejs. Ако искате да изградите нещо по-напреднало от обикновен сайт, трябва да обмислите използването на части. Това означава, че изграждате приложението си в компоненти, които можете да направите справка от вашия index.ejs. Удобно е, че вече сме инсталирали механизма за преглед EJS, който ще ви помогне при изграждането на конкретни части от приложението ви в компоненти.

Благодаря ви, че прочетохте. Наистина се надявам, че този урок ви е бил полезен.