Skip to content

Commit 93a4087

Browse files
copiltembeltudorsamwillis
authored
Tudor/react example (#551)
* react example --------- Co-authored-by: tudor <tudor@swisstch.com> Co-authored-by: Sam Willis <sam.willis@gmail.com>
1 parent 442d335 commit 93a4087

23 files changed

+853
-1
lines changed

‎examples/react/.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎examples/react/README.md

+134
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
# Example: PGlite + Vite + React + TypeScript
2+
3+
This is an example of a simple project using [PGlite](https://pglite.dev) and it's [React integration](https://pglite.dev/docs/framework-hooks/react). It uses [Vite](https://vite.dev), [React](https://react.dev/) and [TypeScript](https://www.typescriptlang.org/).
4+
5+
This example demonstrates the usage of some of PGlite's React API: [PGliteProvider](https://pglite.dev/docs/framework-hooks/react#pgliteprovider), [usePGlite](https://pglite.dev/docs/framework-hooks/react#usepglite), [useLiveQuery](https://pglite.dev/docs/framework-hooks/react#uselivequery).
6+
7+
On page load, a database is created with a single table. On pressing the button, a new row is inserted into the database. The `useLiveQuery` will watch for any changes and display the most recently inserted 5 rows.
8+
9+
# Getting started with this example
10+
11+
## Prerequisites
12+
You need [node](https://nodejs.org/en/download) (at least version 18), [pnpm](https://pnpm.io/installation) and [git](https://git-scm.com/downloads) installed.
13+
14+
Check node version
15+
```
16+
$ node --version
17+
```
18+
Sample output: `v20.9.0`
19+
20+
Check pnpm version
21+
```
22+
$ pnpm --version
23+
```
24+
Sample output: `9.15.3`
25+
26+
Check git version
27+
```
28+
$ git --version
29+
```
30+
Sample output: `git version 2.34.1`
31+
32+
## Install and run the example locally
33+
34+
This example depends on `PGlite` packages released on npmjs.com, so you don't need to build the entire `PGlite` project in order to run the example.
35+
36+
1. Get the code from GitHub. The example is in `PGlite`'s main repository
37+
```
38+
$ git clone https://github.com/electric-sql/pglite
39+
```
40+
2. Navigate to this example's directory
41+
```
42+
$ cd ./pglite/examples/react
43+
```
44+
3. Install dependencies
45+
46+
```
47+
$ pnpm i --ignore-workspace
48+
```
49+
50+
This example is part of the `pglite` pnpm workspace, but for our needs, we do not need to install all dependencies in the workspace. Thus passing the `--ignore-workspace` flag.
51+
52+
4. Start a development server locally
53+
```
54+
$ pnpm dev
55+
```
56+
Sample output:
57+
```
58+
VITE v6.1.0 ready in 126 ms
59+
60+
➜ Local: http://localhost:5173/
61+
➜ Network: use --host to expose
62+
➜ press h + enter to show help
63+
```
64+
65+
5. Open your browser and point to the above indicated address (http://localhost:5173/ but your address might be different)
66+
67+
# Getting started with PGlite + Vite + React + Typescript
68+
69+
If you'd like to start from scratch, here is how you can reproduce this example, so you understand better how it was made:
70+
71+
1. Install [node](https://nodejs.org/en/download), [pnpm](https://pnpm.io/installation) and [git](https://git-scm.com/downloads)
72+
2. Run `pnpm create vite`. Follow the steps, input the name of your project (eg pglite-vite-react-project), selecte `React` for framework, `TypeScript` as variant.
73+
74+
Sample output:
75+
76+
```
77+
$ pnpm create vite
78+
.../19522a4053e-20b11 | +1 +
79+
.../19522a4053e-20b11 | Progress: resolved 1, reused 1, downloaded 0, added 1, done
80+
✔ Project name: … pglite-vite-react-project
81+
✔ Select a framework: › React
82+
✔ Select a variant: › TypeScript
83+
84+
Scaffolding project in /tmp/pglite-vite-react-project...
85+
86+
Done. Now run:
87+
88+
cd pglite-vite-react-project
89+
pnpm install
90+
pnpm run dev
91+
```
92+
93+
3. Run the steps above:
94+
95+
```
96+
$ cd pglite-vite-react-project
97+
$ pnpm install
98+
$ pnpm run dev
99+
100+
```
101+
102+
4. The last command will start an http server on your local machine. Point your browser to the indicated address:
103+
104+
```
105+
$ pnpm run dev
106+
VITE v6.1.0 ready in 126 ms
107+
108+
➜ Local: http://localhost:5173/
109+
➜ Network: use --host to expose
110+
➜ press h + enter to show help
111+
```
112+
113+
4. Install [@electric-sql/pglite](https://www.npmjs.com/package/@electric-sql/pglite) and [@electric-sql/pglite-react](https://www.npmjs.com/package/@electric-sql/pglite-react) npm packages:
114+
115+
```
116+
$ pnpm install @electric-sql/pglite @electric-sql/pglite-react
117+
118+
Packages: +2
119+
++
120+
Downloading @electric-sql/pglite@0.2.17: 9.99 MB/9.99 MB, done
121+
Progress: resolved 224, reused 180, downloaded 2, added 2, done
122+
123+
dependencies:
124+
+ @electric-sql/pglite 0.2.17
125+
+ @electric-sql/pglite-react 0.2.17
126+
127+
```
128+
129+
5. You are ready start using PGlite's React API.
130+
Make sure to exclude pglite from dependency optimization using the [optimizeDeps option inside vite.config.js](https://pglite.dev/docs/bundler-support#vite).
131+
132+
6. Have a look at this project's `App.tsx`, `MyPGliteComponent.tsx` and `MyPGliteItemsComponent.tsx` to see how you can create a database and use PGlite React's integration and start modifying your project. Switch to the browser to see your changes.
133+
134+

‎examples/react/eslint.config.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import tseslint from 'typescript-eslint'
6+
7+
export default tseslint.config(
8+
{ ignores: ['dist'] },
9+
{
10+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11+
files: ['**/*.{ts,tsx}'],
12+
languageOptions: {
13+
ecmaVersion: 2020,
14+
globals: globals.browser,
15+
},
16+
plugins: {
17+
'react-hooks': reactHooks,
18+
'react-refresh': reactRefresh,
19+
},
20+
rules: {
21+
...reactHooks.configs.recommended.rules,
22+
'react-refresh/only-export-components': [
23+
'warn',
24+
{ allowConstantExport: true },
25+
],
26+
},
27+
},
28+
)

‎examples/react/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/pglite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>PGlite with Vite + React + TS</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎examples/react/package.json

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "pglite-react",
3+
"author": "Electric DB Limited",
4+
"homepage": "https://pglite.dev",
5+
"license": "Apache-2.0",
6+
"private": false,
7+
"version": "0.0.1",
8+
"type": "module",
9+
"scripts": {
10+
"dev": "vite",
11+
"build": "tsc -b && vite build",
12+
"lint": "eslint .",
13+
"preview": "vite preview"
14+
},
15+
"dependencies": {
16+
"@electric-sql/pglite": "^0.2.17",
17+
"@electric-sql/pglite-react": "^0.2.17",
18+
"react": "^19.0.0",
19+
"react-dom": "^19.0.0"
20+
},
21+
"devDependencies": {
22+
"@eslint/js": "^9.19.0",
23+
"@types/react": "^19.0.2",
24+
"@types/react-dom": "^19.0.2",
25+
"@vitejs/plugin-react": "^4.3.2",
26+
"eslint": "^8.57.1",
27+
"eslint-plugin-react-hooks": "^4.6.2",
28+
"eslint-plugin-react-refresh": "^0.4.12",
29+
"globals": "^15.11.0",
30+
"typescript": "^5.6.3",
31+
"typescript-eslint": "^8.22.0",
32+
"vite": "^5.4.8"
33+
}
34+
}

‎examples/react/public/pglite-logo-light.svg

+5
Loading

‎examples/react/public/pglite.svg

+4
Loading

0 commit comments

Comments
 (0)