start ui web

Start UI [Web] เป็นที่เก็บเริ่มต้นที่มีความคิดเห็นที่สร้างและดูแลโดยทีม Bearstudio และผู้มีส่วนร่วมอื่น ๆ มันแสดงให้เห็นถึงสแต็กที่ทันสมัยของทีมที่เราใช้เมื่อสร้างเว็บแอพสำหรับลูกค้าของเรา

เอกสาร

สำหรับข้อมูลโดยละเอียดเกี่ยวกับวิธีการใช้โครงการนี้โปรดดูเอกสารประกอบ เอกสารประกอบมีข้อมูลที่จำเป็นทั้งหมดเกี่ยวกับการติดตั้งการใช้งานและคำแนะนำบางอย่าง

การสาธิต

การสาธิตการอ่านแบบสดๆอย่างเดียวเกี่ยวกับสิ่งที่คุณจะมีเมื่อเริ่มต้นโครงการด้วย Start UI [Web] พร้อมใช้งานใน demo.start-ui.com

เทคโนโลยี

- TypeScript, ⚛ React, ⚫ nextjs, ⚡ Chakra UI,? trpc, ▲ prisma, ️ tanstack แบบสอบถาม, นิทาน,? นักเขียนบทละคร? ตอบสนองแบบฟอร์มเบ็ด? ตอบสนอง i18next

ความต้องการ

• nodejs> = 20
• PNPM
• Docker (หรือฐานข้อมูล PostgreSQL)

เริ่มต้น

pnpm create start-ui --web myApp

นั่นจะนั่งร้านโฟลเดอร์ใหม่ที่มี start ui [เว็บ] เวอร์ชันล่าสุด?

การติดตั้ง

1. ทำซ้ำไฟล์ .env.example เป็นไฟล์ .env ใหม่และอัปเดตตัวแปรสภาพแวดล้อม

cp .env.example .env

บันทึก

คำแนะนำอย่างรวดเร็วสำหรับการพัฒนาในท้องถิ่น

• อย่าอัปเดต ตัวแปร email_server เนื่องจากค่าเริ่มต้นจะถูกใช้เพื่อจับอีเมลในระหว่างการพัฒนา

2. ติดตั้งการพึ่งพา

pnpm install

3. การตั้งค่าและเริ่มฐานข้อมูลด้วย Docker

pnpm dk:init

บันทึก

ไม่ต้องการใช้ Docker?

ตั้งค่าฐานข้อมูล PostgreSQL (ท้องถิ่นหรือออนไลน์) และแทนที่ตัวแปรสภาพแวดล้อม database_url จากนั้นคุณสามารถเรียกใช้ pnpm db:push เพื่ออัปเดตสคีมาฐานข้อมูลของคุณจากนั้นเรียกใช้ pnpm db:seed เพื่อเมล็ดฐานข้อมูลของคุณ

การพัฒนา

 # Run the database in Docker (if not already started)
pnpm dk:start
# Run the development server
pnpm dev

อีเมลในการพัฒนา

maildev เพื่อจับอีเมล

ในการพัฒนาอีเมลจะไม่ถูกส่งและจะถูกจับโดย MailDev

MailDev UI มีให้ที่ 0.0.0.0:1080

ดูตัวอย่างอีเมล

เทมเพลตอีเมลถูกสร้างขึ้นด้วยส่วนประกอบ react-email ในโฟลเดอร์ src/emails

คุณสามารถดูตัวอย่างเทมเพลตอีเมลได้ที่ http://localhost:3000/devtools/email/{template} โดยที่ {template} เป็นชื่อของไฟล์เทมเพลตในโฟลเดอร์ src/emails/templates

ตัวอย่าง: รหัสเข้าสู่ระบบ

ดูตัวอย่างการแปลอีเมล

เพิ่มภาษาใน URL ตัวอย่างเช่น http://localhost:3000/devtools/email/{template}/{language} โดยที่ {language} เป็นคีย์ภาษา ( en , fr , ... )

ดูอุปกรณ์ประกอบอุปกรณ์ประกอบฉาก

