Modern full-stack projects with TanStack and Cloudflare

Articles in the series:

• Modern full-stack projects with TanStack and Cloudflare (this article)
• TanStack Start on Cloudflare: Part 1 - Linting and formatting

Intro

If you ever wanted to start a hobby project with a hope/dream of building something that might take off some day, but were driven away by the complexity of setting up all the bells and whistles expected of a modern full-stack application, this post is for you. I am going to explore one particular tech stack that has been in the news lately and see how far I can go with setting it up for building a full-fledged application with features like:

• database (including migrations and type-safe queries)
• file storage
• backend logic
• caching
• background and scheduled tasks
• authentication
• observability

The main criteria for the proposed solution is that it should be extendable, easy to maintain, and cost-efficient. If you worked with software development before, you know that there are too many ways to build it, and the more money you are willing to spend, the larger the pool of options is. What I want to achieve is to come up with a setup that allows a small team (a team of one in the extreme case) to build on and maintain long-term, assuming they do not have a large budget to spend and want to focus on building a product based on their ideas, instead of managing infrastructure.

Application framework

The basis of the application layer will be TanStack Start, yet another TypeScript meta-framework that promises full type safety between the UI layer and the backend logic, and a lot of modern features expected nowadays, such as server-side rendering (SSR), routing, server functions, etc. The framework is built by the same people who stand behind TanStack Query, the de-facto standard way of managing the lifecycle of the application data that is synced from the backend.

TanStack Start is available in several variations, but I will use the React flavor. React is a safe choice for a team that wants to be future-proof and leverage a huge ecosystem of packages to implement their ideas faster. It has quickly become a viable alternative to Next.js, which has dominated this space (especially among React-focused meta-frameworks) for a while. Long-time users of Next.js have become more and more frustrated by the frequent breaking changes and unclear direction for the framework’s development. TanStack Start feels like a breath of fresh air so far, which is why I want to explore it here.

Cloud infrastructure

As you can tell from the title, I have chosen Cloudflare as the infrastructure provider for this project. I could have chosen one of the usual suspects like AWS, GCP, or Azure. However, they have become so complex that a small team without extensive prior experience would spend a lot of time navigating countless (often outdated) blog posts, documentation pages, and YouTube videos to get from zero to something. I am not even talking about infrastructure-as-code (IaC) setups (which requires even more time and deeper understanding of those platforms), but getting all the pieces in a click-ops way (i.e. clicking around in a web console).

So, why Cloudflare? If you have been around for a while, you might remember Cloudflare as a company that provides DNS and DDoS protection services. However, in case you didn’t know, Cloudflare has decided to leverage the huge network of edge compute nodes it operates to offer a quite unique developer platform to build upon. Some of the aspects that make it attractive compared to the giants mentioned above are:

1. Simplicity. Cloudflare does not (yet) have hundreds of services, unlike other providers, so it is easy to navigate what is available. All of their existing services fall into a category that would be called serverless on other platforms. This may not be a good fit for legacy enterprise systems, but we are focusing on small teams who want to move fast. I think Cloudflare enables that.

2. No traffic costs (both ingress and egress). This can be huge if you need to operate a system that is very data-intensive. All of the traditional cloud providers are charging fees for this, typically for each 1GB of egress traffic. This becomes even more important if you want to stay cost-efficient. Denial-of-wallet (DoW) attacks are common these days and usually require buying a very costly service from other cloud providers to maintain a peace of mind (e.g. AWS Shiled Advanced that costs $3,000 per month). Cloudflare specializes on protection from such attacks and the free protection they provide is usually enough for most customers.

3. Pricing. The previous item already mentioned one aspect of this. In general, Cloudflare’s Free plan is enough to go pretty far with setting up infrastructure for a modern full-stack application. When that is not enough, their Workers Paid plan should be more than enough for a small team to build anything they want before they start to see the limits of it.

Finally, I want to mention that Cloudflare invests a lot into open-source projects, including the development of modern web frameworks, like TanStack Start or Astro (it is the framework powering this blog, by the way). What this means is that a single command that compiles a project into a production build, will produce artifacts that map automatically on the infrastructure resources required to host them. For example, static assets will be automatically stored on a CDN, while server functions will be hosted as Cloudflare Workers. All of this happens automatically and requires a small amount of configuration to set up. This convenience and simplicity is yet another argument for choosing Cloudflare for a lean and fast setup required by a small team who want to ship fast and focus on the most important bits – building their product.

Project setup

Without further ado, let’s get started. If you start a fresh project and intend to use the same setup as described above, then the easiest way to start is to follow the framework-specific guide in Cloudflare documentation. Everything I describe here will be available in the GitHub repository associated with this blog series. I use pnpm as a package manager, which means that the bootstrap command looks as follows:

pnpm create cloudflare@latest my-tanstack-start-app --framework=tanstack-start

This command will generate a standard boilerplate for a TanStack Start project, Cloudflare Workers configuration file (called wrangler.jsonc), as well as scripts in package.json file for the most common operations (starting a dev server, building, deploying, etc.). In the upcoming posts we will extend the boilerplate setup turning the project into a fully-featured template for a fullstack web application.

Before we wrap up, if you follow along, feel free to verify that the setup works. Start a dev server by running

pnpm run dev

and verify that the application running on the localhost url (usually localhost:3000) works. Finally, if you have a Cloudflare account and want to verify that the deployment script works, run the following command

pnpm run deploy

and wait until you see the deployment URL in the terminal.