Вы готовитесь запустить свое первое полнофункциональное веб-приложение? Или, может быть, вы запутались в иерархии? Первоначальная настройка веб-приложения, пожалуй, одна из самых важных частей проекта. В этой статье я расскажу о том, как создать полнофункциональное приложение.
В частности, я буду использовать Vue на интерфейсе, Express, Node и Sequelize на сервере. Давайте начнем!
Я предполагаю, что вы использовали GitHub и знаете терминологию. Сначала вы захотите пойти дальше и создать репо. Я назову свою shalltear (я большой поклонник японского аниме). Затем клонируйте это репо на свой локальный компьютер, чтобы мы могли начать первоначальную настройку.
Давайте быстро создадим файл .gitignore в корне проекта, пока мы не забыли, и отправим все наши node_modules на GitHub.
Приступаем к настройке клиента
Я буду использовать vue-cli, чтобы быстро создать шаблон для внешнего интерфейса. Назовем этот проект клиент.
Сейчас самое время установить любые зависимости, которые, как вы знаете, понадобятся для вашего проекта. Я просто начну с axios — http-клиента на основе обещаний для браузера и узла. Поскольку мы устанавливаем это для клиентской части этого приложения, убедитесь, что вы находитесь в каталоге client при установке любых зависимостей производства или разработки.
Теперь давайте создадим папку сервисов, в которой будут храниться все наши сервисы для вызовов API на стороне сервера этого проекта. Внутри папки services начнем с создания файла api.js, в котором будет храниться наш baseURL для вызовов API.
В api.js мы можем импортировать модуль axios и создать экземпляр axios. Куда мы передадим объект со свойством baseURL и значением URL-адреса нашего API. Vue-cli настроен для запуска клиента на порту 8080, поэтому я обычно предпочитаю настроить свой сервер для работы на порту 8081, мы скоро настроим его.
Хорошо, давайте проверим, все ли работает правильно на стороне клиента. В вашем терминале убедитесь, что вы находитесь в папке проекта и перейдите в каталог клиента. Теперь запустите скрипт, который уже настроен в вашем файле package.json. Введите скрипт npm run dev.
Посетите http://localhost:8080/, и вы увидите, что ваше приложение Vue.js работает правильно :)
Приступаем к настройке сервера
Давайте создадим новую папку в корне нашего проекта с именем server и запустим npm init, чтобы создать отдельный файл package.json. Теперь у нас может быть два отдельных мира для клиента и сервера. Теперь у вас должен быть корневой проект и две папки client и server.
Я не буду создавать шаблон сервера, вместо этого мы сами создадим простой, чтобы начать работу. Итак, давайте начнем с установки нескольких зависимостей с помощью npm. Экспресс, Боди-Парсер, Корс и Морган. Убедитесь, что вы находитесь в каталоге server при установке модулей для серверной части этого проекта.
Теперь давайте установим несколько полезных dev-зависимостей, которые вы, скорее всего, захотите иметь под рукой для каждого проекта. Нодемон и эслинт.
Давайте настроим файл конфигурации для eslint. Мне нравится использовать стандартное руководство по стилю для JavaScript.
Теперь давайте перейдем к нашему файлу package.json в каталоге нашего сервера, чтобы написать сценарий, который мы можем запустить, чтобы наш сервер работал правильно.
Давайте теперь создадим папку src внутри нашего каталога server, эта папка будет содержать основную часть функций нашего сервера. Внутри папки src я обычно начинаю с создания папок config, controllers, models и корневого каталога. файл app.js.
Папка config будет содержать вашу конфигурацию для подключения к вашей базе данных.
Папка models будет содержать все наши модели. Короче говоря, ваши данные, которые вы запрашиваете для конечных точек, к которым вы сможете получить доступ через вызовы API на стороне клиента.
Папка controllers будет содержать всю логику того, как мы отвечаем на http-запросы из браузера.
Подробнее о создании остального функционала для сервера мы поговорим в следующих нескольких статьях. Цель этой статьи — просто настроить и запустить вашу среду.
Давайте быстро напишем «Hello World», чтобы увидеть, правильно ли работает наш сервер. Откройте app.js и напишите оператор console.log.
Наконец, мы перейдем в каталог server и запустим команду npm start. Мы настроили этот скрипт ранее в нашем файле package.json.
КЛАССНО! Теперь у нас есть работающий клиент и сервер для нашего приложения с полным стеком. Вы можете оставить открытыми два окна терминала, работающие как на стороне клиента, так и на стороне сервера.
Я надеюсь, что эта статья была вам хоть как-то полезна. Не стесняйтесь подписываться на меня в Twitter или GitHub!
