bisonapp

สแต็คเต็มสแต็คในกล่อง

Bison เป็นที่เก็บเริ่มต้นที่สร้างขึ้นจากแอพในโลกแห่งความเป็นจริงที่ Echobind มันแสดงถึง "Greenfield Web Stack" ของทีมที่เราใช้เมื่อสร้างเว็บแอพสำหรับลูกค้า

เราปรับปรุงสิ่งนี้อยู่เสมอและเรายินดีต้อนรับคำแนะนำจากชุมชน!

เทคโนโลยี

• next.js
• ตัวพิมพ์ใหญ่
• TRPC API เพื่อความปลอดภัยแบบครบวงจร
• prisma w/ postgres
• ลมลม
• ฟอร์มเบ็ดตอบสนอง
• นักเขียนบทละครสำหรับการทดสอบ E2E
• React Testing Library และ jest สำหรับการทดสอบหน่วยและ API

คุณสมบัติ

• เทมเพลต Hygen ที่ปรับแต่งได้เพื่อสร้างไฟล์ใหม่
• หน้าล็อกอิน/ลงทะเบียนแบบต่อสายเต็มด้วยการตรวจสอบความถูกต้องของไคลเอนต์และฝั่งเซิร์ฟเวอร์
• Eslint กำหนดค่าล่วงหน้าด้วยแนวทางปฏิบัติที่ดีที่สุดของ Echobind
• การนำเข้า PATH นามแฝงไปยังโฟลเดอร์ Root Project ( @/ ) เพื่อหลีกเลี่ยงความจำเป็นสำหรับเส้นทางการนำเข้าสัมพัทธ์ที่ยาวนาน
• ตั้งค่าสำหรับส่วนประกอบจาก ui.shadcn.com

การประชุม

• อย่าคัดลอก/วางไฟล์ใช้เครื่องกำเนิดไฟฟ้าและเทมเพลต Hygen ต้องการอัปเดตเครื่องกำเนิดไฟฟ้าเมื่อโครงการของคุณวิวัฒนาการหรือไม่? พวกเขาทั้งหมดอยู่ในโฟลเดอร์ _templates
• อย่าเขียนประเภทด้วยตนเองสำหรับขั้นตอน TRPC อนุมานประเภทจากคำจำกัดความของเราเตอร์
• หน้าส่วนหน้าทั้งหมดเป็นแบบคงที่โดยค่าเริ่มต้น หากคุณต้องการบางสิ่งที่แสดงเซิร์ฟเวอร์เพียงเพิ่ม getServerSideProps เหมือนที่คุณต้องการในแอพถัดไป
• แทนที่จะสร้างคลาส CSS ส่วนประกอบ (เช่น .btn หรือ .input ) หรือติดตั้งไลบรารีส่วนประกอบส่วนประกอบ UI ควรคัดลอก/วางลงในโฟลเดอร์ /components/ui และปรับตามต้องการ ui.shadcn.com เป็นแหล่งที่แนะนำสำหรับส่วนประกอบเหล่านี้

การแลกเปลี่ยน

• เพื่อลดความซับซ้อน Bison จะหลีกเลี่ยงพื้นที่ทำงานของเส้นด้ายและแยกโฟลเดอร์ระดับบนสุด นึกถึงแอพของคุณเหมือนเสาหินแบบดั้งเดิม แต่มีส่วนหน้าและ API แยกต่างหาก ซึ่งหมายความว่าโฟลเดอร์อาจมีการผสมผสานมากกว่าที่คุณคุ้นเคยเล็กน้อย

ทางเลือก

อีกสองสามโครงการที่เติบโตอย่างรวดเร็วในพื้นที่ Jamstack เต็มสแต็ค

Redwoodjs Redwood เป็นกรอบการทำงานที่มีแนวโน้มมากที่เรากำลังดูอยู่ เราใช้แนวคิดของ "เซลล์" โดยตรงจากเรดวู้ด (แม้ว่าจะเป็นที่ยอมรับว่าเวอร์ชันของเราใช้รหัสอีกเล็กน้อย!)

Blitz.js Blitz ก็มีแนวโน้มมากเช่นกัน Blitz ถูกสร้างขึ้นบน next.js (ซึ่งเรารัก!) และใช้วิธีการที่แตกต่างกันมากโดยพยายามที่จะลบเลเยอร์ API โดยใช้การประชุมที่จัดทำโดย Next.js.

เราอาจยืมแนวคิดจากเรดวู้ดและบลิทซ์เมื่อเวลาผ่านไปหรือเปลี่ยนเป็นหนึ่งในขณะที่พวกเขายังคงเติบโต

คิดว่าวัวกระทิงอยู่ใกล้กับโลหะและกำหนดค่าไว้ล่วงหน้าเล็กน้อยเพื่อให้ดีที่สุดและประสิทธิภาพ ข่าวดีก็คือถ้าคุณไม่เห็นด้วยกับตัวเลือกใด ๆ ที่เราทำไม่มีอะไรซ่อนอยู่จากคุณ คุณยินดีที่จะปรับ "เฟรมเวิร์ก" ให้เหมาะกับความต้องการของคุณ

---

เริ่มต้น

สร้าง repo ใหม่จากเทมเพลต Bison

ใช้เส้นด้าย:

yarn create bison-app MyApp

ใช้ NPX:

npx create-bison-app MyApp

ตั้งค่าฐานข้อมูล

โปรดดูที่: ตั้งค่า postgres

เรียกใช้แอพในพื้นที่

จากรากให้เรียกใช้ yarn dev สิ่งนี้จะทำงาน next dev เพื่อเรียกใช้ฟังก์ชั่นส่วนหน้าและเซิร์ฟเวอร์ที่ไม่มีอยู่ในเครื่อง

ขั้นตอนต่อไป

หลังจากแอปทำงานในเครื่องคุณจะต้องตั้งค่าการปรับใช้

เอกสาร

• เวิร์กโฟลว์ dev ที่แนะนำ
• การปรับใช้

มีความคิดที่จะปรับปรุงวัวกระทิงหรือไม่? แจ้งให้เราทราบ!

---

เกี่ยวกับ echobind

Echobind เป็นเอเจนซี่ดิจิทัลที่ให้บริการเต็มรูปแบบที่สร้างเว็บและแอพมือถือสำหรับลูกค้าในหลากหลายอุตสาหกรรม

เราเป็นผู้เชี่ยวชาญใน React, React Native, Node, GraphQL และ Rails

หากคุณกำลังสร้างแอพใหม่ทีมของคุณกำลังแก้ปัญหาอย่างหนักหรือคุณเพียงแค่ต้องการความช่วยเหลือในการเอาชนะเส้นชัยเราชอบที่จะทำงานร่วมกับคุณ ทักทายและบอกเราว่าคุณกำลังทำอะไรอยู่!