Cloudflare logo

Cloudflare

Build.Deploy.Done. Build the next big React application with Cloudflare Pages.

related materials
Deploy and Test Full-Stack React Apps on Cloudflare
React Summit US 2024React Summit US 2024
Recording pending
Deploy and Test Full-Stack React Apps on Cloudflare
WorkshopFree
Dario Piotrowicz
Christian Sparks
2 authors
This 3 hour workshop will provide an introduction to the Cloudflare Developer Platform for application developers. It will focus on developing a full-stack React application backed by tests that can guarantee the correctness of its interactions with the resources and APIs provided by the Developer Platform.The workshop assumes basic knowledge of TypeScript and React — not much beyond what’s needed to build a hello world app in React using TypeScript! Knowledge of the Developer Platform is also not required as everything Cloudflare related will be introduced as part of the workshop.So if you’re interested in application development on the (fast and inexpensive!) Cloudflare platform then this workshop is for you. By the end of it you will know how to build a fully-fledged, fully-tested, full-stack web application (using React or any framework of your choice) with a comprehensive testing structure that gives you full confidence and peace of mind.
AgendaThe workshop will include live coding, Q&A, and interactive coding sections. The starting code, alongside instructions will be also made available for participants to revisit and dig deeper afterthe workshop.As part of the initial setup we’ll see how to use the C3 tool to easily deploy applications to Cloudflare in a matter of minutes.Afterwards, we will see how to write code that interacts with the Developer Platform specific resources and APIs, specifically, we’ll use KVs, R2 buckets and Workers AI. We’ll also make sure to test all the code to make sure that it correctly interacts with the aforementioned APIs via the official Workers Vitest integration.We will then integrate the Workers code with our React app to build a complete full-stack application ready to be deployed to the Cloudflare edge network. We will use playwright to implement an end-to-end (e2e) suite of tests to make sure that the application integrates perfectly with the Cloudflare platform.
Takeaways- How to develop on the Cloudflare Workers runtime and interact with various Cloudflare resources- How to develop, comprehensively test and deploy a full-stack application on the Cloudflare Platform
Testing Alternative Runtimes with Node and Vitest
Node Congress 2024Node Congress 2024
25 min
Testing Alternative Runtimes with Node and Vitest
A deep dive into how we built support for running Vitest tests in the Cloudflare Workers runtime. We'll start by giving an overview of the Cloudflare developer platform, including our open-source workerd JavaScript runtime and local simulator Miniflare. Next we'll talk about how Vitest works and provides support for custom runtimes, using Node.js as a driver to run tests in another environment. We'll describe the specifics of our custom Vitest pool, and how we added support for dynamic code evaluation to our runtime. Finally we'll talk about how we improved developer ergonomics with isolated per-test storage, test helpers for accessing Durable Object instances directly, and support for declarative HTTP request mocking., and how we created a service to build types for users' specific compatibility settings.
AI on Demand: Serverless AI
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
WorkshopFree
Nathan Disidore
Nathan Disidore
In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.
Advanced Application Deployment Patterns with React Server Components (feat. a DIY RSC Framework)
React Summit US 2023React Summit US 2023
104 min
Advanced Application Deployment Patterns with React Server Components (feat. a DIY RSC Framework)
WorkshopFree
 Greg Brimble
Greg Brimble
The developer ecosystem is always moving fast and this year has proved no exception. React Server Components can offer a significant improvement to developer experience and to application performance. But I think it's fair to say that this new server-first paradigm can be tricky to wrap your head around!In the first half of this workshop, we'll explore React Server Components from the ground-up: building our own mini meta-framework to help us understand how RSCs work. We'll discover exactly what is produced by an RSC build and we'll connect those pieces together to form a full application.Next, we'll deploy it! Cloudflare have also had a busy year too — Smart Placement, in particular, is a new technology that we've developed which fits the RSC model perfectly. We'll explore why that makes sense for our workshop app, and we'll actually deploy it onto the Cloudflare Developer Platform.Finally, we'll build out our app a little further, using D1 (our serverless SQL database) to really show off the React Server Component's power when combined with Smart Placement.You should come away from this workshop with a greater understanding of how React Server Components work (both behind-the-scenes and also how you as a developer can use them day-to-day), as well as insight into some of the new deployment patterns that are now possible after recent innovations in the platform space.