What if just one tool helps you bring everything you’ll need to build a feature-rich application fast? Well,
create-t3-app does just that. So in this guide, I’ll walk you through the
create-t3-app and cover its similarities and differences with the more well known
What is the T3 Stack?
First things first, let’s discuss what the T3 Stack is. The T3 Stack is a collection of tools for implementing full-stack TypeScript applications, consisting of Next.js, tRPC, TailwindCSS, TypeScript, and Prisma. Just like the Jamstack, it’s a dedicated set of libraries and frameworks that advocate a specific methodology for building modern web apps. In T3’s case, the focus is on “simplicity, modularity, and full-stack type safety.”
Let’s take a look at the individual components of the T3 Stack:
TypeScript may seem like a waste of time to those unfamiliar with it, but after using it frequently, you will appreciate how much time it saves you, including preventing an entire class of errors via its powerful type-checking features.
Next.js is a React framework that enables server-side rendering in React applications. Traditional React apps are rendered on the front end. However, this behavior doesn’t favor all apps. For example, search engine bots may have difficulty indexing content on your site if it renders the content on the client side. Next.js fixes this issue, and hence it improves SEO.
The great thing about Next.js is that it gives you the best of both worlds. This means you can also use client-side rendering wherever you want while leveraging the power of server-side rendering.
tRPC is TypeScript library for building APIs in Node.js. The killer feature of tRPC is the ability to get type-checking across both the API implementation and its associated client-side library.
Prisma is an Object-relational mapping (ORM) library for Node.js that provides a more developer-friendly alternative to hand-crafted SQL queries. Prisma integrates well with TypeScript, MySQL, PostgreSQL, MongoDB, and other popular databases.
Creating a T3 stack application with create-t3-app
To explain what
create-t3-app is, we’ll look at a step-by-step guide on scaffolding a T3 stack app using the
In order to follow along with this tutorial, you’ll need to install both Node.js as well as npm on your local development environment. To verify that both Node and npm are installed on your system, run the following commands on your command line:
node -v npm -v
You should see that the commands print out the current version of Node and npm respectively. If you don’t have Node.js installed on your machine, you can do so from their official website.
You will also need to install npx if you don’t have it installed already. You can use the following command to install npx:
npm install -g npx
You can now use the
create-t3-app command to generate an application using the T3 stack. The
will walk you through installing the dependencies required for the t3-app scaffold step-by-step.
Start by running the following command on the terminal:
Running the command starts the project creation process.
Next, you will get a prompt to select the packages you want to install. The following screenshot shows the packages:
nextAuth is an open-source library for handling authentication within Next.js apps. It allows you to use third-party authentication providers like Google, Facebook, and Twitter, as well as use JSON Web Tokens (JWTs) for authentication and authorization purposes in your application.
In the next step, you’ll get a prompt to initialize a git repository and another prompt about installing dependencies; accept both by typing “Y” for each. After that, wait for the rest of the process to finish.
Once the project is ready, navigate to the new project directory using the following command:
Next, you will need to prototype your schema with the command below:
npx prisma db push
Finally, you can use the command below to start up your development server.
npm run dev
The application server runs on port 3000 like a regular React application. You can access your application on a browser
http://localhost:3000/. Here’s a screenshot of our example application:
Similarities between create-t3-app and create-react-app
If you’ve used React before,
create-t3-app may seem similar to how
create-react-app scaffolds a React app:
create-react-appare both command-line oriented tools for generating new Node.js projects.
create-react-appprovide options for customizing the application, including the installation of optional dependencies.
Drawbacks of using create-t3-app
Despite its simplicity and ease-of-use, there are definitely situations where using
create-t3-app to scaffold your
application may not be the best fit.
create-t3-appin a project that requires custom SASS or Webpack configurations can be difficult. This is due to the nature of
create-t3-app, which doesn’t expose those configurations to the developers. If you want the ability to customize your configuration then
create-t3-appis probably too limiting for you.
create-t3-appworks well for setting up monolithic applications where you have a single server and a single client. But using it with a microservice application and/or a micro frontend architecture is not going to be a good fit.
- Although create-t3-app has a large community and holds a lot of prospects for the future, it’s still a relatively new tool. As a result, there aren’t many resources and guides on how to use it conveniently.
create-t3-app is a fantastic tool that aims to make using the T3 stack easier and more convenient for
developers by providing a well-defined structure/architecture for the T3 stack out of the box, enabling developers to
spin up a fully working sample application in the span of a few minutes.