Безболезненная настройка проекта стека MERN! | Кодементор

Руководство для начинающих о том, как создать собственную структуру проекта стека MERN (MongoDB, Express, React+Redux, Node.js) за меньшее время и безболезненно

Создание структуры программного проекта с полным стеком может быть болезненным, если вы делаете это впервые, особенно когда вы сталкиваетесь с сотнями инструментов, технологий и вспомогательных пакетов. Мысль о том, как объединить эти инструменты для создания мастера на все руки, не только сбивает разработчиков с толку, но и приводит к разочарованию, когда вам приходится выбирать между технологиями, которые в большинстве своем находятся в тренде в наши дни.


Для кого это?

Конечно для кого начинают учиться создавать проект в стеке MERN (MongoDB, Express, React, Redux, Node.js). Однако, если вы относитесь к тому типу разработчиков, у которых есть проблемы с настройкой Webpack в среде разработки/производства, это также может вам помочь. Даже если у вас есть некоторый опыт работы с JavaScript или создания проектов в новых фреймворках/библиотеках JS, вы будете лучше понимать процесс.
Но если вы впервые создаете свой собственный проект с полным стеком и вас раздражает мысль о том, «как это сделать?» остановит вас прямо перед тем, как вы начнете, он отлично повернет вас назад!

Предпосылки

Перед началом процесса необходимо подготовить некоторые предварительные условия. Поскольку это будет проект с полным стеком, мы будем управлять как внутренними, так и внешними компонентами, а также сохранением данных.
Весь процесс был выполнен мной, и он доступен из этого репозитория GitHub. Вы можете проверить его, чтобы увидеть, как будет выглядеть этот проект после его завершения. Вы также можете использовать его в качестве шаблона для своих проектов. Если да, перейдите на страницу проекта на GitHub и следуйте инструкциям.
Чтобы это произошло, выполните следующие действия:
Установите Node.js, если вы еще этого не сделали:
Конечно, для использования диспетчера пакетов узла (npm) вам понадобится это, но, поскольку мы собираемся охватить внутреннюю разработку, нам нужен Node.js для выполнения JavaScript на стороне сервера. Вы можете узнать, как найти и установить совместимую версию вашей ОС
Установите и настройте MongoDB:
MongoDB — это база данных документов NoSQL. Нам нужно установить и настроить его, прежде чем мы начнем создавать структуру нашего проекта. Здесь вы можете найти полезную информацию о том, как скачать, установить и настроить MongoDB.
Установите свой любимый редактор кода:
Если вы не являетесь поклонником определенного редактора кода, используйте мой любимый. Я использую Visual Studio Code, поскольку он имеет открытый исходный код и имеет огромное сообщество участников. Его можно легко изменить таким образом, чтобы он работал как IDE, используя комбинацию бесплатных расширений.

Давайте начнем

Пришло время сказать волшебные слова. Мы не будем делать это сами, мы попросим npm сделать это за нас. Просто убедитесь, что вы создали отдельную папку для этого проекта:

1- Создайте папку
Откройте среду командной строки, это может быть командная строка Windows или терминал в MacOS. VSCode имеет встроенный терминал внутри и может быть активирован нажатием кнопки CTRL+ ` ключи.
Перейдите к месту, где вы хотите создать свой проект. Введите эту команду и нажмите Enter:
mkdir mern-stack-project

Будет создана новая папка с заданным именем. Затем перейдите во вновь созданную папку:

cd mern-stack-project

2- Инициализировать пакет
Как вы знаете, мы создаем наш проект как новый модуль Node.js, поэтому нам нужен файл package.json. В простейшем случае его можно описать как манифест для нашего проекта, содержащий важную информацию о том, как называется наш проект, кто его создает, о чем он или дополнительную информацию о том, с какими пакетами будет собираться наш проект. .
Чтобы инициализировать проект:
npm init -y

3- Установите зависимости
Попросите npm установить зависимости, необходимые для производственной сборки нашего проекта. Сделайте это, выполнив следующую команду:
npm i -S express mongoose body-parser concurrently chalk winston
Выполнив приведенную выше команду, следующие пакеты будут установлены как локальные зависимости от вашего проекта:

— выражать
Это фреймворк для платформы Node.js, написанный на JavaScript и обычно используемый для создания серверной части веб-приложений или API.

— мангуст
Это библиотека ODM (моделирование объектных данных) для MongoDB и Node.js, которая помогает нам упростить работу с MongoDB.
анализатор тела
представляет собой промежуточное ПО для анализа тела для express.js и анализирует тело входящего запроса. Разобранное тело будет доступно через req.body в ваших обработчиках.

— одновременно
Поскольку мы создаем проект с полным стеком, у нас будут и серверная, и клиентская части как отдельные проекты. одновременно помогает нам запускать оба проекта по отдельности

— Уинстон
Ведение журналов всех важных действий в клиент-серверном приложении — одна из самых важных вещей, о которых мы должны подумать в начале. Связь между сервером и клиентом (клиентами) по мере того, как проект становится больше с течением времени — входящие запросы от клиентов и то, как сервер отвечает на эти запросы — отследить непросто. Winston logger — полезный инструмент для организации журналов на стороне сервера.

— мел
Когда наш проект становится большим, нам нужно управлять и показывать пользователю большое количество журналов. chalk — это библиотека для того, чтобы ваши журналы были красивыми и организованными, раскрашивая и классифицируя их при печати в консоли.

4- Установите зависимости для разработчиков
Нам также нужны некоторые другие зависимости, которые все они будут использоваться во время разработки. Это означает, что мы не хотим, чтобы эти модули были включены в нашу финальную сборку. Поэтому мы установим их как devDependency, а всем остальным будет управлять Node.js.
npm i -D webpack webpack-dev-middleware webpack-hot-middleware nodemon @babel/core @babel/cli @babel/node @babel/register @babel/preset-env @babel/preset-react

Итак, давайте посмотрим, что будет установлено, вызвав приведенную выше команду:

— вебпак
Webpack — популярный сборщик модулей для веб-разработки. Его основная цель — объединение файлов JavaScript, но также можно объединять другие типы файлов и ресурсов с помощью плагинов и модулей веб-пакетов.
webpack-dev-промежуточное ПО и webpack-горячее промежуточное ПО
Эти два промежуточных программного обеспечения express.js помогут нам подключить наш клиент React.js к серверу в области разработки. Они помогают веб-пакету управлять ресурсами сборки, а затем перестраивать после любых изменений, внесенных в ресурсы на стороне клиента, разумным образом. Таким образом, пользователям не нужно обновлять свой браузер, чтобы увидеть изменения, весь процесс перестройки на этапе разработки будет выполнен за меньшее время и наилучшим образом.
— @babel/core и другие сопутствующие инструменты
Мы собираемся использовать ES6 и более новую версию JavaScript для кодирования нашего проекта. Нам нужно двигаться на острие технологий. Babel — это инструмент, который делает новые коды JavaScript доступными для чтения во всех основных браузерах.


В статье редактируется часть про «клиентскую» настройку. Так что оставайтесь на связи, чтобы узнать, как настроить клиентскую часть полнофункционального проекта JavaScript.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *