Building Remix Applications with the MongoDB Stack
Joel LordPublished May 05, 2023 • Updated May 05, 2023
Rate this article
For this tutorial, you will need:
- A MongoDB (free) cluster with the sample data loaded.
Start by initializing a new project. This can be done with the
create-remixtool, which can be launched with npx. Answer the questions, and you will have the basic scaffolding for your project. Notice how we use the
--templateparameter to load the MongoDB Remix stack (
mongodb-developer/remix) from Github. The second parameter specifies the folder in which you want to create this project.
This will start downloading the necessary packages for your application. Once everything is downloaded, you can
cdinto that directory and do a first build.
You’re almost ready to start your application. Go to your MongoDB Atlas cluster (loaded with the sample data), and get your connection string.
At the root of your project, create a
.envfile with the
CONNECTION_STRINGvariable, and paste your connection string. Your file should look like this.
At this point, you should be able to point your browser to http://localhost:3000 and see the application running.
Voilà! You’ve got a Remix application that connects to your MongoDB database. You can see the movie list, which fetches data from the
sample_mflixdatabase. Clicking on a movie title will bring you to the movie details page, which shows the plot. You can even add new movies to the collection if you want.
You now have a running application, but you will likely want to connect to a database that shows something other than sample data. In this section, we describe the various moving parts of the sample application and how you can edit them for your purposes.
The database connection is handled for you in the
/app/utils/db.server.tsfile. If you’ve used other Remix stacks in the past, you will find this code very familiar. The MongoDB driver used here will manage the pool of connections. The connection string is read from an environment variable, so there isn’t much you need to do here.
In the sample code, we connect to the
sample_mflixdatabase and get the first 10 results from the collection. If you are familiar with Remix, you might already know that the code for this page is located in the
/app/routes/movies/index.tsxfile. The sample app uses the default naming convention from the Remix nested routes system.
In that file, you will see a loader at the top. This loader is used for the list of movies and the search bar on that page.
You can see that the application connects to the
sample_mflixdatabase and the
moviescollection. From there, it uses the find method to retrieve some records. It queries the collection with an empty/unfiltered request object with a limit of 10 to fetch the databases' first 10 documents. The MongoDB Query API provides many ways to search and retrieve data.
You can change these to connect to your own database and see the result. You will also need to change the
/app/components/movie.tsx) to accommodate the documents you fetch from your database.
The movie details page can be found in
/app/routes/movies/$movieId.tsx. In there, you will find similar code, but this time, it uses the findOne method to retrieve only a specific movie.
Again, this code uses the Remix routing standards to pass the
movieIdto the loader function.
You might have noticed the Add link on the left menu. This lets you create a new document in your collection. The code for adding the document can be found in the
/app/routes/movies/add.tsxfile. In there, you will see an action function. This function will get executed when the form is submitted. This is thanks to the Remix Form component that we use here.
That’s it! You have a running application and know how to customize it to connect to your database. If you want to learn more about using the native driver, use the link on the left navigation bar of the sample app or go straight to the documentation. Try adding pages to update and delete an entry from your collection. It should be using the same patterns as you see in the template. If you need help with the template, please ask in our community forums; we’ll gladly help.
Currency Analysis with Time Series Collections #2 — Simple Moving Average and Exponential Moving Average Calculation
May 16, 2022