DEV Community

Cover image for A quick start guide to creating an app with Preact, TypeScript and Ruby on Rails
Emma Goto 🍙
Emma Goto 🍙

Posted on • Originally published at emgoto.com on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

rails --version
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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",
    //...
}
Enter fullscreen mode Exit fullscreen mode

Then add a lint script to your package.json:

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

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'
    ],
};
Enter fullscreen mode Exit fullscreen mode

Install Preact

yarn add preact
Enter fullscreen mode Exit fullscreen mode

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

plugins: [
    ["transform-react-jsx", { "pragma": "h" }],
]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Rails.application.routes.draw do
    root to: 'hello#home'
end
Enter fullscreen mode Exit fullscreen mode

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);
});
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Top comments (4)

Collapse
 
jovidecroock profile image
Jovi De Croock • Edited

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!

Collapse
 
emma profile image
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.

Collapse
 
_pinhaum profile image
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

Collapse
 
emma profile image
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!