jonobase

a front-end for a pockethosted pocketbase back-end (headless CMS)

Requirements

• You need a FTP client like Filezilla and accounts with GitHub and Vercel

Setup

So, please follow this easy 20+ step process to have a full dynamic and customizable website:

Back-end (pocketbase)

Pockethost.io

• Start an account at pockethost.io
• Start a new app
• Choose a name for the app and create
• Go inside the ADMIN panel
• Create a database admin with email and password

Uploading the database schema

• Click the Settings icon (third from the top on the left sidebar)
• Under the heading Sync, click on Import collections
• Click on Load from JSON file
• Find the jonobase.json in the root of this repo
• Once loaded, click the orange button Review
• In the Side-by-side diff screen, click Confirm and import

We should now have the structure of our database ready, now for the sample data:

• Click the same Settings icon, as above
• Under the heading System, click on Backups
• Beside the text Backup and restore our PocketBase data, click on the Upload backup icon
• Find the jonobase-sample-data.zip in the root of this repo
• Once loaded, mouse over on the row where it says jonobase-sample-data.zip
• On the right side, there will be a Restore button
• A dialog box will popup, type (or copy-paste) the name jonobase-sample-data.zip into the Backup name field
• Click on Restore backup
• You will see an almost-blank screen that says "This instance is in Maintenance Mode."
  • Don't worry, we will take care of this with FTP

Go to the FTP

• With an FTP client, use your email address youremail@ftp.sfo-1.pockethost.io
• Delete all the files in the pb_migrations folder
• Go back to https://app.pockethost.io/

Back in the PockhetHost admin panel

• Find your database instance and click on DETAILS
• Scroll down to the Dnager Zone (yeah)
• Toggle the Maintenance Mode off
• The database is now ready!

Front-end (next.js + react + tailwind)

Now, to setup the front-end! Did you think it was over yet? 😈

These steps are super-easy compared with me figuring all this out, so bear with me!

(We're almost there!)

• On your local repo, create an .env.local folder:

PBDOMAIN=https://yoursite.pockethost.io
PBDOMAIN_SHORT=yoursite.pockethost.io
PBSLUG=yoursite

• Then on Terminal, run the following command:

$ npm run dev

• Wait a few seconds and then open up https://localhost:3000 on a browser
• You should then see the sample home page!

Deployment

• Open up the Vercel account
• Use the appropriate GitHub account and repo
• Set your Environment variables as you did in the previous section:
• Of course, replace yoursite with your own subdomain!

Now, we can go back to the Pocketbase and update our site from there! Simple!