Full-Stack React Frameworks: A Comparison of create-t3-app and RedwoodJS
Overview of create-t3-app
create-t3-app is a CLI for full-stack Next.js projects that requires users to use TypeScript. It is built on top of Next.js, making it easier for developers familiar with its file structure and features to get started.
The project uses Tailwind CSS as its recommended styling solution and Prisma as its suggested database client. Additionally, it offers tRPC as its core solution for API calls and NextAuth.js for authentication.
npx create-t3-app my-app cd my-app npm run dev
Overview of RedwoodJS
RedwoodJS is a full-stack React framework with an integrated CLI that allows users to bootstrap their project with either vanilla JS or TypeScript. It follows the patterns of React and does not rely on any other framework.
RedwoodJS uses GraphQL for its API solution and Prisma as its recommended database client. It also offers Storybook as a UI component catalog, Jest for testing, and Pino for logging.
npx redwood init my-app cd my-app yarn rw dev
Setup and File Structure
Both frameworks are easy to set up, but create-t3-app offers more flexibility in configuring technologies through its setup wizard. RedwoodJS, on the other hand, requires users to work with GraphQL and has Storybook already integrated.
The file structure of create-t3-app has both frontend and backend living in the src folder, while RedwoodJS separates the frontend and backend into different folders.
Frontend Development
Create-t3-app uses the Next.js file structure, where all pages are stored as separate files in the pages folder.
// pages/index.tsx
import { GetStaticProps } from 'next';
import Head from 'next/head';
const HomePage = () => {
return (
<div>
<Head>
<title>Home Page</title>
</Head>
<h1>Welcome to my app!</h1>
</div>
);
};
export default HomePage;
RedwoodJS, on the other hand, uses a scaffold command to create new pages and components.
yarn rw g page home
Database and Server-Side Development
Both frameworks use Prisma as their ORM, but create-t3-app uses tRPC for communication with the backend, while RedwoodJS uses GraphQL.
// api/trpc/[trpc].ts
import * as trpc from '@trpc/server';
import * as trpcNext from '@trpc/server/adapters/next';
import { prisma } from '../../prismaClient';
export default trpcNext
.createNextApiHandler({
router: trpc.router().query('getUser', {
async resolve({ req }) {
return await prisma.user.findUnique({
where: { id: req.query.id },
});
},
}),
});
Conclusion
create-t3-app is a good choice for developers who are strong advocates of TypeScript, love working with Next.js, and want more flexibility.
RedwoodJS, on the other hand, is suitable for developers who prefer optional vanilla JS support, want to work with GraphQL, and need quick scaffolding.
Ultimately, the choice between these two frameworks depends on your specific needs and preferences.