kaddidlehopper 0.2.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
# Netlify DB Setup
|
|
2
|
+
|
|
3
|
+
After scaffolding your project with the DB add-on, follow these steps to get Netlify DB running.
|
|
4
|
+
|
|
5
|
+
## Prerequisites
|
|
6
|
+
|
|
7
|
+
- A [Netlify](https://www.netlify.com/) account
|
|
8
|
+
- The [Netlify CLI](https://docs.netlify.com/cli/get-started/) installed (`npm install -g netlify-cli`)
|
|
9
|
+
|
|
10
|
+
## 1. Link Your Project to Netlify
|
|
11
|
+
|
|
12
|
+
If you haven't already, link your local project to a Netlify site:
|
|
13
|
+
|
|
14
|
+
```sh
|
|
15
|
+
netlify login
|
|
16
|
+
netlify init
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Follow the prompts to create a new site or link to an existing one.
|
|
20
|
+
|
|
21
|
+
## 2. Initialize the Database
|
|
22
|
+
|
|
23
|
+
Run the Netlify DB initialization command to provision a Postgres database for your site:
|
|
24
|
+
|
|
25
|
+
```sh
|
|
26
|
+
netlify db init
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
This creates a Neon Postgres database attached to your Netlify site and sets the `DATABASE_URL` environment variable automatically.
|
|
30
|
+
|
|
31
|
+
## 3. Push the Schema to the Database
|
|
32
|
+
|
|
33
|
+
Use Drizzle Kit to push your schema to the database:
|
|
34
|
+
|
|
35
|
+
```sh
|
|
36
|
+
npx drizzle-kit push
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
This creates the `guestbook` table defined in `src/db/schema.ts`.
|
|
40
|
+
|
|
41
|
+
## 4. Run the Dev Server
|
|
42
|
+
|
|
43
|
+
Start local development via the Netlify CLI:
|
|
44
|
+
|
|
45
|
+
```sh
|
|
46
|
+
netlify dev
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
Then visit [http://localhost:8888/db-example](http://localhost:8888/db-example) to see the guestbook demo.
|
|
50
|
+
|
|
51
|
+
## 5. Deploy
|
|
52
|
+
|
|
53
|
+
When you're ready, deploy to Netlify:
|
|
54
|
+
|
|
55
|
+
```sh
|
|
56
|
+
netlify deploy --build --prod
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
Or push to your git remote and Netlify will build and deploy automatically if continuous deployment is configured.
|
|
60
|
+
|
|
61
|
+
## Troubleshooting
|
|
62
|
+
|
|
63
|
+
- **`DATABASE_URL` not set** — Make sure you've run `netlify db:init` and `netlify env:pull`.
|
|
64
|
+
- **Table not found errors** — Run `npx drizzle-kit push` to ensure the schema is applied.
|
|
65
|
+
- **Connection errors locally** — Confirm `.env.local` has the correct `DATABASE_URL` and that your IP is not blocked by the Neon project settings.
|
|
@@ -18,15 +18,16 @@ function DBExample() {
|
|
|
18
18
|
|
|
19
19
|
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
20
20
|
e.preventDefault();
|
|
21
|
+
const form = e.currentTarget;
|
|
21
22
|
setIsSubmitting(true);
|
|
22
23
|
|
|
23
|
-
const formData = new FormData(
|
|
24
|
+
const formData = new FormData(form);
|
|
24
25
|
const name = formData.get("name") as string;
|
|
25
26
|
const message = formData.get("message") as string;
|
|
26
27
|
|
|
27
28
|
try {
|
|
28
29
|
await addEntry({ data: { name, message } });
|
|
29
|
-
|
|
30
|
+
form.reset();
|
|
30
31
|
await router.invalidate();
|
|
31
32
|
} catch (error) {
|
|
32
33
|
console.error("Failed to add entry:", error);
|
|
@@ -2,7 +2,7 @@ import { createServerFn } from "@tanstack/react-start";
|
|
|
2
2
|
import { db, schema } from "@/db";
|
|
3
3
|
import { desc } from "drizzle-orm";
|
|
4
4
|
|
|
5
|
-
export const getEntries = createServerFn({ method: "
|
|
5
|
+
export const getEntries = createServerFn({ method: "POST" }).handler(
|
|
6
6
|
async () => {
|
|
7
7
|
const entries = await db
|
|
8
8
|
.select()
|
package/add-ons/db/package.json
CHANGED
package/package.json
CHANGED