blazejsewera / pocketbase-mantine-template

Full-stack application template using Pocketbase as backend and Vite + React + Mantine combo as frontend

Pocketbase, Vite, React, and Mantine template

Full-stack application template using Pocketbase as backend, and Vite + React + Mantine combo as frontend.

Cheat sheet

• make — download all dependencies (see Workspace setup below);
• make -j2 d — full-stack development servers;
• make t — ui component unit tests;
• make tu — ui component update Jest snapshots;
• make -j2 b — build ui/dist and Pocketbase simultaneously;
• make s — run Pocketbase serving ui/dist under /;
• make v — run only frontend Vite development server;
• make cp — copies example config to a working copy and links it to ui;
• make cc — cleans all working config files;
• make c — clean all dist files (ui/dist and ./pocketbase).

Prerequisites

• Make:
  • Linux — should be already installed, if not, install package: Arch Linux, Ubuntu, Any distro (pkgs.com),
  • macOS — should be already installed, an alternative would be: GNU Make for macOS,
  • Windows;
• Go >=1.18 (>=1.19 on Windows);
• Node.js 16.x or later,
  • Using a node version manager (nvm) is advised:
    • POSIX (Linux/macOS),
    • Windows.

Quick start

Workspace setup

After installing prerequisites, you have to set up the workspace. The following commands will download a proper Node.js, enable it in the workspace, install Yarn, and download all the dependencies, both for ui and Go.

nvm install  # if using nvm
nvm use      # if using nvm
npm -g i yarn
make

Other commands

The following command will open a dev Vite server with hot reload, and a Pocketbase server alongside it.

make -j2 dev

or make -j2 d for short.

The following will only build and run the Pocketbase executable.

make pb

The following will build the static dist Vite package, and run a Pocketbase server that serves it under the root path (/).

make start

or make s for short.

It is an equivalent of:

make build pb

or make b pb for short.

The following command will unit test the ui components using Jest.

make test

or make t for short.

To update the snapshots when running component unit tests, run:

make test-update

or make tu for short.

To copy an example config file (app.config.example.json to app.config.json), which contains the backend (Pocketbase) host, run:

make copy-example-config

or make cp for short.

To clean all working config files, run:

make clean-config

or make cc for short.

To clean all dist files, i.e.: ui/dist and ./pocketbase, run:

make clean

or make c for short.

Credentials

Field	Value
Email	[e-mail]
Pass	panda-blog-scorer

Default URLs

• Vite DEV server: http://localhost:3000/
• Static UI served by Pocketbase: http://localhost:8090/
• REST API: http://localhost:8090/api/
• Admin UI: http://localhost:8090/_/

The Pocketbase URL can be configured in app.config.json. Both backend and frontend will respect this configuration. See also make copy-example-config recipe.

Further reading

• The Makefile;
• Pocketbase documentation;
• Pocketbase JS/TS SDK;
• Vite configuration documentation;
• Mantine documentation, especially:
  • Mantine Core components,
  • MantineProvider — tl;dr: It is not required if using the default theme,
  • Mantine UI component library;
• React Router documentation, especially:
  • Link component,
  • Browser router — tl;dr: Add new paths to main.tsx;
• Zustand (store) documentation;
• Jest documentation, especially:
  • Getting started,
  • Snapshot testing;