คุณสามารถเพิ่มพารามิเตอร์การค้นหาลงใน URL ตัวอย่างเพื่อผ่านเป็นอุปกรณ์ประกอบฉากไปยังเทมเพลต http://localhost:3000/devtools/email/{template}/?{propsName}={propsValue}

หนังสือนิทาน

pnpm storybook

อัปเดตการพิมพ์ธีม

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

เพียงเรียกใช้คำสั่งต่อไปนี้หลังจากอัปเดตธีม:

pnpm theme:generate-typing

สร้างส่วนประกอบไอคอนที่กำหนดเองจากไฟล์ SVG

ใส่ไฟล์ SVG ที่กำหนดเองลงในโฟลเดอร์ src/components/Icons/svg-sources จากนั้นเรียกใช้คำสั่งต่อไปนี้:

pnpm theme:generate-icons

คำเตือน

ไอคอน SVG ทั้งหมดควรเป็นไฟล์ SVG ที่นำหน้าด้วย icon- (ตัวอย่าง: icon-externel-link ) ที่มีขนาด 24x24px เพียง รูปร่างเดียว และ เต็มไปด้วยสี #000 (จะถูกแทนที่ด้วย currentColor )

อัปเดตคีย์จัดเก็บโหมดสี

คุณสามารถอัปเดตคีย์จัดเก็บข้อมูลที่ใช้ในการตรวจจับโหมดสีโดยการอัปเดตค่าคงที่นี้ในไฟล์ src/theme/config.ts :

 export const COLOR_MODE_STORAGE_KEY = 'start-ui-color-mode' ; // Update the key according to your needs

การทดสอบ E2E

การทดสอบ E2E ถูกตั้งค่าด้วยนักเขียนบทละคร

pnpm e2e     # Run tests in headless mode, this is the command executed in CI
pnpm e2e:ui  # Open a UI which allow you to run specific tests and see test execution

การทดสอบเขียนไว้ในโฟลเดอร์ e2e ; นอกจากนี้ยังมีโฟลเดอร์ e2e/utils ซึ่งมี Utils บางอย่างเพื่อช่วยในการเขียนการทดสอบ

แสดงคำใบ้เกี่ยวกับสภาพแวดล้อมการพัฒนา

ตั้งค่าตัวแปร NEXT_PUBLIC_ENV_NAME env ด้วยชื่อของสภาพแวดล้อม

 NEXT_PUBLIC_ENV_NAME="staging"
NEXT_PUBLIC_ENV_EMOJI="?"
NEXT_PUBLIC_ENV_COLOR_SCHEME="teal"

การแปล

ตั้งค่าส่วนขยายพันธมิตร I18N

เราแนะนำให้ใช้ปลั๊กอินพันธมิตร I18N สำหรับรหัส VS สำหรับการจัดการการแปล

สร้างหรือแก้ไขไฟล์ .vscode/settings.json ด้วยการตั้งค่าต่อไปนี้:

{
  "i18n-ally.localesPaths" : [ " src/locales " ],
  "i18n-ally.keystyle" : " nested " ,
  "i18n-ally.enabledFrameworks" : [ " general " , " react " , " i18next " ],
  "i18n-ally.namespace" : true ,
  "i18n-ally.defaultNamespace" : " common " ,
  "i18n-ally.extract.autoDetect" : true ,
  "i18n-ally.keysInUse" : [ " common.languages.* " ]
}

การผลิต

pnpm install
pnpm storybook:build # Optional: Will expose the Storybook at `/storybook`
pnpm build
pnpm start

ปรับใช้กับ Docker

1. สร้างอิมเมจนักเทียบท่า (แทนที่ start-ui-web ด้วยชื่อโครงการของคุณ)

 docker build -t start-ui-web .

2. เรียกใช้อิมเมจนักเทียบท่า (แทนที่ start-ui-web ด้วยชื่อโครงการของคุณ)

 docker run -p 80:3000 start-ui-web

แอปพลิเคชันจะถูกเปิดเผยในพอร์ต 80 (http: // localhost)