Guide to implementing tRPC in an ExpressJS and React project with Prisma and tailwind css

tRPC is a modern and efficient way to build APIs in TypeScript. It provides a type-safe way to define your API routes and payloads, by utilizing your backend code directly in your frontend code. In this tutorial, we will walk through the process of setting up tRPC with ExpressJS on the backend, along with Prisma for database handling, and React on the frontend. Additionally, we will be using Tailwind CSS for styling.

Step 1: Setting up the Backend with ExpressJS and tRPC
First, create a new folder for your project and navigate into it in your terminal. Run the following commands to initiate a new Node.js project and install the required dependencies:

npm init -y
npm install express trpc @trpc/server @trpc/client prisma @prisma/client sqlite

Create a new file called server.ts and add the following code to set up ExpressJS with tRPC:

import express from 'express';
import { createRouter } from '@trpc/server';
import { prisma } from '@prisma/client';

const app = express();
const port = 3001;

const router = createRouter<{ prisma: typeof prisma }>({
  prisma,
});

app.use(express.json());
app.use(router);

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

Step 2: Setting up Prisma for Database Handling
Next, we need to set up Prisma to handle our database interactions. Run the following command in your terminal to initiate a new Prisma project:

npx prisma init

Follow the instructions to create a new SQLite database and generate the Prisma client. Next, update your Prisma schema file (prisma/schema.prisma) with the following model definition:

model User {
  id Int @id @default(autoincrement())
  name String
}

Now, deploy your Prisma schema by running the following command in your terminal:

npx prisma db push

Step 3: Setting up the Frontend with React and tRPC Client
Create a new folder called client in your project directory and navigate into it. Run the following commands to initialize a new React application and install the required dependencies:

npx create-react-app .
npm install @trpc/client @trpc/react

Create a new file called trpc.ts and add the following code to set up the tRPC client for the frontend:

import { createReactQueryHooks, createTRPCClient } from '@trpc/client';

export const trpc = createTRPCClient({
  url: 'http://localhost:3001',
});

export const trpcHooks = createReactQueryHooks(trpc);

Step 4: Styling with Tailwind CSS
To add Tailwind CSS to your project, run the following command in your terminal:

npm install tailwindcss@latest postcss@latest autoprefixer@latest @tailwindcss/forms @tailwindcss/typography

Next, create a new file called index.css in the src directory of your client folder and add the following Tailwind CSS imports:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Update your index.js file in the src directory to import the index.css file:

import './index.css';

Step 5: Building the Frontend
Now that we have set up the backend and frontend, we can begin building our application. Create a new component called UserList.jsx in the src/components directory of your client folder and add the following code:

import React from 'react';
import { trpcHooks } from '../trpc';

const UserList = () => {
  const { data: users } = trpcHooks.useQuery(['users.list'], {});

  return (
    <div>
      <h1>User List</h1>
      {users && users.map(user => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  );
};

export default UserList;

In the App.js file in the src directory of your client folder, import the UserList component and add it to your application:

import React from 'react';
import UserList from './components/UserList';

function App() {
  return (
    <div>
      <h1>Hello World</h1>
      <UserList />
    </div>
  );
}

export default App;

Step 6: Running the Application
To start the backend server, run the following command in your project directory:

node server.ts

To start the frontend server, run the following command in the client directory of your project:

npm start

Your application should now be up and running. You can visit http://localhost:3000 in your browser to see the frontend interface, which should display a list of users fetched from the backend using tRPC.

In conclusion, this tutorial has demonstrated how to set up tRPC with ExpressJS on the backend, along with Prisma for database handling, and React on the frontend. Additionally, we have utilized Tailwind CSS for styling. By following these steps, you can build a modern and efficient web application with a type-safe API using tRPC.