RedwoodJS: The Full-Stack React App Framework of Your Dreams

Rate this content
Bookmark

Tired of rebuilding your React-based web framework from scratch for every new project? You're in luck! RedwoodJS is a full-stack web application framework (think Rails but for JS/TS devs) based on React, Apollo GraphQL, and Prisma 2. We do the heavy integration work so you don't have to. We also beautifully integrate Jest and Storybook, and offer built-in solutions for declarative data fetching, authentication, pre-rendering, logging, a11y, and tons more. Deploy to Netlify, Vercel, or go oldschool on AWS or bare metal. In this talk you'll learn about the RedwoodJS architecture, see core features in action, and walk away with a sense of wonder and awe in your heart.

Tom Preston-Werner
Tom Preston-Werner
43 min
14 May, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.

1. Building a Web App with React, Prisma, and More

Short description:

To make a web app, I'll need React, Prisma, Apollo, Jest, Storybook, Webpack, Babel, authentication (probably Auth0), authorization, logging, code-splitting, OG tags, pre-rendering, and accessibility. Let's start with Create React App and then learn Prisma.

I know what you're thinking. I want to make a web app. So I'm going to need React. I'm going to need Prisma on the backend to talk to a database. I'm going to need Apollo to talk from the frontend to the backend.

I'm going to need Jest so I can write some tests. I'm going to need Storybook so I can design code and test my components in isolation. I'm going to need Webpack to glue this whole thing together. And I'm going to need Babel so I can compile, transpile ES6 down to ES5.

That's the web app, but I'm going to need to figure out how to deploy this thing. Maybe it could go to Netlify. They're really into Jamstack. Maybe it could go to Vercel. They've got a cool Triangle logo. What about render? Maybe then I could use containers and get long-running requests and GraphQL subscriptions. Or maybe I need the full power of AWS. I haven't decided yet.

In any case, I'm going to need some kind of authentication so I could use Auth0 for that. I'm not going to write my own. Gotta go further than that, though. I also need authorization. So I'm going to need some role-based access controls. And what about logging? I'm going to need really good logging send out to the provider of my choice.

I'm going to have to code-split this thing so the browser doesn't get too much code at any one time. I'm going to need OG tags, so this thing will unfurl on Twitter and Facebook. Gotta have pre-rendering probably in order to do that. And I'm going to need accessibility right out of the box. This thing works in screen readers.

All right. Let's do this thing. That's not really how it works, is it? It's more like this.

All right. Google my old friend, create react app. Okay, there you are. What's this? There we go. Launch. CX. Create react app. All right. What am I to call this thing? Gloobnox? That works. All right, we'll let that do its thing for a while. Let's learn how to use Prisma. Okay, Prisma, here we go. Nope. Not that one. Nope. Not that one either. Aha! Found you. Yep. Here we go.

2. Introduction to Redwood JS and Project Structure

Short description:

I'm here to tell you about Redwood JS, the full stack React app framework. A Redwood application is broken down into two sides: the web side with React and the API side with GraphQL and Prisma. Let's see some code. I have a simple to-do application written in Redwood. I've initialized the database and spun up the web server. I can add and toggle items on my to-do list, all via GraphQL. The project structure includes separate web and API folders within a monorepo.

Prisma docs. Quick start. All right. In this page you will learn how to send queries to a, okay, great. All right. This is going to take the rest of my life. But despair not, because I'm here today to tell you about Redwood JS, the full stack React app framework of your dreams.

Now, I know what you're wondering. Who is this bozo telling me what to do? Well, I'm Tom Preston Werner. You can find me online, at MoJombo on Twitter and GitHub. In the past I've created such companies as GitHub and Chatterbug, best place to learn a foreign language. I have also very active in open source. I created Jekyll. I wrote the semver, the semantic versioning specification, TOML, the configuration language used by a variety of packages, and Gravatar, the avatars that follow you around.

Now, getting back to this screen, remember all these technologies? These technologies are awesome, but you don't necessarily want to think about all of them. In fact, Apollo is great. But really, when I write an application, I want to worry about GraphQL and not really the intricacies of Apollo. And I also really don't want to worry about Webpack or Babel at all. In fact, I want to focus my attention on writing JavaScript or TypeScript. That's what I'm here for. I'm a programmer. Let me write code. That's what I do.

