Setting up Rails 7 for TypeScript and React
Rails 7 has been released recently, introducing quite a significant front-end mechanics revamp. Webpacker has been retired, and DHH now makes many compelling arguments in favor of a no-Node approach.
Well, maybe it'll get us somewhere someday, but at the moment, almost all of us prefer our TypeScript and/or JSX compiled to continue delivering quality stuff.
If you're not ready to embark on this delightful "no-transpiling" journey quite yet, there's a plan B.
In this article, we'll discuss how to set up Rails 7 for TypeScript and React, and we'll use the magnificent esbuild builder for that (Yay!).
The good news is that esbuild does all the heavy lifting for us. TypeScript and JSX are supported out of the box. All we need to do is employ the jsbundling-rails gem.
We can install it along with a new rails app (using the
-j esbuild flag), or if upgrading:
- By adding
jsbundling-railsgem in Gemfile and running
- And then running
The last command will install esbuild, and add this command into
It's very straightforward. It takes the files from the
app/assets/builds where they get picked up by the asset pipeline.
There's also the
Procfile.dev file, which is used to run several commands at once (using foreman). Just remember to start your app with
./bin/dev instead of the
./bin/rails server. It will run both rails server and the esbuild.
application.tsx, put some JSX into it, and you're done.
Include the file into the view with
Super-simple, and it's also super fast thanks to esbuild.
Getting TypeScript errors
esbuild compiling is unbelievably fast, but it doesn't do any type-checking. We can still run it separately from the command line with something along these lines:
tsc --project tsconfig.json --noEmit
I prefer adding that into
project.json script and into the
Note the last flag
--preserveWatchOutput. It prevents
tsc from automatically clearing the screen and blowing up the whole foreman output.
Then add it to the
types: yarn ts-check
This setup is what works for me at the moment. I imagine, in the meantime, more tools and gems emerge, providing better Rails integration, but so far, I'm pretty pleased with the ability to use esbuild.
This setup is what works for me right now. I imagine, in the meantime more tools and gems emerge providing better Rails intergration, but so far I'm pretty pleased with ability to use esbuild.
Read this blog post for live-reloading.