Cloudflare Pages for Full Stack Applications 2022

Last Updated on January 23, 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.

BestWP Banner Ad

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.

Graphical user interface, Durable Object Bindings

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. Need help running your WordPress based website or help getting one off the ground. Maybe we can help.

A WordPress maintenance plan could be just what you need. If you do not want to commit to monthly service plan we also offer one time payment troubleshooting options. Let us do the hard work for you. Satisfaction guarantee or your money back.

Plans and Pricing

  • BASIC
    $49
    PER MONTH
    For Smaller Websites
    - Full Management of WordPress
    - Automated Off-Site Weekly Backups
    - WordPress Core, Plugin, & Theme Updates
    - 24/7 Security Monitoring & Cleanup
    - Professional, friendly Support via email
  • ADVANCED
    $99
    PER MONTH
    For High Traffic Sites
    - Full Management of WordPress
    - Automated Off-Site Weekly Backups
    - WordPress Core, Plugin, & Theme Updates
    - 24/7 Security Monitoring & Cleanup
    - Professional, friendly Support via email
    - Support in install and configuration of all WordPress plugins
    - 404 Monitoring
    - One Hour of Development Time
  • PREMIUM
    $199
    PER MONTH
    Ideal For Ecommerce
    - Full Management of WordPress
    - Automated Off-Site Weekly Backups
    - WordPress Core, Plugin, & Theme Updates
    - 24/7 Security Monitoring & Cleanup
    - Professional, friendly Support via email
    - Support in install and configuration of all WordPress plugins
    - 404 Monitoring
    - Three Hours of Development Time
    - Support in installation and customization of any WordPress theme
    - 24/7 Uptime Monitoring
    - Performance Optimization
    - Search Engine Optimization
    - Expert Consultation

Author

  • I have been in the information technology field since I left the United States Army over twenty years ago. Skills and experience include a Bachelor's degree in Computer Information Systems with a Specialization in Databases and a Master's in Computer Information Systems Management.

    I fell in love with WordPress over 10 years ago and spend most of my time designing, building and administering WordPress based sites. I am fluent in multiple programming languages including Python, PHP, SQL, Java and C#.

    Have a problem with your site? Do you need a reliable host and a reliable systems administrator to help with your site? I can have your site up, running and simply hand you the keys. No job is too big or too small.  Satisfaction guaranteed or your money back. Visit online store for latest pricing and offerings!

Leave a Comment

%d bloggers like this: