mernboilerplate antd

Selamat datang di proyek Boilerplate RBAC MERN

Repositori boilerplate MERN yang lengkap (Sedang dalam proses) dengan fitur RBAC, mengikuti semua praktik terbaik produksi.

Dalam repositori ini saya akan terus menambahkan praktik terbaik produksi yang harus kita ikuti dalam proyek MERN (MongoDB, Express.js, React.js, dan Node.js). Juga untuk UX yang lebih baik saya menggunakan Antd Pro untuk UI. Mungkin nanti saya akan menggunakan MUI juga.

Di bawah ini adalah contoh halaman daftar contoh:

Tumpukan teknologi

Seperti namanya, repositori ini dibangun di atas Express.js dan React.js, namun pada detail implementasinya kita juga akan menemukan teknologi pendukung lainnya.

Sisi klien

• React - Pustaka JavaScript untuk membangun antarmuka pengguna
• Ant Design Pro - Sistem desain untuk produk tingkat perusahaan. Ciptakan pengalaman kerja yang efisien dan menyenangkan
• Perpustakaan Pengujian - Perpustakaan Pengujian React
• Permintaan Umi - Klien HTTP untuk menjalankan permintaan HTTP dari browser ke server.

Sisi server

• Node.js - acara I/O untuk backend
• Express.js - Kerangka web yang cepat, tidak beropini, dan minimalis untuk Node.js
• MongoDB - Platform data aplikasi untuk database NoSQL
• Luwak - luwak
• Kesombongan - Kesombongan (Belum selesai)
• Jest - kerangka pengujian JavaScript
• Super Test - Kerangka pengujian API uji super

Detail kerangka kerja dan paket dapat ditemukan di file package.json di direktori server dan klien.

Menjalankan aplikasi

Proyek ini pada dasarnya dapat dijalankan dengan dua cara. Salah satunya menggunakan buruh pelabuhan, cara lainnya adalah menjalankan secara manual melalui vscode.

Buruh pelabuhan

Bergantung pada opsi hosting MongoDB, kami memilih file penulisan buruh pelabuhan yang sesuai.

Docker menulis file

Saat ini kami memiliki dua file pembuat buruh pelabuhan:

• docker-compose.mongocloud.yml - Kluster yang dihosting MongoDB.com
• docker-compose.yml - Wadah MongoDB lokal

Catatan

1. Kita perlu mengubah MONGODB_CLOUD_URL di docker-compose.mongocloud.yml menjadi URL MongoDB yang sesuai.
2. Kita perlu mengubah REACT_APP_API_URL di docker-compose.yml menjadi URL API yang sesuai. Jika kita ingin mengekspos klien kita ke internet, kita perlu mengubah REACT_APP_API_URL ke URL API yang sesuai. Jika tidak, pertahankan REACT_APP_API_URL sebagai http://localhost:8002 .

Jalankan perintah penulisan buruh pelabuhan

Diharapkan mesin tersebut harus menginstal docker dan docker-compose. Pergi ke root repositori dan jalankan perintah yang sesuai. Ini akan menjalankan container server dan klien bersama dengan container MongoDB (jika kita menggunakan server MongoDB lokal) di dalam lingkungan Docker.

Menggunakan wadah buruh pelabuhan dengan MongoDB yang dihosting di cloud

 > cd project-root
> docker-compose -f docker-compose.mongocloud.yml build
> docker-compose -f docker-compose.mongocloud.yml up

Menggunakan wadah buruh pelabuhan dengan MongoDB lokal

 > cd project-root
> docker-compose build
> docker-compose up

Klien dan server keduanya aktif dan berjalan dan kita akan melihat layar berikut jika kita menavigasi ke url klien.

• data benih Masuk ke dalam wadah buruh pelabuhan dan jalankan perintah di bawah ini. Ini akan menyemai database dengan data roles , users , dan products .

  docker exec -it appserver bash
  npm run db:seed
  npm run db:migrate

  Anda akan melihat keluaran berikut:

  

  

  Anda sekarang harus masuk ke aplikasi dan melihat daftar produk.

Kode Visual Studio

Prasyarat

• Node.js : Untuk menjalankan paket npm
• MongoDB : Sebagai database aplikasi

Tangga

• Untuk menjalankan melalui vscode, kita harus menjalankan proyek sisi server dan klien secara terpisah, dan juga memastikan mongodb aktif dan berjalan.

• Buat file .env di dalam direktori server . Tambahkan entri di bawah ini atau ubah sesuai. Anda dapat mengikuti file .env.sample untuk melihat formatnya.

   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
  

