A First Look at RedwoodJS - Complete Series

Introduction

I - Redwood Philosophies

RedwoodJS is an opinionated, full-stack, serverless web application framework for the Jamstack. It is designed to enable the dream of a Universal Deployment Machine.

II - Full Stack React

There has recently been an influx of different projects aiming to build a Full Stack React framework. What are people talking about when they say Full Stack React and why is it suddenly such a hot topic?

III - Jamstack

The Jamstack is a departure from traditional server-rendered stacks like LAMP and MEAN. Jamstack applications serve static files from globally distributed CDN’s, removing the server and the database from the stack entirely and replacing them with APIs that provide dynamic functionality.

IV - Serverless

Serverless is a buzz word commonly used to refer to Function-as-a-Service cloud products like AWS Lambda. Instead of paying for a server to always be running and ready to accept requests, you pay based on the specific number of function calls your app invokes.

Tutorial

Part 1 - Setup

Install and create our first Redwood application

This series will start at the very beginning and assume no prior knowledge of Redwood. We’ll install the Redwood CLI and learn how to use Redwood’s custom generators to create pages.

Part 2 - Routes

Explore Redwood’s router and create links for our pages

Redwood has its own built-in router inspired by Ruby on Rails, React Router, and Reach Router. Redwood Router is designed to list all routes in a single file, without any nesting.

Part 3 - Prisma

Get our database up and running and learn to create, retrieve, update, and destroy blog posts

Prisma 2.0 is a query builder that provides a type-safe API for submitting database queries that return JavaScript objects. We’ll learn how to write a Prisma schema file and use it to initialize our database.

Part 4 - CRUD

Explain all the generated code for performing CRUD operations and set up our frontend to render a list of our blog posts by querying data from our backend

This part goes deep into the code that Redwood writes for you. How is Redwood handling form data? What is the CLI spitting out when we generate pages or cells? What is a GraphQL schema definition language? What does all this have to do with services? Finally we’ll generate a cell that queries our backend and renders all our blog posts to the front page of our site.

Part 5 - Contact

Combine everything we’ve learned up to this point to generate a contact page and take input from a user

We’ll explore further into Redwood forms and all the corresponding helpers that make our lives easier when working with forms. Redwood uses react-hook-form by default but it can also use other React form builders.

Part 6 - GraphQL

Connect our contact form to the database to persist data entered into the form

After creating our contact form we need to create a new contact schema and migrate our database. We’ll use another Redwood generator to create our schema definition language and our GraphQL resolvers for our services.

Part 7 - Deploy

Deploy our frontend to Netlify and our backend to Heroku

A website isn’t very useful unless it’s on the web. In this part we’ll deploy our React frontend to Netlify with their Serverless functions. Netlify will give us a free domain that we can share with the world. For our backend we’ll use Heroku to host our database with Postgres.

Part 8 - Auth

Implement role-based authentication with Netlify Identity

In the final part of our series we’ll use Netlify Identity to implement role-based authentication on our blog. We’ll use one more Redwood generator for authentication. We’ll be able to use Netlify’s login functionality so we don’t have to make our own login form.

Outline

Here’s a slightly more detailed outline for the tutorial that’s currently a work in progress. I don’t want to make things too complicated with the nesting, but I’ll likely end up going one more level deep and grouping some of these sections into sub-sections:

Part 1 - Setup

1.1 - yarn create redwood-app
1.2 - yarn redwood dev
1.3 - redwood generate page

Part 2 - Routes

2.1 - Routes.js
2.2 - index.js
2.3 - Link
2.4 - redwood generate layout
2.5 - BlogLayout.js

Part 3 - Prisma

3.1 - schema.prisma
3.2 - seeds.js
3.3 - redwood db save
3.4 - migrations
3.5 - steps.json
3.6 - redwood db up
3.7 - redwood generate scaffold

Part 4 - CRUD

4.1 - api/src
4.2 - graphql.js
4.3 - posts.sdl.js
4.4 - db.js
4.5 - posts.js
4.6 - PostPage.js
4.7 - PostsLayout.js
4.8 - PostCell.js
4.9 - Post.js
4.10 - NewPostPage.js
4.11 - NewPost.js
4.12 - PostForm.js
4.13 - EditPostPage.js
4.14 - EditPostCell.js
4.15 - PostsPage.js
4.16 - PostsCell.js
4.17 - Posts.js
4.18 - redwood generate cell

Part 5 - Contact

5.1 - redwood generate page contact
5.2 - ContactPage.js
5.3 - Form
5.4 - data
5.5 - validation
5.6 - errorClassName
5.7 - FieldError

Part 6 - GraphQL

6.1 - Contact
6.2 - redwood generate sdl
6.3 - contacts.sdl.js
6.4 - createContact
6.5 - CREATE_CONTACT
6.6 - graphiQL
6.7 - loading
6.8 - useForm

Part 7 - Deploy

7.1 - GitHub Repo
7.2 - Netlify
7.3 - Heroku
7.4 - Config/Environment Variables

Part 8 - Auth

8.1 - Netlify Identity
8.2 - redwood generate auth
8.3 - auth.js
8.4 - requireAuth
8.5 - AuthProvider
8.6 - Private
8.7 - useAuth

2 Likes

HAHAHA Part 8! I’ve never been made into a GIF before! :open_mouth:

1 Like

It was my favorite moment of the whole series. Camera trying to run away after hearing forms is a close second.

2 Likes