When I was setting up a project using Cloudflare workers, bun, neon postgresql, hyperdrive binding, turbo monorepo. I realized one thing how much important it is to understand your errors before solving them.
It was such a tedious task, but I'll help you not make those mistakes that I did.
So, let's hop on guys. ✌️
These tools really make your production so smooth that you can't ignore them.
I'm gonna keep it short and deep.
Table of Contents
- What is this tech stack?
- Setting up Bun and Turbo
- Configuring Neon and Hyperdrive
- Common Errors and Solutions
- Conclusion
What are these tech-stacks?
Cloudflare
It is a provider of global-network(to connect apps/sites from anywhere in the world).
Think of it like a provider with great network that helps anyone with a simple internet connection connect safely with your library(an app/site) that lives on a server. It acts as a guard to keep your library safe and reliable from bullies.
Cloudflare workers
These are serverless platforms which provides for the apps and it lives inside the network. This is very near to your home library so that you don't have to travel far to just take or build things in your library.
Your app follows the user wherever they go!
Bun
The fastest package manager, it's an all-in-one tool for building and running js/ts as a file for production level without the need of any external tools. It's super fast and instant.
Neon
A fully-serverless managed postgresql built to make database storage fast and cost efficient. It turns off compute when nothing is happening in your site/app and when requests arrives it just turn itself on instantly. Since it's postgresql it's organized so that we can find anything in split seconds.
Turbo Monorepo
Think of it like a manager that manages multiple things at once and at same time without delaying and connecting them if necessary.
Setting up Bun and Turbo
It's a very simple step to install them:
Install bun
Windows:
irm bun.sh/install.ps1 | iex
Linux & WSL2:
curl -fsSL https://bun.sh/install | bash
Install turbo monorepo using bun -
- Works on all OS(windows, linux, wsl2) - bun add -g turbo
Start a new project -
bunx create-turbo@latest
Pro-Tip: Create a GitHub repo immediately and connect it to your Cloudflare project. This ensures that every commit is automatically built and deployed.
Configuring Neon and Hyperdrive
With Neon you need to get a database connection string in neon.tech, have that string saved in .env in your nextjs project(apps/web).
In your nextjs project write a wrangler.jsonc/wrangler.toml, here's the minimal setup(adjust according to your needs) for wrangler.jsonc:
{
"$schema": "./node_modules/wrangler/config-schema.json",
"main": ".open-next/worker.js",
"name": "[YOUR_APP_NAME]",
// Set this to today's date
"compatibility_date": "[RECENT_DATE]",
"compatibility_flags": [
"nodejs_compat"
],
"hyperdrive": [
{
"binding": "HYPERDRIVE",
"id": "[YOUR_ID]",
}
],
}
You can get your Hyperdrive's ID from your cloudflare worker's dashboard in the hyperdrive section after clicking connect button.
Environment Variables
Save these connection strings in your Cloudflare Dashboard (Settings > Variables):
-
Key:
CLOUDFLARE_HYPERDRIVE_LOCAL_CONNECTION_STRING_[YOUR_BINDING_NAME] -
Value:
[YOUR_NEON_CONNECTION_STRING]
Run and deploy your app on cloudflare workers:
1. Set the build command:
bun install && bunx turbo run build --filter=web...
2. Set the deploy command:
cd apps/web && bun run deploy
"cd apps/web to point cloudflare to the exact location."
**The command from your terminal apps/web to deploy the Nextjs app on Cloudflare:
bunx wrangler deploy
Common Errors and Solutions
The most annoying error I faced and I'll break it down so you don't have to face it - connecting neon postgresql with hyperdrive.
1. The "Missing Connection" Error
Problem: Connecting Neon PostgreSQL with Hyperdrive often fails because the connection strings aren't available during the build process.
Solution:
You must add your variables in the Cloudflare Dashboard (Settings > Variables).
Without this, Cloudflare won't be able to "see" your database during deployment.
Pro-Tip: For local testing, create a
.dev.varsfile.
# Example .dev.vars content
CLOUDFLARE_HYPERDRIVE_LOCAL_CONNECTION_STRING_HYPERDRIVE="[NEON_CONNECTION_STRING]"
DATABASE_URL="[YOUR_URL_HERE]"
(Remember to add .dev.vars to your .gitignore!)
Conclusion
Mess around with these commands and you will have a project deployed and data will flow fast and securely for your users.
This setup has been a game-changer for my production speed, but I’m curious is anyone else using Bun with Cloudflare Workers? What has your experience been with cold starts?
If you liked this blog give a 💖 and follow for more.
Top comments (0)