And so a Redwood application is going to be broken down into two sides. Very simple. A very simple model to think about. On the web side, you have your React application. This is where you think about your testing with Jest and your storybook. Those happen locally but conceptually they are really part of the web side of this. And then on the API side, you have an implementation of a GraphQL API that uses Prisma and a bunch of JavaScript or TypeScript to create your services, your business logic that is going to talk to your database and do what you need it to do. In between you've got GraphQL that talks back and forth. And GraphQL is how you make queries and also how you specify the queries and mutations that are going to happen. But enough chit-chat, let's see some code. I have here on the right opened GitHub.com slash Redwood JS slash example to do. This is a simple to do application written in Redwood that I thought I'd run you through a few things, and show off how Redwood works and how it thinks about the world. So I've cloned this down to my local machine. I've run Yarn, you can see the instructions here. And I've initialized the database. So it's all set up, ready to go. So the first thing that I'm going to do is run Yarn Redwood dev to spin up the web server. This is going to spin up both sides that I talked about before, both the web side and the API side, the front end and the back end, link them together, and fire up a new browser window with my to do list. So I'll show you how it works. I can say I need to order some milk, and some cheese, and some eggs. And I can toggle these things on and off. This is talking to the back end via GraphQL. You can see here in the logs, the posts to the GraphQL back end. So how does that work? Well, in the editor over here, you'll see the web folder and the API folder. This is a monorepo structure. So these are each separate packages within a single Git repository. So let's start where everything starts, which is with the routes.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface.
But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.
From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.

Workshops on related topic

Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel
GraphQL Galaxy 2021GraphQL Galaxy 2021
161 min
Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel
WorkshopFree
William Lyon
William Lyon
In this workshop we will build and deploy a full stack GraphQL application using Next.js, Neo4j, and Vercel. Using a knowledge graph of news articles we will first build a GraphQL API using Next.js API routes and the Neo4j GraphQL Library. Next, we focus on the front-end, exploring how to use GraphQL for data fetching with a Next.js application. Lastly, we explore how to add personalization and content recommendation in our GraphQL API to serve relevant articles to our users, then deploy our application to the cloud using Vercel and Neo4j Aura.

Table of contents:
- Next.js overview and getting started with Next.js
- API Routes with Next.js & building a GraphQL API
- Using the Neo4j GraphQL Library
- Working with Apollo Client and GraphQL data fetching in Next.js
- Deploying with Vercel and Neo4j Aura
Building full-stack GraphQL applications with Hasura and Vue 3
Vue.js London Live 2021Vue.js London Live 2021
115 min
Building full-stack GraphQL applications with Hasura and Vue 3
WorkshopFree
Gavin Ray
Gavin Ray
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.

Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level

NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.
Crash Course into the Jamstack with Next.js & Storyblok
React Day Berlin 2022React Day Berlin 2022
161 min
Crash Course into the Jamstack with Next.js & Storyblok
WorkshopFree
Arisa Fukuzaki
Chakit Arora
2 authors
You might have read already about Jamstack. You probably already used Next.js, and recently you may be hearing a lot about the headless CMSs. This quick course will put all the pieces together and show you why Storyblok, combined with Next.js, is the best combo for your next project. Stop by and try it yourself!
- In-depth Jamstack knowledge. How it changed from old times to the modern world. Learn how Jamstack was created by comparing Static Sites and Dynamic Sites.- How Next.js serves content, and how content is served with Static Site Generation (SSG).- Atomic design methodology, and how this is applied to the content management system.- Hands-on project experience by building a Jamstack project with Next.js and Storyblok.
Prerequisites- Any Text . Visual Studio Code recommended- Node.js LTS- NPM or Yarn- GitHub account- Vercel account- Familiarity with JavaScript, React, and Git. Having worked with Next.js before is a plus
What's included1. Introduction and overview of the workshop2. Introduction to Jamstack3. Introduction to Atomic Design4. Overview of Headless CMS5. Introduction to Storyblok6. Next.js app creation7. Storyblok space creation8. Next.js and Storyblok connection9. Custom components creation10.First-page creation11. Introduction to Visual 12. Dynamic pages addition13. Blog section creation14. Deployment on Vercel