mernboilerplate antd
1.0.0
В этот репозиторий я буду продолжать добавлять лучшие практики производства, которым мы должны следовать в проекте MERN (MongoDB, Express.js, React.js и Node.js). Также для улучшения пользовательского интерфейса я использую Antd Pro. Возможно, позже я тоже буду использовать MUI.
Ниже приведен образец страницы со списком:
Как следует из названия, этот репозиторий построен на основе Express.js и React.js, однако в деталях реализации мы найдем и другие вспомогательные технологии.
Подробности о платформах и пакетах можно найти в файлах package.json в каталоге сервера и клиента.
Этот проект можно запустить в основном двумя способами. Один использует докер, другой способ — запустить вручную через vscode.
В зависимости от варианта хостинга MongoDB мы выбираем соответствующий файл docker-compose.
В настоящее время у нас есть два файла docker-compose:
docker-compose.mongocloud.yml — кластер, размещенный на MongoDB.comdocker-compose.yml — локальный контейнер MongoDB. MONGODB_CLOUD_URL в docker-compose.mongocloud.yml на соответствующий URL-адрес MongoDB.REACT_APP_API_URL в docker-compose.yml на соответствующий URL-адрес API. Если мы хотим предоставить нашему клиенту доступ к Интернету, нам нужно изменить REACT_APP_API_URL на соответствующий URL-адрес API. В противном случае сохраните REACT_APP_API_URL как http://localhost:8002 .Запуск команд docker-compose
Ожидается, что на машине должны быть установлены docker и docker-compose. Перейдите в корень репозитория и выполните соответствующие команды. Это запустит серверный и клиентский контейнеры вместе с контейнером MongoDB (если мы используем локальный сервер MongoDB) внутри среды Docker.
Использование докер-контейнеров с облачным хранилищем MongoDB
> cd project-root
> docker-compose -f docker-compose.mongocloud.yml build
> docker-compose -f docker-compose.mongocloud.yml upИспользование докер-контейнеров с локальной MongoDB
> cd project-root
> docker-compose build
> docker-compose upКлиент и сервер запущены и работают, и мы должны увидеть следующий экран, если перейдем к URL-адресу клиента.
исходные данные. Зайдите в контейнер докера и выполните приведенные ниже команды. Это заполнит базу данных roles , users и данными products .
docker exec -it appserver bash
npm run db:seed
npm run db:migrate Вы должны увидеть следующий вывод: 
Теперь вы должны войти в приложение и просмотреть список продуктов.
Чтобы запустить через vscode, нам следует запустить проекты на стороне сервера и клиента отдельно, а также убедиться, что mongodb запущен и работает.
Создайте файл .env внутри каталога server . Добавьте приведенные ниже записи или измените их соответствующим образом. Вы можете просмотреть файл .env.sample , чтобы увидеть формат.
DB_HOST=localhost
DB_PORT=27017
DB_NAME=appdb
JWT_SECRET=secret
JWT_EXPIRES_IN=3600
PORT=5000
IS_MONGODB_CLOUD_URL=false
MONGODB_CLOUD_URL=mongodb+srv:// <USER >: <PASSWORD >@cluster0.abcd.mongodb.net/myFirstDatabase?retryWrites=true
Мы предполагаем, что запускаем MongoDB в контейнере докеров.
cd server
npm i
npm run db:up
npm start cd client-pro
nvm use --lts
yarn
yarn startЧтобы заполнить базу данных, нам нужно выполнить следующие команды в контейнере докеров. Вы также можете запускать эти команды в терминале, если вы запускаете сервер и клиент вне среды докера. Я предполагаю, что мы запускаем сервер приложений в контейнере докеров.
docker exec -it appserver bash
npm run db:seed
npm run db:migrate Вы должны увидеть имя пользователя и пароль в файле /server/setup/users.json .
Я представил пользовательский интерфейс управления разрешениями для приложения. Пример изображения приведен ниже.
Sentry.io Мы также можем отправить логи на sendry.io. Чтобы использовать эту функцию, нам нужно добавить запись dsn в client/src/env.config.js . Фрагмент настройки приведен ниже в файле index.js .
Sentry . init ( {
dsn : Config . dsn ,
integrations : [ new Integrations . BrowserTracing ( ) ] ,
tracesSampleRate : 1.0 ,
} ) ; server Чтобы просмотреть API, откройте браузер и посетите http://localhost:5000/api-docs В идеале нам следует добавить все конечные точки API в swagger, но для демонстрационных целей мы добавили только конечную точку API продуктов.
Чтобы протестировать API, мы можем повторно использовать коллекцию почтальона. Откройте docs/rbac-mern-boilerplate.postman_collection.json в Postman, и вы увидите конечные точки с соответствующими полезными данными.
| Проект | Команда | Задача |
|---|---|---|
| корень | npm run build | Строит контейнеры |
| корень | npm run start | Запускайте проекты и базу данных в докер-контейнерах. |
| корень | docker exec -it appserver /bin/sh затем npm run db:seed | Выпускает семенную продукцию внутри контейнера |
| сервер | npm i | Установите зависимости на стороне сервера |
| сервер | npm run db:up | Запустите базу данных в Docker-контейнере. |
| сервер | npm run test | Выполнение тестов с помощью jest |
| клиент | npm i | Установите зависимости на стороне клиента |
| клиент | npm run start | Запустите приложение реагирования |
| клиент | npm run build | Создайте приложение реагирования в производственном режиме. |
| клиент | npm run test | Выполнение тестов с использованием Testing Library |
В этот репозиторий мы включили как модульное тестирование, так и интеграционное тестирование. На данный момент покрытие кода очень низкое, но мы работаем над этим, чтобы где-то в будущем оно превысило 90%.
localStorage и axios . Чтобы запустить тесты, мы можем запустить команду npm run test .
Jest в качестве библиотеки тестирования, а также добавили пакеты supertest и mongodb-memory-server , чтобы упростить интеграционное тестирование.Jest для тестирования уровней сервиса и имитации внешних зависимостей, таких как MongoDB . Чтобы запустить тесты, мы можем запустить команду npm run test .
Этот проект имеет лицензию MIT.
На данный момент я не принимаю никаких вкладов сообщества в отношении кода. Но если у вас есть какие-либо предложения или вы обнаружили какие-либо ошибки, пожалуйста, не стесняйтесь открыть проблему или запрос на включение.
С другой стороны, если вы хотите что-то узнать или начать обсуждение этого проекта, начните обсуждение на нашей доске обсуждений GitHub.
Я записывал этапы кодирования этого проекта. Вы можете найти видео в плейлисте YouTube. Эти видео доступны только на бенгальском языке , но я буду рад провести специальные платные сеансы на английском языке для заинтересованной международной аудитории. Не стесняйтесь обращаться ко мне по адресу [email protected] за любой помощью.
Спасибо. Ваше здоровье.
