We announced the open beta of full stack Cloudflare Pages in November and have since seen widespread uptake from developers looking to add dynamic functionality to their applications. Today, we're excited to announce Pages' support for Remix applications, powered by our full stack platform.
The new kid on the block: Remix
One of the main inspirations for Remix was the way Cloudflare Workers uses native web APIs for handling HTTP requests and responses. It's a brilliant decision because developers are able to reuse knowledge on the server that they gained building apps in the browser! Remix runs natively on Cloudflare Workers, and the results we've seen so far are fantastic. We are incredibly excited about the potential that Cloudflare Workers and Pages unlocks for building apps that run at the edge!
— Michael Jackson, CEO at Remix
This native compatibility means that as you learn how to write applications in Remix, you're also learning how to write Cloudflare Workers (and vice versa). But it also means better performance! Rather than having a Node.js process running on a server — which could be far away from your users, could be overwhelmed in the case of high traffic, and has to map between Node.js' runtime and the modern Fetch API — you can deploy to Cloudflare's network and requests will be routed to any one of our 250+ locations. This means better performance for your users, with 95% of the entire Internet-connected world lying within 50ms of a Cloudflare presence, and 80% of the Internet-connected world within 20ms.
Integrating with Cloudflare
More often than not, full stack applications need some place to store data. Cloudflare offers three all-encompassing options here:
KV, our high performance and globally replicated key-value datastore.
Durable Objects, our strongly consistent coordination primitive which can be restricted to a given jurisdiction.
R2 (coming soon!), our fast and reliable object storage.
Remix already tightly integrates with KV for session storage, and a Durable Objects integration is in progress. Additionally, Cloudflare's other features, such as geolocating incoming requests, HTMLRewriter and our Cache API, are all available from within your Remix application.
Deploying to Cloudflare Pages
Cloudflare Pages was already capable of serving static assets from the Cloudflare edge, but now with November's release of serverless functions powered by Cloudflare Workers, it has evolved into an entire platform perfectly suited for hosting full stack applications.
To get started with Remix and Cloudflare Pages today, run the following in your terminal, and select "Cloudflare Pages" when asked "Where do you want to deploy?":
Then create a repository on GitHub or GitLab,
git commit, and
git push the newly created folder. Finally, navigate to Cloudflare Pages, select your repository, and select "Remix" from the dropdown of framework presets. Your new application will be available on your pages.dev subdomain, or you can connect it to any of your custom domains.
Your folder will have a
functions/[[path]].ts file. This is the functions integration where we serve your Remix application on all paths of your website. The
app folder is where the bulk of your Remix application's logic is. With Pages' support for rollbacks and preview deployments, you can safely test any changes to your application, and, with the wrangler 2.0 beta, testing locally is just a simple case of
npm run dev.
The future of frameworks on Cloudflare Pages
Remix is the second framework to integrate natively with full stack Cloudflare Pages, following SvelteKit, which was available at launch. But this is just the beginning! We have a lot more in store for our integration with Remix and other frameworks. Stay tuned for improvements on Pages' build times and other areas of the developer experience, as well as new features to the platform.
Join our community!
If you are new to the Cloudflare Pages and Workers world, join our Discord server and show us what you're building. Whether it's a new full stack application on Remix or even a simple static site, we'd love to hear from you.