Refer to newer post on this at /blog/remix-mongodb-typescript-tutorial

This is a short tutorial on integrating remix.run with Mongodb using the mongoose library. Remix is a full-stack web framework. This is an intermediate level tutorial and one must know about Reactjs and MongoDB at least.

Steps

1. Create remix project
2. Code a Mongoose Model
3. Initialize mongodb driver
4. Fetch and render the data

create a Remix project

Source code for this example is at https://github.com/ch4nd4n/practice/tree/remix-run/remix-mongoose

Copycopy code to clipboard
1# Create remix project
2npx create-remix@latest

Fill out the details, I used Typescript and remix server.

For this tutorial, we don't need routes and styles, so knock it off.

Copycopy code to clipboard
1rm -rf routes
2rm -rf styles

The next step is to create a Mongoose model to fetch todos collection from MongoDB.

Mongoose Model

Copy/models/Todo.tsx: copy code to clipboard
1import mongoose from "mongoose";
2const TodoSchema = new mongoose.Schema({
3  title: { type: String, required: true },
4});
5const model = mongoose.models.Todo || mongoose.model("Todo", TodoSchema);
6export default model;

Update root.tsx

In root.tsx we connect to Mongodb using mongoose.connect method and use remix loader to use a mongoose model. The model populates the data before the component gets rendered on the browser.

Copycopy code to clipboard
1import mongoose from "mongoose";
2import Todo from "./models/Todo";
3
4mongoose.connect(
5  "mongodb://root:example@localhost:27017/chandan_vercel_dev?authSource=admin",
6  (error) => {
7    if (!error) return console.info("Mongo connected");
8    console.error(error);
9  }
10);
11export let loader: any = async () => {
12  return await Todo.find({});
13};
14
15const TodoList = (todos: any) => {
16  return (
17    <ul>
18      {todos.map((todo: any) => (
19        <li>{todo.title}</li>
20      ))}
21    </ul>
22  );
23};

Next up

You can visit remix.run for the official documentation. I intend to explore web socket connection with Remix.

Similar article:

1. Remix Tutorial: Firebase Authentication