notion clone
1.0.0
โคลนนี้พยายามทำซ้ำความคิดคุณสมบัติการจดบันทึกที่ยอดเยี่ยมบางอย่าง หากคุณยังไม่ทราบความคิดดังนั้นฉันขอแนะนำให้ลองดู!
- การสาธิตสด: notion-lone.kmuenster.com
- บทความกลาง: วิธีการสร้างตัวแก้ไขข้อความเช่นความคิด
/ เปลี่ยนบล็อกเป็นประเภทเนื้อหาที่แตกต่างกัน)<a> ในบล็อกข้อความ)/image )ส่วนหน้าถูกสร้างขึ้นด้วย next.js และแสดงผลฝั่งเซิร์ฟเวอร์อย่างเต็มที่ บนแบ็กเอนด์ REST API จัดการการบันทึกเนื้อหาผู้ใช้และการจัดการผู้ใช้
next.js · react.js · scss/sass
Express.js · MongoDB กับ Mongoose · Nodemailer · JWT (Cookie-based)
โคลนโครงการ
git clone https://github.com/konstantinmuenster/notion-clone.git
cd notion-cloneเพิ่มตัวแปรสภาพแวดล้อม
แบ็กเอนด์: สร้างไฟล์. .env ในไดเรกทอรี backend :
FRONTEND_URL="http://localhost:3000"
DOMAIN="localhost"
JWT_KEY="yourSecretForTokenGeneration"
PORT=8080
MONGO_URI="mongodb+srv://username:[email protected]/database?retryWrites=true&w=majority"
MAIL_HOST="smtp.sendgrid.net"
MAIL_PORT=465
MAIL_USER="apiKey"
MAIL_SENDER="Your Name <[email protected]>"
MAIL_PASSWORD="yourSendGridApiKey"
frontend: สร้างไฟล์ .env.local ในไดเรกทอรี frontend :
NEXT_PUBLIC_API="http://localhost:8080" // references your Backend API endpoint
ติดตั้งและเรียกใช้แบ็กเอนด์ (http: // localhost: 8080)
cd backend
npm install
npm startติดตั้งและเรียกใช้ Frontend (http: // localhost: 3000)
cd frontend
npm install
npm run devคุณสามารถโฮสต์แอปพลิเคชันบนผู้ให้บริการเกือบทุกรายที่รองรับแอปพลิเคชันโหนดและโดเมนที่กำหนดเอง ฉันตัดสินใจที่จะเป็นเจ้าภาพการแข่งขันบน vercel.com และแบ็กเอนด์บน heroku.com แต่คุณสามารถโฮสต์ทั้งส่วนหน้าและแบ็กเอนด์บนผู้ให้บริการรายเดียวกันหากคุณต้องการ
คุณต้องสร้างคลัสเตอร์ MongoDB ใหม่ล่วงหน้า มันจะเก็บข้อมูลหน้าและบล็อกทั้งหมดของคุณ คุณสามารถสร้างฟรีบน MongoDB Atlas
ตรวจสอบให้แน่ใจ ว่าคุณสร้างคอลเลกชันต่อไปนี้:
ตรวจสอบให้แน่ใจ ว่าคุณอนุญาตให้ทุกคนเข้าถึงเครือข่าย (เนื่องจาก Heroku)
หากคุณต้องการปรับใช้แบ็กเอนด์บน heroku.com ให้สร้างแอพใหม่ในภูมิภาคที่คุณต้องการบน Heroku.com
ตรวจสอบให้แน่ใจ ว่าคุณเพิ่มตัวแปรสภาพแวดล้อมการผลิตทั้งหมดสำหรับแบ็กเอนด์ คุณสามารถดูว่าตัวแปรใดที่จำเป็นในส่วนการติดตั้งของ readme นี้
ตรวจสอบให้แน่ใจ ว่าคุณเพิ่มโดเมนที่กำหนดเองสำหรับแบ็กเอนด์ API ของคุณ เนื่องจากแอปพลิเคชันใช้การรับรองความถูกต้องตามคุกกี้เราจึงต้องเรียกใช้แบ็กเอนด์และส่วนหน้าในโดเมนเดียวกัน ตัวอย่างเช่นฉันเรียกใช้ส่วนหน้าบน www.notion-clone.kmuenster.com และแบ็กเอนด์บน api.notion-clone.kmuenster.com
ต้องการทำงานตามกำหนดเวลาหรือไม่? ในการลบหน้าและผู้ใช้ที่ไม่ได้ใช้งานฉันทำงานตามกำหนดเวลาบ่อยครั้ง หากคุณต้องการคุณสมบัตินี้เช่นกันคุณต้องเพิ่ม dynos เพิ่มเติมลงในแอปพลิเคชันของคุณและเรียกใช้งาน
$ node jobs/index.jsผ่าน Heroku Scheduler
สุดท้ายคุณสามารถปรับใช้แอปของคุณโดยใช้ Heroku Git
ตรวจสอบให้แน่ใจ ว่าเมื่อคุณผลักแบ็กเอนด์ไปยัง Heroku คุณจะทำการผลักดันทรี git เนื่องจาก notion-clone เป็นโมโนรีปโปที่มีแบ็กเอนด์และส่วนหน้า ดังนั้นเรียกใช้ git subtree push --prefix backend heroku master แทน git push heroku master ดังนั้นเราจะผลักดันส่วนแบ็กเอนด์เท่านั้น
หากคุณต้องการปรับใช้ส่วนหน้าบน vercel.com คุณสามารถใช้ Vercel CLI ได้อย่างง่ายดาย
ด้วย Vercel CLI เราไม่จำเป็นต้องกดทรีย่อย แต่เราสามารถเปลี่ยนไปใช้โฟลเดอร์ Frontend และเรียกใช้คำสั่ง vercel เพื่อปรับใช้:
cd frontend
vercelสิ่งนี้จะนำคุณผ่านคู่มือการตั้งค่าสำหรับแอปพลิเคชันส่วนหน้าของคุณ หลังจากนั้นแอพควรจะนำไปใช้งานได้สำเร็จ
ตรวจสอบให้แน่ใจ ว่าคุณเพิ่มจุดสิ้นสุด API แบ็กเอนด์เป็นตัวแปรสภาพแวดล้อมการผลิตบน vercel.com
ตรวจสอบให้แน่ใจว่า คุณเพิ่มโดเมนที่กำหนดเองสำหรับส่วนหน้าของคุณ (ซึ่งตรงกับโดเมนที่คุณระบุไว้ในตัวแปรสภาพแวดล้อมแบ็กเอนด์ของคุณ)
Konstantin Münster - Konstantin.digital
แจกจ่ายภายใต้ใบอนุญาต MIT ดู LICENSE สำหรับข้อมูลเพิ่มเติม
https://github.com/konstantinmuenster
