A quick start guide to creating an app with Preact, TypeScript and Ruby on Rails

After following this guide, you will have created a "Hello world" application that uses Preact, TypeScript and Ruby on Rails. We'll also be installing ESLint!

Installing prerequisites - ruby and sqlite3

Make sure you have installed rbenv and Ruby:

brew install rbenv

ruby --version

# if your version of Ruby is old:
rbenv install 2.7.0
rbenv rehash
rbenv global 2.7.0

You'll most likely have sqlite3 already installed (check using sqlite3 --version) but if you don't you can download it from the SQLite download page.

Installing Ruby on Rails

Then install Ruby on Rails:

gem update --system
gem install bundler
RBENV_VERSION=2.7.0 rbenv exec gem install rails --version 6.0.2.1

Once installed, open a new terminal window and double-check that it was successfully installed:

rails --version

Create your Ruby on Rails app with React

Since there isn't Preact boilerplate code available, I found it much easier to get started with React and then switch it out for Preact afterwards.

rails new <APP_NAME> --webpack=react

Add TypeScript and ESLint

bundle exec rails webpacker:install:typescript
yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-preact @types/webpack-env
yarn add babel-plugin-transform-react-jsx

Make sure to update all of your JavaScript files to end with .ts and .tsx!

If your code is rendering a Preact component you'll want it to end in .tsx. If it's just a util file with some functions in it, then you only need .ts (but you can still just use .tsx and it will work fine)

Add the following line in tsconfig.json:

"compilerOptions": {
    "jsxFactory": "h",
    //...
}

Then add a lint script to your package.json:

"scripts": {
    "lint": "eslint app/javascript/**/*.ts[x]"
}

Also make sure to create a .eslintrc.js file in your root folder and add the following:

module.exports = {
    root: true,
    parser: '@typescript-eslint/parser',
    plugins: [
        '@typescript-eslint',
    ],
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/eslint-recommended',
        'plugin:@typescript-eslint/recommended',
        'preact'
    ],
};

Install Preact

yarn add preact

And add the the following to the plugin section of your babel.config.js file:

plugins: [
    ["transform-react-jsx", { "pragma": "h" }],
]

Now that you've got Preact, you can also delete react and react-dom from your dependencies in your package.json file.

Create your first controller

Create your first controller. I've named mine hello:

rails generate controller hello

This will create a file for you called app/controllers/hello_controller.rb. Add the following code to it:

class HelloController < ApplicationController
    def home
    end    
end

Then add this new controller you've created to config/routes.rb:

Rails.application.routes.draw do
    root to: 'hello#home'
end

Switch out any React references for Preact

When we first created this app, a app/javascript/packs/hello_react.tsx file will have been created for us. Rename this to hello_preact.tsx, and switch out its contents for a Preact component:

import { render, h } from 'preact';

const Hello = () => (
    <div>Hello world!</div>
)

document.addEventListener('DOMContentLoaded', () => {
    render(<Hello />, document.body);
});

And finally, we need to add our new Preact component to app/views/hello/home.html.erb

<%= javascript_pack_tag 'hello_preact' %>

<h1>Hello world!</h1>

Starting things up

Finally, we can run these two commands to start up our Preact + Rails app:

rails s --binding=127.0.0.1
./bin/webpack-dev-server

And voila! 🎉 You should now have a "Hello world" app that uses Preact and Ruby on Rails.

---

I struggled to find good documentation online to help me get started with this stack, so I hope this guide has helped you if you were facing the same difficulties.

Happy coding!

References

Getting Started with Rails

Rails: Install Rails 5.2.3 with rbenv

typescript-eslint

Comments

[Jovi De Croock]

Hey Emma,

One of the preact-members here, thanks for this awesome piece. Heard loud and clear, we'll try to improve the getting started, at this moment we have preact-cli to get started which handles the webpack, ... I'll see if I can also start a boilerplate project in the near future. I don't know how this will extend to ruby though 😅

Enjoyed this piece!

[Emma Goto 🍙]

Hi Jovi, thanks so much! I don't think this was necessarily a Preact or preact-cli problem, it was more a problem of trying to get it set up and integrated with Ruby on Rails (plus the Typescript).

I've only dabbled a little bit in Preact so far and I think the biggest downside for me at the moment (versus React) is that when you Google stuff it's a lot harder to find the answers - but as I figure things out I want to try and blog about them to make things easier for the next developer who faces the same issues.

[Gabriel]

Hi Emma!
Thanks for the amazing content!
I'm new to preact and I'm trying to learn it with rails, and I have a question for you
when you say "Make sure to update all of your JavaScript files to end with .ts and .tsx!", which files do you mean? and which are '.ts' or '.tsx'

again, thanks for the amazing content <3

[Emma Goto 🍙]

You should see some sort of "hello world" files inside of app/javascript, and they might be initially created as a .js file. Since you're switching to using TypeScript, you'll need to update those files to get TypeScript to work properly.

If your code is rendering a Preact component you'll want it to end in .tsx, if you have a file that only has some functions (e.g. a util file) then you'll need .ts.

Hope that helps!