Configure Remix JS with MySQL
It looks like Remix team not only likes music, but also has a great sense of humor. Production ready SQLite database. Well, I don’t know about that. Let’s go ahead and swap SQLite database for MySQL in Remix JS project.
And If you don’t know what I’m talking about, let me quickly explain.
Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience.
Remix got started by React Router team and then got picked up by Shopify. Looks like Shopify is pretty invested in Remix, so if you want to be a Shopify developer, you definitely need to learn Remix.
However, if you don’t care much about Shopify development, it is still a good idea to look into Remix framework. I think it has a few great features such as:
- Enhanced Developer Experience
- Optimized Performance
- Data Loading Strategies
- Built-in Routing
- TypeScript Support
Remix also has this cool idea of nested routes that behave sorta independently and can be seen as an alternative to micro-frontends.
To make developer’s life easier Remix team created stacks – preconfigured started templates. They come preconfigured with
- Database
- Automatic deployment pipelines
- Authentication
- Testing
- Linting/Formatting/TypeScript
There are 3 official stacks: Blues, Indie, and Grunge. We are going to take a look at Indie stack. It has “production ready SQLite database”. The only time I used SQLite in memory database was to run tests in Laravel application. However it didn’t scale well. When the application started growing, the types of SQLite test database and MySQL application database started to mismatch. And keeping both migration sets was too much of work. It was much easier to just use repository pattern an mock database responses.
Well, enough talk. Let’s get started.
Add MySQL to Remix JS Project
npx create-remix@latest --template remix-run/indie-stack
Next, let’s create mysql database remix_indie
In the .env file of the project let’s update DATABASE_URL variable to the following:
DATABASE_URL="mysql://root:secret@127.0.0.1:33061/remix_indie"
Next, let’s go to prisma folder in the project and delete migrations folder and data.db file.
In schema.prisma let’s put provider as mysql instead of sqlite
in command line let’s run
npx prisma migrate dev
npm run dev
Conclusion
Remix team did a great job in configuring the stack and it was easy to switch from SQLite to MySQL. Indie stack uses Prisma ORM. However if you prefer Sequelize instead, check out our video on how to use sequelize with typescript in node js project. Thank you for watching and I will see you in the next video.
