Configure Prisma in a Remix Application
Jun 30 2022
5 min read
#Create a Remix Project
Remix is a full stack web framework built on top of React that lets you focus on user interface work back through web standards to deliver a fast, slick, and resilient user experience.
To initialize a new Remix project, run the below command.
This will create a basic project structure with typescript and a single index route. To start the dev server, run the below command.
#Installing Prisma ORM
Prisma in one of the leading ORM's for typescript and node.js projects. It provides a CLI tool to install packages, create migrations, and client code.
With the CLI installed, we can initialize prisma with
npx prisma init command by passing the
Prisma supports both SQL and NO-SQL databases. Following are the list of databases supported by Prisma.
- Microsoft SQL Server
After initialization, a new folder named prisma and a .env file is create in the root directory. Inside it, a schema file named schema.prisma is created.
#Define a Post model
The schema file is where we define all of our models and relations if any. Prisma has its own syntax for defining any models and their data types. Let's create a Post model with built-in and user defined fields.
Here, we defined a Post model with three built-in fields which Prisma creates and manages for any record. We can add our own custom fields as well with their appropriate types.
We added a title and body custom fields which are
String. We can also make any field optional using
? at the end of the field type.
#Create the database
Now we have the new model in place, we haven't told Prisma to create a database with this schema. To create a database, execute the following command. This will create a db file inside the prisma folder.
#Add data using Prisma Studio
You can add data directly to the created db using a GUI tool provided by Prisma. Run the below command to open a UI in browser and add the title and body fields.
#Installing Prisma Client
Prisma provides a separate client package to interact with the database. We can do all the CRUD operations with minimal setup and it also provides a fully type-safe API to avoid mistakes. Run below command to install the client.
#Creating global db connection
Remix follows naming conventions for files where any file with name .server will be executed in server side. Let's create a database service which creates a global connection and shared across all the application.
#Creating post service
Create a new file named post.server.ts under services where we will write the logic to read and write the data.
We are exporting a function which will give all the posts and also a type
Post so that in client side, while importing, we can import everything from this file instead of prisma libraries.
#Reading data in UI
To get all the posts in UI, we need a
loader function which is specific to Remix. The loader function will always run in the server and gives back the result in json format. Then, we need a hook called
useLoaderData inside the component function to get the result from the
Remix is a runtime environment for both server and client, built on top of React and provides awesome DX with features like SSR, session management, routing etc.
Prisma is one of the best ORM's for typescript and node.js projects. It provides a fully type-safe API and a CLI to generate code, migrations, etc.