start ui web

Start UI [Web]는 Bearstudio 팀 및 기타 기고자가 작성하고 유지 관리하는 의견이 많은 프론트 엔드 스타터 저장소입니다. 고객을위한 웹 앱을 만들 때 사용하는 팀의 최신 스택을 나타냅니다.

선적 서류 비치

이 프로젝트 사용 방법에 대한 자세한 정보는 문서를 참조하십시오. 문서에는 설치, 사용법 및 일부 가이드에 필요한 모든 정보가 포함되어 있습니다.

데모

START UI [Web]로 프로젝트를 시작할 때 가지고있는 내용에 대한 실시간 읽기 전용 데모는 demo.start-ui.com에서 사용할 수 있습니다.

기술

? TypeScript, reac️ React, ⚫️ Nextjs, ⚡️ Chakra UI,? TRPC, ▲ PRISMA,? ️ TANSTACK QUERY, 스토리 북,? 극작가,? 반응 후크 양식,? 반응 i18next

요구 사항

• nodejs> = 20
• PNPM
• Docker (또는 PostgreSQL 데이터베이스)

시작하기

pnpm create start-ui --web myApp

그것은 최신 버전의 START UI [Web]가있는 새로운 폴더를 발판할까요?

설치

1. .env.example 파일을 새 .env 파일로 복제하고 환경 변수를 업데이트하십시오.

cp .env.example .env

메모

지역 개발에 대한 빠른 조언

• 기본값은 개발 중에 이메일을 잡는 데 사용되므로 email_server 변수를 업데이트하지 마십시오 .

2. 종속성을 설치하십시오

pnpm install

3. Docker로 DB를 설정하고 시작하십시오

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으로 제공됩니다.

이메일 미리보기

전자 메일 템플릿은 src/emails 폴더의 react-email 구성 요소로 구축됩니다.

http://localhost:3000/devtools/email/{template} {template} 이메일 템플릿을 미리 볼 수 있습니다 src/emails/templates

예 : 로그인 코드

이메일 번역 미리보기

http://localhost:3000/devtools/email/{template}/{language} 와 같은 미리보기 URL에 언어를 추가하십시오. 여기서 {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 아이콘은 24x24px 크기의 icon- (예 : icon-externel-link )에 의해 접두사 인 SVG 파일이어야하며 #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 폴더로 작성됩니다. 또한 테스트 작성에 도움이되는 util이 포함 된 e2e/utils 폴더도 있습니다.

개발 환경에 대한 힌트를 보여줍니다

환경 이름으로 NEXT_PUBLIC_ENV_NAME env 변수를 설정하십시오.

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

번역

I18N Ally 확장을 설정하십시오

Translations Management 용 VS 코드 용 i18n Ally 플러그인을 사용하는 것이 좋습니다.

다음 설정으로 .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. Docker Image 빌드 ( start-ui-web 프로젝트 이름으로 바꾸십시오)

 docker build -t start-ui-web .

2. Docker Image를 실행하십시오 ( start-ui-web 프로젝트 이름으로 바꾸십시오)

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

응용 프로그램은 포트 80 (http : // localhost)에 노출됩니다.