Last Updated on December 28, 2022 by Steve
Cloudflare Pages for Full Stack!
In my last article on Cloudflare Pages I hinted that not only can you use this service to deploy static sites but the promise of this service offering improving to offer dynamic functionality was suggested. Cloudflare has officially gone full stack!
How Does Cloudflare Pages Support Dynamic Content?
Pages works pretty much the same way. You write your code, use git to push your content and Cloudflare does the rest for you. The big difference is instead of just handling your frontend content Cloudflare will handle your backend too using Cloudflare Workers, which help deploy serverless functions.
Without having to maintain or configure infrastructure you can deploy new applications or augment existing ones using Cloudflare Workers. This technology provides a serverless execution environment.
Pages can use Workers to deploy serverless functions on your behalf by using your repository’s filesystem convention and exporting one or more function handlers.
Here is a Quick Example
To begin just pass a ./functions directory in your project’s root, and export a function handler inside a JavaScript or TypeScript file. Let’s say in your ./functions directory you have a file called hello.js which contains:
// GET requests to /filename would return "Hello, world!"
export const onRequestGet = () => {
return new Response("Hello, world!")
}
// POST requests to /filename with a JSON-encoded body would return "Hello, <name>!"
export const onRequestPost = async ({ request }) => {
const { name } = await request.json()
return new Response(`Hello, ${name}!`)
}
With the above code if you do a git commit Pages with start a new build to deploy your dynamic site. Cloudflare Pages will traverse your directory, pairing filenames to URLs relative to your repo structure, during the build.
From the source Cloudflare Pages generates Workers which include all your routing and functionality.
Functions support deeply nested routes, wildcard matching, middleware for things like authentication and error-handling, and more! In a near future article, I will do a walk thorough of an example full stack application on Cloudflare Pages, so stay tuned!
Cloudflare Pages Makes It Easy to Deploy Complex Sites
Seamless Builds
Cloudflare Pages can deploy your functions for you automatically the same way it handles and deploys your static site with a git commit and git push. Cloudflare Pages will identify and deploy your functions to Cloudflare’s network as long as your directory follows the proper structure.
Define Bindings
Bindings are a big part of what makes an application full stack. All the bindings that were previously used with regular Workers are available for use in Pages.
KV namespace: Cloudflare’s serverless and globally accessible key value storage solution. You can integrate with any of the KV namespaces that you set in your Workers dashboard for your project within Cloudflare Pages.
R2 Object Storage: This is Cloudflare’s S3 compatible object storage solution that incurs no egress fees and provides performance, reliability comparable to Amazon’s S3.
Durable Object namespace: Strongly consistent coordination primitive that makes connecting WebSockets and building entire applications extremely easy. You can set these from within your Worker’s dashboard.
Environment variables: Values that are stored as plain text that can be accessed by your functions.
Secret: An encrypted environment variable. Great way to store sensitive data like passwords and API tokens.
Preview Deployments in Backend
You can still enjoy collaboration and testing the same way you use to using Cloudflare Pages to develop static sites, now while deploying with serverless functions. To see your changes before deploying to production simply launch your project in preview environment. Cloudflare Pages lets you keep a version history with every git commit, even with your functions; this makes it easy for you to get feedback from other developers, designers, or marketers. You are even provided with a unique consistent URL for latest changes.
Ability to Develop and Preview Locally
If you are iterating quickly, it can be cumbersome building and deploying with every small change. With the latest release of Wrangler CLI you can develop full stack applications to Pages quickly. With the help of Miniflare, you can run your entire application locally with support for mocked secrets, environment variables, Durable Objects, and KV. Seamlessly connect Wrangler to your existing tools or point it at a directory of static assets.
# Install wrangler v2 beta npm install wrangler@beta # Serve a folder of static assets npx wrangler pages dev ./dist # Or automatically proxy your existing tools npx wrangler pages dev -- npx react-scripts start
Pages compiles and deploys workers on your behalf when deploying a Pages application with functions. There is no loss in functionality when deploying a worker within your Cloudflare Pages application. As a matter of fact, there are a few advantages to be gained!
Tight Integration with SvelteKit
SvelteKit is a framework for making Svelte apps. SvelteKit allows users to build complex API backends out the box. SvelteKit projects can attach and configure the @sveltejs/adapter-cloudflare package and can then be added to Cloudflare Pages for deployment. SvelteKit projects can be deployed with API endpoints and full server side rendering support. The entire project including the API endpoints can be previewed as well before production deployment.
Server-Side Rendering
You now have the ability to intercept any request that comes into your Cloudflare Pages project. You can define Worker’s logic that will receive incoming URLS, your Worker can render fresh HTML responses with dynamic data instead of just serving static HTML.
More Features for Full Stack Coming Soon
According to Cloudflare more robust features are scheduled to keep coming to help make the lives of full stack developers even easier and more productive.
- Integrated support for logging and more analytics for deployed functions
- First class support for next generation of frontend frameworks
- Ability to seamlessly deploy both static and dynamic code together
- Work is underway on making NextJS, NuxtJS, React Server Components, Shopify Hydrogen and more integrate seamlessly as you develop your full stack apps
- Working to speed up build times, so you can focus on pushing changes and iterating quickly
In Conclusion
As you can see Cloudflare Pages is not only a good option for static content but it’s also a good option for dynamic content as well. Combined with the rest of Cloudflare’s offerings it’s a one stop shop for all your web application deployment needs. This product is still relatively new but has a huge feature set and there is no doubt Cloudflare will make good on their promise to keep adding more and more features. Stay tuned for more articles from me on my personal experience with Cloudflare Pages as well as tutorials and sample launched applications!
I thank you for reading my article, please feel free to leave some feedback by commenting below.
