Claude Code for Redwood JS Fullstack Workflow Guide

RedwoodJS brings the elegance of React to the fullstack world, combining a React frontend with serverless functions and an ORM-backed API. When paired with Claude Code, you get an incredibly productive development experience that handles boilerplate, implements business logic, and guides you through complex architectural decisions. This guide walks through a complete workflow for building RedwoodJS applications with Claude Code as your development partner.

Setting Up Your RedwoodJS Project with Claude Code

Before diving into code, ensure your environment is ready. Initialize a new Redwood project and set up Claude Code to work within it:

# Create a new Redwood project
yarn create redwood-app my-redwood-app
cd my-redwood-app

# Create a CLAUDE.md file to configure Claude's project context

Create a CLAUDE.md file to configure Claude to understand your project structure. The key directories it should recognize are:

/api/src - Serverless functions and services
/web/src - React frontend components
/web/src/pages - Route page components
/api/src/graphql - GraphQL schema and resolvers

This setup enables Claude to navigate between frontend and backend contexts smoothly.

Building Your First GraphQL API

RedwoodJS uses GraphQL as its API layer, and Claude Code excels at generating the boilerplate. Describe what you need, and let Claude scaffold the implementation:

Prompt Claude with:

“Create a Blog post model with title, content, and publishedAt fields. Set up the GraphQL schema, CRUD services, and a cell for fetching posts.”

Claude will generate the necessary files:

// api/src/graphql/posts.sdl.ts
export const schema = gql`
  type Post {
    id: Int!
    title: String!
    content: String!
    publishedAt: DateTime
    createdAt: DateTime!
  }

  type Query {
    posts: [Post!]!
    post(id: Int!): Post?
  }

  type Mutation {
    createPost(input: CreatePostInput!): Post!
    updatePost(id: Int!, input: UpdatePostInput!): Post!
    deletePost(id: Int!): Post!
  }

  input CreatePostInput {
    title: String!
    content: String!
    publishedAt: DateTime
  }

  input UpdatePostInput {
    title: String
    content: String
    publishedAt: DateTime
  }
`

The corresponding service in api/src/services/posts/posts.ts handles the database logic. Claude generates the standard CRUD operations while you focus on business logic customization.

Integrating Frontend with Cells

Redwood’s Cell pattern is one of its most powerful features for data fetching. Here’s how to work with it effectively:

// web/src/components/PostCell/PostCell.js
import { Link, routes } from '@redwoodjs/router'
import { useQuery } from '@redwoodjs/web'
import { Post } from 'web/src/components/Post'

const GET_POSTS = gql`
  query GetPosts {
    posts {
      id
      title
      publishedAt
    }
  }
`

export const QUERY = GET_POSTS

export const Loading = () => <div>Loading...</div>

export const Empty = () => <div>No posts yet</div>

export const Failure = ({ error }) => <div>Error: {error.message}</div>

export const Success = ({ posts }) => {
  return posts.map((post) => (
    <Link key={post.id} to={routes.post({ id: post.id })}>
      <article>
        <h2>{post.title}</h2>
        {post.publishedAt && (
          <time>{new Date(post.publishedAt).toLocaleDateString()}</time>
        )}
      </article>
    </Link>
  ))
}

When you need to add new queries or mutations, ask Claude to scaffold them while preserving your existing component logic.

Working with Forms and Mutations

Redwood simplifies form handling with its form helpers. Here’s a practical pattern for creating posts:

// web/src/pages/CreatePostPage/CreatePostPage.js
import { useMutation } from '@redwoodjs/web'
import { navigate, routes } from '@redwoodjs/router'
import PostForm from 'web/src/components/PostForm'

const CREATE_POST_MUTATION = gql`
  mutation CreatePostMutation($input: CreatePostInput!) {
    createPost(input: $input) {
      id
    }
  }
`

const CreatePostPage = () => {
  const [createPost, { loading, error }] = useMutation(CREATE_POST_MUTATION)

  const onSubmit = (input) => {
    createPost({ variables: { input } }).then(() => {
      navigate(routes.posts())
    })
  }

  return (
    <div>
      <h1>Create Post</h1>
      <PostForm onSubmit={onSubmit} loading={loading} error={error} />
    </div>
  )
}

export default CreatePostPage

Claude can help you extend this pattern with validation, file uploads, or multi-step forms.

Authentication and Authorization

Redwood provides built-in auth integration. Here’s how to secure your routes:

// web/src/App.js
import { AuthProvider } from '@redwoodjs/auth'
import { createAuth } from '@redwoodjs/auth-dbauth-web'

const authConfig = {
  dbAuthHandler: {
    // Configuration options
  }
}

const App = () => (
  <AuthProvider client={createAuth(authConfig)}>
    <RedwoodProvider>
      <Routes>
        <PrivateRoute path="/admin" from="/" to="/login">
          <AdminPage />
        </PrivateRoute>
      </Routes>
    </RedwoodProvider>
  </AuthProvider>
)

Ask Claude to add role-based authorization or integrate third-party auth providers when your requirements grow beyond basic authentication.

Deployment Workflow

When you’re ready to deploy, Claude helps navigate the deployment options. For serverless deployment:

# Deploy to Netlify (most common for Redwood)
yarn rw deploy netlify

# Or deploy to Vercel
yarn rw deploy vercel

Before deploying, have Claude review your configuration:

Check redwood.toml for correct build settings
Verify environment variables are set
Ensure database migrations are ready
Review security headers and CORS settings

Best Practices for Working with Claude on Redwood Projects

Be specific about layers: When asking Claude to help, specify whether you want frontend, backend, or database changes. Redwood’s clear separation makes this easy to communicate.
Use code generation wisely: Let Claude scaffold boilerplate but review before accepting—Redwood has specific conventions that should match your project patterns.
Leverage the type safety: Redwood generates TypeScript types from your GraphQL schema. Ask Claude to use these types throughout your application for better developer experience.
Test incrementally: After each major feature, ask Claude to help write or update tests in the web/src/components/*.test.js and api/src/services/**/*.test.js directories.

Conclusion

Building with RedwoodJS and Claude Code combines the best of modern fullstack development: React’s component model, GraphQL’s data flexibility, and AI-assisted development speed. Start with a clear project structure, use Cells for data fetching, and use Claude to handle the boilerplate while you focus on your unique business logic. The workflow becomes iterative—describe what you need, review what Claude generates, refine, and continue building.

Built by theluckystrike — More at zovo.one