Perintah server

Kami berasumsi kami menjalankan MongoDB di wadah buruh pelabuhan.

 cd server
npm i
npm run db:up
npm start

Perintah klien

 cd client-pro
nvm use --lts
yarn
yarn start

Penyemaian data

Untuk menyemai database, kita perlu menjalankan perintah berikut di container buruh pelabuhan. Anda juga dapat menjalankan perintah ini di terminal jika Anda menjalankan server dan klien di luar lingkungan buruh pelabuhan. Saya berasumsi kita menjalankan appserver di wadah buruh pelabuhan.

docker exec -it appserver bash
npm run db:seed
npm run db:migrate

Anda seharusnya dapat melihat nama pengguna dan kata sandi di file /server/setup/users.json .

UI manajemen izin

Saya telah memperkenalkan antarmuka manajemen izin untuk aplikasi tersebut. Contoh gambar diberikan di bawah ini.

Log terpusat ke Sentry.io

Kami juga dapat mengirimkan log ke sentry.io. Untuk menggunakan fitur ini, kita perlu menambahkan entri dsn ke client/src/env.config.js . Cuplikan pengaturannya seperti di bawah ini pada file index.js

 Sentry . init ( {
  dsn : Config . dsn ,
  integrations : [ new Integrations . BrowserTracing ( ) ] ,
  tracesSampleRate : 1.0 ,
} ) ; 

API server uji (BELUM SELESAI)

Untuk melihat api, buka browser Anda dan kunjungi http://localhost:5000/api-docs Idealnya kita harus menambahkan semua titik akhir API ke dalam kesombongan, tetapi untuk tujuan demo, kita hanya menambahkan titik akhir Produk API.
Untuk menguji API, kita dapat menggunakan kembali koleksi tukang pos. Buka docs/rbac-mern-boilerplate.postman_collection.json ke Postman dan Anda akan melihat titik akhir dengan muatan yang sesuai.

Skrip

Proyek	Memerintah	Tugas
akar	npm run build	Membangun wadah
akar	npm run start	Mulai proyek dan database dalam wadah buruh pelabuhan
akar	docker exec -it appserver /bin/sh lalu npm run db:seed	Mengeksekusi produk benih di dalam wadah
server	npm i	Instal dependensi sisi server
server	npm run db:up	Mulai database dalam wadah buruh pelabuhan
server	npm run test	Jalankan tes menggunakan jest
klien	npm i	Instal dependensi sisi klien
klien	npm run start	Mulai aplikasi reaksi
klien	npm run build	Bangun aplikasi reaksi dalam mode produksi
klien	npm run test	Jalankan tes menggunakan Testing Library

Jenis pengujian

Dalam repositori ini, kami telah menyertakan pengujian unit dan pengujian integrasi. Untuk saat ini, cakupan kodenya sangat rendah, namun kami berupaya untuk menjadikannya lebih dari 90% di masa mendatang.

Sisi klien

• Kami hanya memasukkan pengujian unit di sisi klien, dan meniru semua dependensi eksternal seperti localStorage dan axios .

Untuk menjalankan pengujian, kita dapat menjalankan perintah npm run test .

Sisi server

• Pengujian integrasi: Kami telah mengintegrasikan Jest sebagai perpustakaan pengujian, dan kami telah menambahkan paket supertest dan mongodb-memory-server untuk membuat pengujian integrasi lebih mudah.
• Pengujian unit: Kami telah menggunakan Jest untuk menguji lapisan layanan dan meniru dependensi eksternal seperti MongoDB .

Untuk menjalankan pengujian, kita dapat menjalankan perintah npm run test .

Lisensi

Proyek ini berlisensi MIT.

Kontribusi

Untuk saat ini, saya tidak menerima kontribusi komunitas apa pun dalam hal kode. Namun jika Anda memiliki saran atau menemukan bug, silakan membuka masalah atau permintaan penarikan.

Di sisi lain, jika Anda ingin mengetahui sesuatu, atau ingin memulai diskusi tentang proyek ini, silakan mulai diskusi di papan diskusi GitHub kami.

Tutorial tentang cara membangun atau menggunakan proyek ini

Saya telah merekam langkah-langkah pengkodean proyek ini. Anda dapat menemukan videonya di playlist YouTube. Video-video ini hanya tersedia dalam bahasa Bangla , tetapi saya dengan senang hati mengadakan sesi khusus+berbayar dalam bahasa Inggris untuk pemirsa internasional yang berminat. Jangan ragu untuk menghubungi saya di [email protected] untuk bantuan apa pun.

Terima kasih. Bersulang.