Deploying a Serverless Jamstack Site with RedwoodJS, Fauna, and Vercel

This tutorial guides you through building a Jamstack serverless application using RedwoodJS, FaunaDB, and Vercel. We'll leverage Fauna's GraphQL API as the backend for a RedwoodJS frontend, deploying effortlessly with Vercel's one-click deployment.

Expect a deep dive into Jamstack and serverless concepts, along with practical experience using this powerful tech stack.

Building Your Redwood App

RedwoodJS is a framework for serverless applications, combining React (frontend), GraphQL (data), and Prisma (database queries). While other frontend frameworks exist (like Bison), RedwoodJS offers a mature and well-established ecosystem.

We'll bypass starter templates and build from a basic Redwood project, examining each component. First, install Yarn and run these commands:

yarn create redwood-app ./csstricks
cd csstricks
yarn rw dev

Your frontend runs on localhost:8910, and the backend on localhost:8911 (with a GraphiQL playground). The Redwood landing page should appear at localhost:8910. (Note: RedwoodJS version 0.21.0 is used in this example; consult the documentation for the latest version and production readiness.)

Project Structure

RedwoodJS prioritizes convention over configuration, providing a structured project layout:

<code>├── api
│   ├── prisma
│   │   ├── schema.prisma
│   │   └── seeds.js
│   └── src
│       ├── functions
│       │   └── graphql.js
│       ├── graphql
│       ├── lib
│       │   └── db.js
│       └── services
└── web
    ├── public
    │   ├── favicon.png
    │   ├── README.md
    │   └── robots.txt
    └── src
        ├── components
        ├── layouts
        ├── pages
        │   ├── FatalErrorPage
        │   │   └── FatalErrorPage.js
        │   └── NotFoundPage
        │       └── NotFoundPage.js
        ├── index.css
        ├── index.html
        ├── index.js
        └── Routes.js</code>

The project is divided into web (frontend) and api (backend) directories, managed by Yarn workspaces. We'll replace Prisma with FaunaDB, removing the prisma directory and the contents of db.js (but keeping the db.js file).

index.html

The index.html file contains the root DOM node (<div id="redwood-app"></div>) where the React application is rendered. RedwoodJS, while Jamstack-oriented, currently doesn't perform pre-rendering like Next.js or Gatsby.

index.js

index.js renders the main application component into the redwood-app DOM element using ReactDOM.render(). It utilizes RedwoodProvider for context management and FatalErrorBoundary for error handling.

Routes.js

Routes.js defines the application's routing using Redwood's router.

Creating Pages

Let's create pages using the Redwood CLI:

yarn rw g page home /
yarn rw g page about

This generates the necessary files for HomePage and AboutPage. Simplify these pages by removing unnecessary navigation links.

Layouts

Create a reusable layout for navigation:

yarn rw g layout blog

Modify BlogLayout.js to include navigation links to HomePage and AboutPage using <link> components. Import BlogLayout into HomePage and AboutPage to incorporate the navigation.

Fauna Schema Definition Language (SDL)

Create sdl.gql with the following schema:

type Post {
  title: String!
  body: String!
}

type Query {
  posts: [Post]
}

Upload this schema to your FaunaDB instance. Note that FaunaDB creates intermediary types; we'll account for this in our RedwoodJS schema.

RedwoodJS SDL and Services

Create api/src/graphql/posts.sdl.js mirroring the Fauna schema, including the intermediary type PostPage. Create api/src/services/posts/posts.js to query the Fauna GraphQL API using graphql-request. Remember to install graphql-request and graphql in the api directory.

Fauna Authorization

Configure api/src/lib/db.js to include your FaunaDB secret in the authorization header using environment variables.

Seeding FaunaDB

Use the Fauna Shell to add some sample posts to your database.

Cells

Generate a BlogPostsCell to fetch and display posts:

yarn rw generate cell BlogPosts

Modify BlogPostsCell.js to query the posts and render the title and body of each post. Import BlogPostsCell into HomePage.

Vercel Deployment

Connect your project to Vercel. Modify netlify.toml (if it exists) to set apiProxyPath to "/api". Add your FaunaDB secret to Vercel's environment variables. Vercel's build command works seamlessly with RedwoodJS.

Your application is now complete! A live demo and GitHub repository are available (links would be inserted here).

The above is the detailed content of Deploying a Serverless Jamstack Site with RedwoodJS, Fauna, and Vercel. For more information, please follow other related articles on the PHP Chinese website!