Skip to content

react-router-7

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

react-router-7

README.md

React Router 7 Example

This example shows how to implement a simple web app using React Router 7 and Prisma ORM. This example was bootstrapped using the React Router CLI tool create-react-router.

Getting started

1. Download the example and navigate to the project directory

Download this example:

npx try-prisma@latest --template orm/react-router-7

Then navigate to the project directory

cd react-router-7
Alternative: Clone the entire repo

Clone this repository:

git clone git@github.com:prisma/prisma-examples.git --depth=1

Install npm dependencies:

cd prisma-examples/orm/nextjs
npm install

2. Create a Prisma Postgres instance

This example uses a Prisma Postgres database by default. To get started with the project, you will need to setup a Prisma Postgres connection string:

  1. Set up a new Prisma Postgres instance in the Prisma Data Platform Console and copy the database connection URL.

  2. Add your database url to the .env

That's it, your project is now configured to use Prisma Postgres!

3. Generate Prisma Client

Run the following command to generate the Prisma Client. This is what you will be using to interact with your database.

npx prisma generate

4. Start the React Router 7 server

npm run dev

The server is now running at http://localhost:5173. You can now view your todo list!

Switch to another database (e.g. PostgreSQL, MySQL, SQL Server, MongoDB)

If you want to try this example with another database than Prisma Postgres, you can adjust the the database connection in prisma/schema.prisma by reconfiguring the datasource block.

Learn more about the different connection configurations in the docs.

Expand for an overview of example configurations with different databases

PostgreSQL

For PostgreSQL, the connection URL has the following structure:

datasource db {
  provider = "postgresql"
  url      = "postgresql://USER:PASSWORD@HOST:PORT/DATABASE?schema=SCHEMA"
}

Here is an example connection string with a local PostgreSQL database:

datasource db {
  provider = "postgresql"
  url      = "postgresql://janedoe:mypassword@localhost:5432/notesapi?schema=public"
}

MySQL

For MySQL, the connection URL has the following structure:

datasource db {
  provider = "mysql"
  url      = "mysql://USER:PASSWORD@HOST:PORT/DATABASE"
}

Here is an example connection string with a local MySQL database:

datasource db {
  provider = "mysql"
  url      = "mysql://janedoe:mypassword@localhost:3306/notesapi"
}

Microsoft SQL Server

Here is an example connection string with a local Microsoft SQL Server database:

datasource db {
  provider = "sqlserver"
  url      = "sqlserver://localhost:1433;initial catalog=sample;user=sa;password=mypassword;"
}

MongoDB

Here is an example connection string with a local MongoDB database:

datasource db {
  provider = "mongodb"
  url      = "mongodb://USERNAME:PASSWORD@HOST/DATABASE?authSource=admin&retryWrites=true&w=majority"
}

Next steps