wdc saas starter kit

알아채다! 이 스타터 키트는 완전히 완성되지 않았지만 누군가가 추가하고 싶다면 지금은 공개하고 있습니다. 나는 이것에 대한 작업에 불타고 있으므로 그들이 찾은 버그를 고치는 데 도움이되고 싶은 사람에게 열려 있습니다.

불화

여기에서 코드에 대해 이야기하거나 기능 / 등을 제안하려면 불화에 가입 할 수 있습니다.

https://discord.gg/n2ueyp7rfu

코드 연습 (조기 액세스)

이 코드 기반을 설명하는 비디오 연습 컨텐츠에 더 많은 손을 원한다면, 배포 방법 및 제작에서 유지 관리 방법을 보여줍니다. /l/wdc-saas-starter-kit-walkthrough. 비디오를 녹화하고 편집하는 중이지만 지금 구매하면 원래 가격이 50% 할인됩니다.

스타터 키트에 오신 것을 환영합니다

WDC Next.js 스타터 키트에 오신 것을 환영합니다! 이것은 우리가 느끼는 다음 기술이 포함 된 Github 템플릿으로 새로운 SaaS 제품의 훌륭한 출발점입니다.

• 권한 부여
• 구독 관리 (Stripe)
• 스트라이프 통합 / webhooks
• 그룹 관리
• 파일 업로드로 R2
• 이슬비 ORM
• 빛 / 어두운 모드
• Shadcn
• 테일 윈드 CSS
• Posthog Analytics

기여

이 스타터 키트에 명백한 문제가있는 경우 풀 요청을 제출하거나 제출 및 문제를 제출하십시오. 우리는 선택한 핵심 기술 로이 스타터를 간단하게 유지하려고하므로 사전 승인없이 다양한 것들을 추가하는 것이 좋습니다.

시작하는 방법

GitHub Repo에서 "이 템플릿 사용"버튼을 클릭하여 시작하십시오. 코드 변경을 추적 할 수 있도록 새 저장소를 작성하는 것이 좋습니다. 후, 자신의 저장소를 컴퓨터로 복제하고 작업을 시작하십시오.

전제 조건

이 스타터 키트는 Docker 및 Docker Compose를 사용하여 Postgres 데이터베이스를 실행하므로 호스팅 된 데이터베이스 솔루션을 가리키기 위해 프로젝트를 설치하거나 프로젝트를 수정해야합니다.

달리는 방법

1. cp .env.sample .env
2. npm i
3. docker compose up
4. npm run db:migrate
5. npm run dev

Env 설정

이 스타터 키트는 Google Oauth , Stripe 및 Retend 와 같은 몇 가지 외부 서비스에 따라 다릅니다. 아래 단계를 따르고 모든 것이 설정되어 있는지 확인하고 필수 값을 .env 파일에 복사해야합니다.

재판소

https://resend.com/에서 계정을 만들고 API 키를 생성하고 이메일에 붙여 넣기 _server_password

사용자 정의 도메인에서 이메일을 보내고 예상에서 예상되는 라인에서 일치하도록 이메일을 설정할 수 있도록 도메인을 재현으로 설정하십시오. 이렇게하려면 도메인 제공 업체로 이동하여 Resend에 요약 된 필요한 레코드를 추가하십시오.

CloudFlare R2

TODO : 버킷과 키에 대한 정보를 추가하십시오

데이터 베이스

이 스타터 키트는 Postgres를 사용합니다. Supabase는 2 개의 무료 Postgres 데이터베이스를 제공합니다. 데이터베이스를 설정하고 Database_URL 을 가져옵니다.

스트라이프 설정

이 스타터 키트는 Stripe를 사용하여 https://stripe.com에서 Stripe 계정을 설정해야합니다. 계정과 프로젝트를 작성한 후에는 다음 ENV 변수를 설정해야합니다.

• Stripe_api_key
• next_public_stripe_key
• Stripe_webhook_secret
• price_id
• next_public_stripe_manage_url

이것을 찾을 수있는 방법은 다음과 같습니다.

스트라이프 키

.env 내부에서 Next_public_stripe_key 와 Stripe_api_key를 모두 정의해야합니다. 여기에서 찾을 수 있습니다.

• https://dashboard.stripe.com/test/apikeys

Webhook 키

로컬로 개발 중이거나 Prod에 배포하는 경우 Webhook 키를 얻기 위해 필요한 두 가지 경로가 있습니다.

지역 개발

1. Stripe CLI 설치 : MacOS 또는 Linux의 경우 Homebrew : brew install stripe/stripe-cli/stripe 사용할 수 있습니다.

• Windows의 경우 Stripe Cli Github Releases 페이지에서 Windows 설치 프로그램을 사용할 수 있습니다.

2. 길에 스트라이프 CLI를 추가하십시오 : Stripe CLI 실행 파일이 포함 된 디렉토리가 시스템의 경로 환경 변수에 있는지 확인하십시오.
3. NPM Alias stripe:listen Stripe 이벤트에 대해 ListSen에 로컬로 작동하는 응용 프로그램을 설정하려면 실행할 수 있습니다. 이 명령을 실행하고 webhook Secret IT 인쇄물을 콘솔에 .env 파일로 인쇄하십시오.

생산

제작에 갈 때 Webhook 엔드 포인트를 만들고 webhook 비밀을 Stripe_webhook_secret 에 복사해야합니다.

1. https://dashboard.stripe.com/test/webhooks
2. https://your-domain.com/api/webhooks/stripe를 가리키는 엔드 포인트를 만듭니다
3. 이벤트 invoice.payment_succeeded 및 Checkout.session.completed를 듣습니다
4. Stripe Secret 키를 찾고 프로젝트에 복사하십시오.

가격 ID (제품)

Stripe에서 구독 제품을 만들어야합니다.

1. https://dashboard.stripe.com/products/create
2. 한 번의 제품을 만드십시오
3. 가격 ID를 복사하십시오
4. Price_id 의 .env에 가격 ID를 붙여 넣습니다

고객 포털

Stripe는 고객이 구독을 취소 할 수있는 내장이 있습니다. 이 기능을 활성화해야합니다.

1. https://dashboard.stripe.com/settings/billing/portal
2. 포털 링크 활성화 버튼을 클릭하십시오
3. 포털 링크를 복사하십시오
4. Env ariable로 Next_public_stripe_manage_url로 붙여 넣으십시오

host_name

생산에 따라 https://you-domain.com 과 같은 host_name을 fqdn으로 설정하려고합니다.

인증 설정

Google 제공자

기본적 으로이 스타터는 Google 제공 업체와 함께 제공됩니다.

1. https://console.cloud.google.com/apis/credentials
2. 새 프로젝트를 만듭니다
3. OAUTH 동의 화면 설정
4. 자격 증명 -OAuth 클라이언트 ID를 작성하십시오
5. 승인 된 JavaScript 기원

• http : // localhost : 3000
• https://your-domain.com

6. 승인 된 리디렉션 URI

• http : // localhost : 3000/api/auth/callback/google
• https://your-domain.com/api/auth/callback/google

7. .env 내부의 Google ID와 비밀을 설정하십시오

• Google_client_id
• Google_client_secret

Github 제공 업체

TODO : 정보 추가

posthog