https://github.com/jfraziz/react-pocketbase
starter project to develop pocketbase with react as frontend
https://github.com/jfraziz/react-pocketbase
docker docker-compose pocketbase react tailwindcss
Last synced: 3 months ago
JSON representation
starter project to develop pocketbase with react as frontend
- Host: GitHub
- URL: https://github.com/jfraziz/react-pocketbase
- Owner: JfrAziz
- License: mit
- Created: 2024-06-14T16:10:56.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-06-16T18:49:29.000Z (about 2 years ago)
- Last Synced: 2025-01-22T20:16:19.552Z (over 1 year ago)
- Topics: docker, docker-compose, pocketbase, react, tailwindcss
- Language: TypeScript
- Homepage:
- Size: 125 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Pocketbase
This project just a starter to develop pocketbase with react frontend (SPA vite):
- react (typescript)
- tailwind
- frontend routing [(tanstack router)](https://tanstack.com/router)
- [shadcn UI components](https://ui.shadcn.com/)
- [pocketbase typegen](https://github.com/david-plugge/typed-pocketbase)
- [docker support](#production)
- [docker development](#development-with-docker) (with local SMTP and S3 support)
This project already setup with custom authentication page rather than using default pocketbase, such as
- `/auth/login` -> login page
- `/auth/register` -> register page
- `/auth/password-reset` -> password reset request page
- `/auth/password-reset-conform?token=` -> password reset page
- `/auth/email-verification` -> request email verification page
- `/auth/email-verification-confirm?token=` -> verify email
to use custom routes, we need to update pocketbase default email url.
# Development
to run this project in development, you need to run
- frontend (react): `pnpm run dev`
- pocketbase: binary / docker
also check for some [env variablestext](./.env.example) first
if you use docker for pocketbase, ensure you have the following installed on your machine:
- Docker: [Install Docker](https://docs.docker.com/get-docker/)
- Docker Compose: [Install Docker Compose](https://docs.docker.com/compose/install/)
I have 2 docker-compose file for you to use based on what you need, default and full local. use the default [`docker-compose.yml`](./docker-compose.yml), if you only need to run pocketbase. use full local [`docker-compose-full.yml`](./docker-compose-full.yml), if you need to setup additional services such as **mailpit** (SMTP) and **MinIO** (S3 compatible). as you know, pocketbase support that. if you use this config, make sure you follow this step before running it.
## Step 1: Generate a Self-Signed Certificate
to secure the Mailpit SMTP server, generate a self-signed SSL certificate. this because pocketbase need smtp server to be secured (Always or StartTLS), so we need to create self-signed certificate for mailpit, also we need to update pocketbase container to add this certificate, check [start.sh](./dev/start.sh). run the following command in your terminal to generate certificate:
```sh
openssl req -x509 -newkey rsa:4096 -nodes -keyout ./dev/key.pem -out ./dev/cert.pem -sha256 -days 3650 -subj "/CN=." -addext "subjectAltName = DNS:mailpit"
```
## Step 2: SMTP and MinIO Config
after you run all the services defined in the [`docker-compose-full.yml`](./docker-compose-full.yml) file, `docker compose -f docker-compose-full.yml up -d`. check all services already running:
- pocketbase: [localhost:8080/_/](http://localhost:8080/_/)
- MinIO Console: [localhost:9001](http://localhost:9001) *you need to setup new bucket and access key*
- Mailpit: [localhost:8025](http://localhost:8025)
add this config for SMTP and Minio in pocketbase settings.
```
SMTP server host: mailpit
Port: 1025
Username: mailpit
Password: mailpit
S3 Endpoint: http://minio:9000
Bucket:
Access Key:
Secret:
Force path style addressing: True
```
then you can test if smtp and S3 connection works properly or not
# Production
use [Dockerfile](./Dockerfile) to build this project into single image, the frontend and pocketbase.