mernboilerplate antd
1.0.0
ในพื้นที่เก็บข้อมูลนี้ ฉันจะเพิ่มแนวทางปฏิบัติที่ดีที่สุดในการผลิตที่เราควรปฏิบัติตามในโปรเจ็กต์ MERN (MongoDB, Express.js, React.js และ Node.js) เพื่อ UX ที่ดีขึ้น ฉันใช้ Antd Pro สำหรับ UI ต่อไปผมจะใช้ MUI เหมือนกัน
ด้านล่างนี้เป็นตัวอย่างของหน้ารายการตัวอย่าง:
ตามชื่อที่แนะนำ พื้นที่เก็บข้อมูลนี้สร้างขึ้นบน Express.js และ React.js อย่างไรก็ตาม ในรายละเอียดการใช้งาน เราจะพบเทคโนโลยีสนับสนุนอื่น ๆ เช่นกัน
รายละเอียดเฟรมเวิร์กและแพ็กเกจสามารถพบได้ในไฟล์ package.json ในไดเร็กทอรีเซิร์ฟเวอร์และไคลเอ็นต์
โดยพื้นฐานแล้วโปรเจ็กต์นี้สามารถดำเนินการได้สองวิธี วิธีหนึ่งคือการใช้นักเทียบท่า อีกวิธีหนึ่งคือเรียกใช้ด้วยตนเองผ่าน vscode
ขึ้นอยู่กับตัวเลือกโฮสติ้ง MongoDB เราเลือกไฟล์นักเทียบท่าที่เหมาะสม
ขณะนี้เรามีไฟล์นักเทียบท่าเขียนสองไฟล์:
docker-compose.mongocloud.yml - คลัสเตอร์ที่โฮสต์ MongoDB.comdocker-compose.yml - คอนเทนเนอร์ MongoDB ในเครื่อง MONGODB_CLOUD_URL ใน docker-compose.mongocloud.yml เป็น MongoDB URL ที่เหมาะสม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ในการ seed ฐานข้อมูล เราจำเป็นต้องรันคำสั่งต่อไปนี้ในคอนเทนเนอร์นักเทียบท่า คุณสามารถรันคำสั่งเหล่านี้ในเทอร์มินัลได้เช่นกัน หากคุณใช้งานเซิร์ฟเวอร์และไคลเอนต์นอกสภาพแวดล้อมนักเทียบท่า ฉันคิดว่าเรากำลังเรียกใช้ appserver ในคอนเทนเนอร์นักเทียบท่า
docker exec -it appserver bash
npm run db:seed
npm run db:migrate คุณควรจะเห็นชื่อผู้ใช้และรหัสผ่านในไฟล์ /server/setup/users.json
ฉันได้แนะนำ UI การจัดการสิทธิ์สำหรับแอปพลิเคชันแล้ว ภาพตัวอย่างได้รับด้านล่าง
Sentry.io นอกจากนี้เรายังสามารถส่งบันทึกไปที่ sentry.io ได้อีกด้วย หากต้องการใช้คุณลักษณะนี้ เราจำเป็นต้องเพิ่มรายการ dsn ลงใน client/src/env.config.js ข้อมูลโค้ดการตั้งค่ามีลักษณะเหมือนด้านล่างในไฟล์ index.js
Sentry . init ( {
dsn : Config . dsn ,
integrations : [ new Integrations . BrowserTracing ( ) ] ,
tracesSampleRate : 1.0 ,
} ) ; server API หากต้องการดู API ให้เปิดเบราว์เซอร์ของคุณแล้วไปที่ http://localhost:5000/api-docs ตามหลักการแล้ว เราควรเพิ่มตำแหน่งข้อมูล API ทั้งหมดลงในผยอง แต่เพื่อการสาธิต เราได้เพิ่มเฉพาะตำแหน่งข้อมูล 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 | เริ่มฐานข้อมูลในคอนเทนเนอร์นักเทียบท่า |
| เซิร์ฟเวอร์ | 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] เพื่อขอความช่วยเหลือใด ๆ
ขอบคุณ. ไชโย
