Introduction to the T3 stack and create-t3-app

There are many JavaScript frameworks and libraries, and people often joke that we might have way too many of these tools. While building a web application with multiple features like user authentication, database, and responsive mobile-friendly UI, you might use several JavaScript libraries to implement the project.

What if just one tool helps you bring everything you’ll need to build a feature-rich application fast? Well, the create-t3-app does just about that. So in this guide, I’ll walk you through the essentials of create-t3-app. By the end of this post, you’ll understand what the create-t3-app tool is, how it’s similar to other tools like create-react-app and why it’s worth learning about it.

What is the T3 Stack?

First things first, let’s discuss what the T3 Stack is. We can put simply that T3 Stack is a web development stack that uses Next.js, tRPC, TailwindCSS, TypeScript, and Prisma to implement features. Just like JAMStack, it’s a dedicated set of libraries and frameworks that advocate a specific methodology for building modern web apps.

T3 focuses on simplicity, modularity, and full-stack type safety. Let’s take a look at the individual components of the T3 Stack below:

Next.js

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

Typesafe node APIs are simple to develop and put into practice thanks to the tool - tRPC. tRPC is a quick and light tool that allows you to build type-safe APIs in NodeJS quickly. Additionally, you may include it in an existing project that was created using Express or Next.js.

Tailwindcss

TailwindCSS is a framework for CSS that provides many utility classes you can use to style your website easily. It reduces some of the work associated with working with CSS properties directly. Also, you can easily integrate Tailwind with React, Next.js, Angular, and other JavaScript frameworks.

TypeScript

TypeScript may be comparable to JavaScript with different characteristics like strong static typing, compilation, and object-oriented programming. It checks a program for errors before execution based on the types of values. As a typed superset, TypeScript includes guidelines for the appropriate use of various kinds of values.

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. It also makes your entire JavaScript application more robust.

Prisma

Prisma is an open-source tool that makes working with databases more straightforward and safe. It is an Object-relational mapping (ORM) that makes database access easier and reduces errors. Prisma integrates well with TypeScript, MySQL, PostgreSQL, MongoDB, and other popular databases.

From the above brief descriptions, you would have noticed that the T3 Stack is quite packed and has simplicity, modularity, and scalability at its core. T3 uses modern tooling or framework to power pack a web app with all the modern features it needs to be lightweight, fast, and developer friendly.

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 create-t3-app command.

Pre-requisites

Set up Node.js on your system before you begin. Also loaded with Node.js is the Node Package Manager (NPM), which enables us to manage and install packages. The command shown below can be used to check the version of Node.js that is installed on your system:

node -v

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

Steps

You can now use the create-t3-app command to generate the application. The create-t3-app command 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:

$ npx create-t3-app@latest

Running the command starts the project creation process.

Enter the name of your application in the first prompt. Next, you can then select between TypeScript and JavaScript. To do that, use the up and down arrow buttons to choose your preferred option and press enter to continue.

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 package that will help with authentication. It allows you to use third-party authentication providers like Google, Facebook, and Twitter, as well as JSON web tokens in your application.

On 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:

cd <your-app-name>

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 from http://localhost:3000. Here's a screenshot of our example application:

Similarities Between create-t3-app And create-react-app

If you've extensively used React before, this may have seemed familiar with how create-react-app works and scaffolds a React app. It indeed is, so let's look at the specific similarities between the two.

• create-t3-app and create-react-app are CLI tools that you can install and run conveniently from the command line.
• Both create-t3-app and create-react-app provide interfaces for helping developers bootstrap their applications faster.
• Project scaffolding commands help developers install the bare minimum of dependencies needed for the application to run. That means a pre-configured development server with hot reloading, module bundling, etc.
• Both tools allow you to choose between plain JavaScript and TypeScript during application setup. It gives you complete control over the primary language you want to use in your application.

Why does create-t3-app Make it Easier to Create a Next.js Application?

The following are ways using create-t3-app makes it easier to create new Next.Js applications:

• The npx create-t3-app command helps developers set up a full-stack Next project quicker.

• create-t3-app allows you to use TypeScript out of the box and sets up the TypeScript configuration for you.

• create-t3-app provides authentication using NextAuth, making it easier for you to get a head start.

• The create-t3-app command offers a highly structured and scalable architecture for developers.

• Setting up and working with a Database is very easy using Prisma. Prisma can also integrate with multiple databases.

• It introduces the robust functionality of Graphql that allows us to create queries and mutations.

Drawbacks of Using create-t3-app

• Using create-t3-app in a project that requires SASS, Webpack configurations, or other custom configurations can be difficult. This is due to the nature of create-t3-app, which doesn't expose those configurations to the developers.

• Create-t3-app works well for setting up monolithic applications where you have a single server and a single client. But using it with a microservice application becomes challenging.

• Suppose you want to gain control of your application configuration at a base level. In that case, Create-t3-app might not be suitable for you as it abstracts most configuration (e.g. babel) options for creating client-side applications.

• 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. Hopefully, this issue will be a thing of the past with time.

Conclusion

Overall, 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, focusing on modularity, simplicity, and type safety.