Отървете се от трудната задача да настроите своя първи сървър за разработка с тези лесни стъпки
Настройването на вашия първи сървър за разработка не би било лесна задача. Понякога сте объркани с толкова много стъпки, които трябва да следвате, и други неопределени изисквания.
Сблъсках се с този проблем преди известно време и истината е, че трябва да комбинирам няколко ресурса, за да работи. И така, какво ще стане, ако предоставя друг ресурс, за да помогна на общността още повече?
Заден план
Да приемем, че искате да създадете приложение с помощта на TypeScript. Това означава, че трябва донякъде да компилирате кода, който току-що сте написали в JavaScript, след което да го стартирате. Добре, това звучи доста просто.
Знаете, че имате отдалечена база данни, която можете да използвате заедно с всички членове на екипа на вашия проект. Но след известно време на разработване на приложението, вашата база данни за разработка е натрупана с нежелани данни. Тъй като не харесвате тази бъркотия. Искате да знаете как да настроите сървър и база данни за свободно разработване на вашето приложение, включително провеждане на вашите тестове.
За щастие сте попаднали на правилното място. Нека спрем с тези сладки приказки и преминем към основното съдържание.
Настройте TypeScript проект
Първо създайте директория за вашия проект. Можете да му дадете име, каквото искате, напр. typescript-сървър. След това създайте файл package.json, като изпълните:
npm init // Without any questions npm init -y
Сега имате package.json в основната директория на вашия проект.
След това трябва да инсталирате TypeScript като зависимост за разработка. Можете да направите това, като бягате
npm i typescript --save-dev
Тъй като имате инсталиран TypeScript, сега можете да създадете tsconfig.json файл, като изпълните командата
npx tsc --init
Ето, имате tsconfig.json в основната директория на вашия проект. tsconfig.json показва, че вашият проект е TypeScript проект и съдържа опции на компилатора, необходими за компилиране на проекта. Защото по същество вие пишете код на TypeScript, но сървърът ви работи на JavaScript.
Ще имате куп опции в tsconfig.json, но в този случай аз опростявам файла, като използвам само тези опции.
За такава обща структура на директория се нуждаем от папка src в основната директория на проекта. Така че, нека направим един!
Създайте папката src и index.ts вътре в нея. За проверка на здравината можете да напишете това вътре index.ts.
Сега компилирайте кода на TypeScript, като изпълните команда
npx tsc
В този момент виждате, че имате папка с име build. Там се поставя вашият JavaScript файл. Тъй като сме посочили компилираната папка да бъде в папка build (потърсете опцията outDir в tsconfig.json).
Сега стартирайте JavaScript кода, като изпълните
node ./build index.js
Чудесно, виждаме „Hello World!“ съобщение, отпечатано на терминала.
По-добре е да опростим използваните преди това команди в скриптовете на файла package.json. Пренапишете раздела за скриптове вътре в package.json в това:
Както предполагат скриптовете, можете да компилирате кода с помощта на npm run build и да стартирате кода с помощта на npm run dev.
Изпълнение на нашия сървър за разработка
Преди това написахме проверка за надеждност, за да сме сигурни, че нашият код може да бъде компилиран и изпълнен. Сега ще настроим нашия сървър с помощта на Express.
Инсталирайте Express, като стартирате npm install express @types/express
Променете index.ts в папката src в това
Както преди, можете да компилирате кода с помощта на npm run build, след което да го стартирате с помощта на npm run dev. Сега можете да видите, че нашият сървър работи на порт 5000.
Дефинирайте правила за кодиране с eslint (по избор)
Наличието на предварително дефинирани правила при писане на код е доста важно. Това може да направи вашия код последователен, особено когато работите в екип. Но за начинаещи писането с правила може да се превърне във фактор за забавяне. Не се страхувайте, можете да пропуснете този раздел и да се върнете отново, след като сте достатъчно уверени.
Инсталирайте eslint и неговите разширения:
npm install eslint eslint-config-airbnb-base eslint-plugin-import @typescript-eslint/eslint-plugin @typescript-eslint/parser
Очевидно различните екипи или проекти може да имат различни правила за кодиране. Но можете да го конфигурирате според вашите нужди.
Презареждане на живо с Nodemon
Добре, постигнахме известен напредък. Но уморително ли е да прекъсваме, компилираме и след това изпълняваме кода всеки път, когато направим някои промени? Нека опростим нашия опит в разработката, като използваме nodemon.
Пусни npm install nodemon
Създайте nodemon.json , след което напишете това
Променете скриптовете на предишния package.json в този
Забележка: ако не използвате eslint, премахнете eslint --fix --ext .ts ./src
Сега можете да стартирате своя сървър за разработка, като стартирате npm run dev . Опитайте да промените кода си (напр. index.ts), ще видите, че кодът се прекомпилира и работи отново.
Докер и докер композиране
В този момент имате работещ сървър за разработка. За да постигнем предишната си грижа във въведението, нека го комбинираме с Docker.
Създайте Dockerfile в основната директория на проекта и напишете това.
След това създайте docker-compose.yaml
Ако искате услуга за база данни на Postgres, тогава използвайте този файл за съставяне на докер.
Изпълнете команда docker-compose up, за да стартирате всички услуги във файла за съставяне на докер.
Команди с Makefile
За да направим нашия цикъл на разработка много по-прост, нека имаме Makefile.
Командите, които имаме тук, са до голяма степен обясними. Можете да изградите изображенията, като използвате make build, за да стартирате услугите, като използвате make up (без да изграждате отново изображенията), make run, ако искате първо да изградите услугите. След това make down, за да премахнете контейнерите на всички услуги.
Заключение
Преминахме през няколко стъпки за настройка на сървър за разработка. Точно както казва името, това е само за целите на разработката. Ако сте любопитни как да настроите сървър, готов за производство, можете да отидете на ресурсите за подробности.
Надяваме се, че тази статия може да ви помогне да възприемете настройката на сървър за разработка не като обезсърчаваща задача, а стъпка по стъпка последователност, която можете да следвате.
Благодаря ви за четенето и приятно кодиране!
