Rails, Typescript, and Webpacker
I’m a big proponent of Typescript. It has some great features like type saftey, classes, decorators, and sophisticated editor integration. With the webpacker gem adding typescript to your project is extremely simple.
Installing Webpacker 3.2#
You’ll find the most up to date instructions on the repository README, however I’ll walk you through the steps as they exist at the time of writing.
The easiest way is to start a new project.
rails new my_application --webpack
However, since that’s not always feasible you can add it to an existing project.
# Gemfile gem 'webpacker', '~> 3.2'
and then run
bundle bundle exec rails webpacker:install # OR (on rails version < 5.0) bundle exec rake webpacker:install
You’ve got the gem installed so now let’s install typescript
bundle exec rails webpacker:install:typescript # OR (on rails version < 5.0) bundle exec rake webpacker:install::typescript
Once you’ve run the installation command you won’t be able to actually use typescript until you include the webpacker helper tags in your project.
It’s important to note that
application is referring to the file in the
In the case of typescript there will be a
hello_typescript.ts file that is generated that you can refer to that to ensure your project works.
Another thing that might throw you off is that if you don’t have a controller or view and simply run the server it the “Welcome to Rails” default landing page doesn’t load the
If you stick the pack tags in
application.html.erb page and are simply using the landing page you will not see any console output.
For new applications this just means you need to generate a dummy controller in order to see the result.
rails g controller home
Modify the newly created controller
class HomeController < ApplicationController def index end end
Modify the routes
#config/routes.rb Rails.application.routes.draw do get 'home/index' end
Create an index page -
Load the localhost:3000/home/index page.
React, Vue, and Angular#
Webpacker has a great guide on how to use typescript with your UI framework of choice. There’s detailed steps for React, Vue, and Angular.