RedwoodJS

Overview

RedwoodJS is a full-stack JavaScript framework designed to provide a comprehensive and opinionated development experience for building modern web applications. Established in 2019, it integrates several popular technologies into a cohesive platform: React for the frontend user interface, GraphQL for managing data interactions between the client and server, and Prisma for type-safe database access RedwoodJS Introduction. This combination is intended to offer developers a unified workflow from database schema definition to UI rendering.

The framework targets developers and teams seeking to build applications with a strong emphasis on speed, scalability, and developer experience. RedwoodJS is particularly well-suited for JAMstack projects that require persistent data storage and complex data manipulation, moving beyond static site generation to dynamic, data-driven applications. Its core philosophy revolves around convention over configuration, which means it provides predefined structures and patterns for common application features, reducing boilerplate code and accelerating development cycles. This includes generators for creating pages, components, services, and GraphQL schemas.

RedwoodJS is engineered to facilitate secure and scalable web application development. It incorporates best practices for security by design, such as API authentication and authorization mechanisms. For scalability, its architecture supports deploying the frontend as a static site and the backend API as serverless functions, which can automatically scale based on demand. This serverless-first approach can lead to more cost-effective and performant deployments for many applications.

Developers who prefer the React ecosystem, appreciate the benefits of GraphQL for flexible data fetching, and require a robust ORM like Prisma for database interactions will find RedwoodJS aligned with their preferences. It abstracts away much of the complexity involved in setting up and integrating these technologies individually, allowing developers to focus more on application logic and less on infrastructure configuration. The framework's tooling also includes a development server with hot module replacement, Storybook integration for UI component development, and Jest for testing, creating a complete environment out of the box.

While RedwoodJS provides strong opinions on its technology stack, it also offers flexibility where appropriate. For example, while Prisma is the default ORM, developers can integrate other database access layers if needed, though this might deviate from the framework's conventional benefits. The framework's commitment to a full-stack experience means it handles routing, data fetching, mutations, and authentication consistently across both client and server, aiming for a smooth development journey from initial concept to deployment.

Key features

• Opinionated Full-Stack Architecture: Integrates React, GraphQL, and Prisma into a single workflow, guiding developers through best practices for structuring applications RedwoodJS Architecture Overview.
• Generators: Provides CLI tools to scaffold common application elements like pages, layouts, components, services, and GraphQL SDL (Schema Definition Language), accelerating initial setup and feature development.
• Database Access with Prisma: Utilizes Prisma as the ORM, offering type-safe database queries and migrations, supporting various databases including PostgreSQL, MySQL, SQLite, and Microsoft SQL Server.
• GraphQL API Layer: Automatically generates a GraphQL API based on the Prisma schema, enabling efficient data fetching and mutations from the frontend.
• Serverless Deployment Ready: Designed for deployment to serverless environments (e.g., Netlify, Vercel, AWS Lambda), optimizing performance and scalability.
• Built-in Authentication: Offers multiple authentication providers and helper functions to integrate secure user authentication into applications RedwoodJS Authentication Guide.
• Routing System: Includes a declarative routing system for both client-side and server-side routes, supporting named routes and dynamic parameters.
• TypeScript Support: Provides first-class TypeScript support throughout the framework, enhancing code quality and developer productivity.
• Testing Utilities: Integrates Jest for unit and integration testing, along with Storybook for component development and testing.

Pricing

RedwoodJS is an open-source project distributed under the MIT license.

The framework itself is free to use RedwoodJS Project Information. Users may incur costs related to deployment platforms (e.g., Netlify, Vercel, AWS), databases (e.g., Supabase, Heroku Postgres), or third-party services integrated into their applications.

Common integrations

• Prisma: Tightly integrated for database management, schema migrations, and type-safe database access RedwoodJS Prisma Client.
• GraphQL: The backend API is built on GraphQL, providing a flexible query language for client-server communication RedwoodJS GraphQL Usage.
• React: The primary frontend library for building user interfaces with full support for React components and hooks RedwoodJS Cells with React.
• Netlify/Vercel: Optimized for deployment to Jamstack platforms, leveraging serverless functions for the API and static hosting for the frontend RedwoodJS Netlify Deployment Guide.
• Storybook: Integrated for developing, testing, and documenting UI components in isolation RedwoodJS Storybook Setup.
• Jest: Used for unit and integration testing across both the frontend and backend parts of the application RedwoodJS Testing with Jest.
• Auth.js (NextAuth.js): A popular library for handling various authentication strategies, often integrated for secure user login flows on modern web applications RedwoodJS Auth.js Integration.

Alternatives

• Next.js: A React framework for building full-stack web applications, offering server-side rendering, static site generation, and API routes.
• Remix: A full-stack web framework focused on web standards, offering nested routing, server-rendered UIs, and robust error handling.
• Blitz.js: A full-stack framework built on Next.js, aiming for a "zero-API" data layer experience by abstracting away the API entirely.
• Gatsby.js: A React-based framework for building fast websites and apps, often used for static site generation with data sourcing from various APIs and CMSs.
• SvelteKit: A framework for building web applications of all sizes, leveraging the Svelte compiler for highly performant UIs and offering flexible rendering options.

Getting started

To begin a new RedwoodJS project, ensure you have Node.js (version 16 or higher) and Yarn installed. The process involves creating a new project with the RedwoodJS CLI and then starting the development server.

# Install the RedwoodJS CLI
npm install -g @redwoodjs/cli

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

# Navigate into your new project directory
cd my-redwood-app

# Start the development server (frontend and backend APIs)
yarn redwood dev

After running yarn redwood dev, the frontend application will typically be accessible at http://localhost:8910 and the GraphQL API playground at http://localhost:8911/graphql. The CLI guides you through setting up a database and generating your first page and service RedwoodJS Tutorial.