@@ -19,16 +19,20 @@ It uses [BetterAuth](https://better-auth.com/) for authentication and [Drizzle O
1919- ** Database:** [ Drizzle ORM] ( https://orm.drizzle.team/ ) + PostgreSQL
2020- ** UI:** [ Tailwind CSS] ( https://tailwindcss.com/ ) & [ shadcn/ui] ( https://ui.shadcn.com/ )
2121
22- ## Getting started
22+ ## Developing locally
2323
24- ### Install Encore
25- If you haven't already, install Encore:
24+ ### Prerequisites
25+ - [ Encore CLI] ( https://encore.dev/docs/install ) installed
26+ - Node.js 20 or later
27+ - Docker (for local PostgreSQL)
2628
27- - ** macOS:** ` brew install encoredev/tap/encore `
28- - ** Linux:** ` curl -L https://encore.dev/install.sh | bash `
29- - ** Windows:** ` iwr https://encore.dev/install.ps1 | iex `
29+ When you have [ installed Encore] ( https://encore.dev/docs/install ) , you can create a new Encore application and clone this example with this command:
3030
31- ### Install dependencies
31+ ``` bash
32+ encore app create my-app-name --example=ts/nextjs-betterauth-drizzle
33+ ```
34+
35+ ## Running locally
3236
3337Install backend dependencies:
3438
@@ -44,49 +48,54 @@ npm install
4448cd ..
4549```
4650
47- ### Run locally
48-
49- Start the Encore backend:
51+ Run your Encore backend:
5052
5153``` bash
5254encore run
5355```
5456
55- In a separate terminal, start the Next.js frontend:
57+ In a separate terminal, run the Next.js frontend:
5658
5759``` bash
5860npm run dev:frontend
5961```
6062
61- Open [ http://localhost:3000 ] ( http://localhost:3000 ) to see your app.
63+ Open [ http://localhost:3000 ] ( http://localhost:3000 ) to view the app.
64+
65+ ## Local Development Dashboard
66+
67+ While ` encore run ` is running, open [ http://localhost:9400 ] ( http://localhost:9400 ) to access Encore's local developer dashboard.
68+
69+ Here you can see:
70+ - API docs and make requests in the API explorer
71+ - View traces of responses
72+ - Database explorer with Drizzle Studio integration (click ** DB Explorer** )
6273
63- ### Database
74+ ## Database
6475
65- The database is automatically provisioned by Encore when you run ` encore run ` . Migrations in ` auth/migrations/ ` are automatically applied.
76+ The database is automatically provisioned by Encore. Migrations in ` auth/migrations/ ` are automatically applied.
6677
67- #### Database Shell
78+ ### Database Shell
6879
69- To access the database via psql:
80+ Access the database via psql:
7081
7182``` bash
7283encore db shell auth
7384```
7485
75- #### Drizzle Studio
86+ ### Drizzle Studio
7687
77- Drizzle Studio is integrated directly into the Encore local development dashboard at [ http://localhost:9400 ] ( http://localhost:9400 ) .
88+ Open Drizzle Studio from the Encore dashboard at [ http://localhost:9400 ] ( http://localhost:9400 ) by clicking ** DB Explorer ** .
7889
79- Click on ** DB Explorer** in the dashboard to browse tables, run queries, and edit data.
80-
81- You can also run Drizzle Studio standalone:
90+ Or run it standalone:
8291
8392``` bash
8493DATABASE_URL=$( encore db conn-uri auth) npm run db:studio
8594```
8695
87- #### Reset Database
96+ ### Reset Database
8897
89- To reset the database and re-run all migrations :
98+ To reset the database:
9099
91100``` bash
92101encore db reset
@@ -102,7 +111,30 @@ The starter includes validation for:
102111- ** Name length** : Minimum 2 characters
103112- ** Password confirmation** : Must match on sign up
104113
105- ## Production deployment
114+ ## Deployment
115+
116+ Deploy your application to a staging environment in Encore's free development cloud:
117+
118+ ``` bash
119+ git push encore
120+ ```
121+
122+ Then head over to the [ Cloud Dashboard] ( https://app.encore.dev ) to monitor your deployment and find your production URL.
123+
124+ From there you can also connect your own AWS or GCP account to use for deployment.
125+
126+ ### Frontend Deployment
127+
128+ Deploy the frontend to [ Vercel] ( https://vercel.com ) :
129+
130+ ``` bash
131+ cd frontend
132+ vercel
133+ ```
134+
135+ Update ` frontend/src/lib/auth-client.ts ` with your production backend URL if needed, and update CORS origins in ` encore.app ` .
136+
137+ ## Production Configuration
106138
107139Before deploying to production:
108140
@@ -117,55 +149,10 @@ Before deploying to production:
117149 ``` typescript
118150 emailAndPassword : {
119151 enabled : true ,
120- requireEmailVerification : true , // Change to true
152+ requireEmailVerification : true ,
121153 }
122154 ```
123155
124- ### Deploy backend to Encore
125-
126- ``` bash
127- git add -A
128- git commit -m ' Initial commit'
129- git push encore
130- ```
131-
132- Your backend will be deployed to Encore's free development cloud. You can monitor it at [ app.encore.dev] ( https://app.encore.dev ) .
133-
134- ### Deploy frontend to Vercel
135-
136- ``` bash
137- cd frontend
138- vercel
139- ```
140-
141- Update ` frontend/src/lib/auth-client.ts ` with your production backend URL if needed.
142-
143- ## Project structure
144-
145- ```
146- .
147- ├── auth/ # Encore.ts backend service
148- │ ├── auth.ts # Authentication endpoints
149- │ ├── better-auth.ts # Better Auth configuration
150- │ ├── db.ts # Database connection
151- │ ├── schema.ts # Drizzle database schema
152- │ ├── migrations/ # Database migrations
153- │ └── encore.service.ts # Service definition
154- ├── frontend/ # Next.js frontend
155- │ ├── src/
156- │ │ ├── app/ # App Router pages
157- │ │ │ ├── page.tsx # Landing page
158- │ │ │ ├── sign-in/ # Sign in page
159- │ │ │ ├── sign-up/ # Sign up page
160- │ │ │ └── dashboard/ # Protected dashboard
161- │ │ ├── components/ui/ # shadcn/ui components
162- │ │ └── lib/
163- │ │ └── auth-client.ts # Better Auth client setup
164- │ └── package.json
165- ├── encore.app # Encore app configuration
166- └── package.json # Backend dependencies
167- ```
168-
169156## Adding OAuth providers
170157
171158To add OAuth providers (GitHub, Google, etc.), update ` auth/better-auth.ts ` :
@@ -176,14 +163,10 @@ socialProviders: {
176163 clientId : process .env .GITHUB_CLIENT_ID ! ,
177164 clientSecret : process .env .GITHUB_CLIENT_SECRET ! ,
178165 },
179- google : {
180- clientId : process .env .GOOGLE_CLIENT_ID ! ,
181- clientSecret : process .env .GOOGLE_CLIENT_SECRET ! ,
182- },
183166}
184167```
185168
186- Then add OAuth buttons to your sign-in page using Better Auth's social sign-in methods .
169+ Then add OAuth buttons to your sign-in page.
187170
188171## Extending the database
189172
@@ -196,6 +179,8 @@ To add new tables or fields:
196179Example - adding a posts table:
197180
198181``` typescript
182+ import { pgTable , text , timestamp } from " drizzle-orm/pg-core" ;
183+
199184export const posts = pgTable (" posts" , {
200185 id: text (" id" ).primaryKey (),
201186 title: text (" title" ).notNull (),
@@ -205,30 +190,9 @@ export const posts = pgTable("posts", {
205190});
206191```
207192
208- ### Using Drizzle Kit
209-
210- The starter includes drizzle-kit for database management:
211-
212- ``` bash
213- # Generate migrations after schema changes
214- npm run db:generate
215-
216- # Open Drizzle Studio (visual database browser)
217- DATABASE_URL=$( encore db conn-uri auth) npm run db:studio
218-
219- # Push schema changes directly without migrations (dev only)
220- DATABASE_URL=$( encore db conn-uri auth) npm run db:push
221- ```
222-
223- ** Note:** The Encore backend must be running for drizzle-kit commands that connect to the database.
224-
225193## Learn more
226194
227195- [ Encore Documentation] ( https://encore.dev/docs )
228- - [ Better Auth Documentation] ( https://better-auth.com )
196+ - [ BetterAuth Documentation] ( https://better-auth.com )
229197- [ Drizzle ORM Documentation] ( https://orm.drizzle.team )
230198- [ Next.js Documentation] ( https://nextjs.org/docs )
231-
232- ## License
233-
234- MIT
0 commit comments