Connect a Remix application to Neon
Set up a Neon project in seconds and connect from a Remix application
To create a Neon project and access it from a Remix application:
- Create a Neon project
- Create a Remix project and add dependencies
- Configure a Postgres client
- Run the app
Create a Neon project
If you do not have one already, create a Neon project. Save your connection details including your password. They are required when defining connection settings.
- Navigate to the Projects page in the Neon Console.
- Click New Project.
- Specify your project settings and click Create Project.
Create a Remix project and add dependencies
Create a Remix project if you do not have one. For instructions, see Quick Start, in the Remix documentation.
Add project dependencies using one of the following commands:
Store your Neon credentials
.env file to your project directory and add your Neon connection string to it. You can find the connection string for your database in the Connection Details widget on the Neon Dashboard. For more information, see Connect from any application.
Configure the Postgres client
There are two parts to connecting a Remix application to Neon. The first is
db.server. Remix will ensure any code added to this file won't be included in the client bundle. The second is the route where the connection to the database will be used.
db.server.ts file at the root of your
/app directory and add the following code snippet to connect to your Neon database:
Create a new route in your
app/routes directory and import the
Run the app
When you run
npm run dev you can expect to see one of the following in your terminal output:
Last updated on