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!
Top comments (4)
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!
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.
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
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!