rodydavis How to Run Astro SSR and PocketBase on the Same Server
In this article I will show you how to host PocketBase and Astro in SSR mode on the same server. PocketBase does let you render templates on the server but requires Go Templates or pre-building with Static Site Generation (SSG).
This could also be modified to use your web server or framework of choice (Next.js, SvelteKit, Qwik, Angular).
Before getting started make sure you have the latest version of Node and Go installed locally.
Getting started
In a terminal run the following to create the base project:
mkdir pocketbase_astro_ssr
cd pocketbase_astro_ssr
mkdir server
mkdir www
This will create the server and www folders in our project needed for both Astro and PocketBase.
Setting up the server
Create a file at server/main.go and update it with the following:
package main
import (
"log"
"net/http/httputil"
"net/url"
"github.com/labstack/echo/v5"
"github.com/pocketbase/pocketbase"
"github.com/pocketbase/pocketbase/core"
)
func main() {
app := pocketbase.New()
app.OnBeforeServe().Add(func(e *core.ServeEvent) error {
proxy := httputil.NewSingleHostReverseProxy(&url.URL{
Scheme: "http",
Host: "localhost:4321",
})
e.Router.Any("/*", echo.WrapHandler(proxy))
e.Router.Any("/", echo.WrapHandler(proxy))
return nil
})
if err := app.Start(); err != nil {
log.Fatal(err)
}
}
Here we are extending PocketBase with Go and taking advantage of the Echo router integration and using a reverse proxy to handle all requests not defined by PocketBase already and delegating them to Astro.
Next run the following in a terminal to install the dependencies:
go mod init server
go mod tidy
Now we can start the server and move on to the client:
go run main.go serve
You should see the following and note that this will run in debug mode so all the SQL statements will start to show:
2023/11/09 10:28:52 Server started at http://127.0.0.1:8090
├─ REST API: http://127.0.0.1:8090/api/
└─ Admin UI: http://127.0.0.1:8090/_/
Collections
Open up the Admin UI url and after creating a new admin user, create a new collection items and add the following metadata:
Column Name
Column Type
Column Settings
title
Plain Text
Then update the API Rules to allow read access for list and view.
This is just for example purposes and on a production app you will rely on auth for ACLs
Create 3 new records with placeholder data.
Creating the client
Now we can create the client that will be used to connect to PocketBase and serve all of the web traffic.
Navigate to the www directory and run the following in a terminal:
npm create astro@latest
Follow the prompts and enter the following:
Question
Answer
Where should we create your new project?
.
How would you like to start your new project?
Empty
Install dependencies?
Yes
Do you plan to write TypeScript?
Yes
How strict should TypeScript be?
Strict
Initialize a new git repository?
No
You can of course customize this as you need, but next we can install the dependencies needed by running the following in a terminal:
npm i -D @astrojs/node
npm i pocketbase
Next update www/astro.config.mjs and update it with the following:
import { defineConfig } from "astro/config";
import nodejs from "@astrojs/node";
// https://astro.build/config
export default defineConfig({
adapter: nodejs({
mode: "standalone",
}),
output: "server",
});
This will use Server Side Rendering (SSR) instead of Static Site Generation (SSG) when we run the web server.
UI
Layouts
We can start by creating a shared layout for all the routes. Create a file at www/src/layouts/Root.astro and update it with the following:
---
interface Props {
title: string;
}
const { title } = Astro.props;
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body>
<slot />
</body>
</html>
Routes
Now we can update the index / route by updating the following file www/src/pages/index.astro:
---
import Root from "../layouts/Root.astro";
import PocketBase from "pocketbase";
const pb = new PocketBase("http://127.0.0.1:8090");
const items = pb.collection("items");
const records = await items.getFullList();
---
<Root title="Items">
<h1>Items</h1>
<ul>
{
records.map((record) => (
<li>
<a href={`/items/${record.id}`}>{record.title}</a>
</li>
))
}
</ul>
</Root>
This will call the items collection on the server and render it with 0 JS on the client.
Next create a file www/src/pages/[...slug].astro and update it with the following:
---
import Root from "../layouts/Root.astro";
import PocketBase from "pocketbase";
const slug = Astro.params.slug!;
const id = slug.split("/").pop()!;
const pb = new PocketBase("http://127.0.0.1:8090");
const items = pb.collection("items");
const records = await items.getList(1, 1, {
filter: `id = '${id}'`,
});
if (records.items.length === 0) {
return new Response("Not found", { status: 404 });
}
const {title} = records.items[0];
---
<Root {title}>
<a href="/">Back</a>
<h1>{title}</h1>
</Root>
This is almost like before but now we can return a proper 404 response if not found for an item.
Running
Now we can run the web server with the following command:
npm run dev
You should see the following:
> dev
> astro dev
🚀 astro v3.4.4 started in 67ms
┃ Local http://localhost:4321/
┃ Network use --host to expose
Then if we open up the PocketBase url http://127.0.0.1:8090 and you should see the following for the index route and detail routes:
Conclusion
Now you can build a new binary for both the server and client and deploy them both on the same server instance. 🎉
You can find the final code here.