An ambitious crossover that nobody asked for. Feel free to clone and test the repo:
git clone https://github.com/lnfel/rails-react-tailwind.git
see live sample at Heroku
Create new rails app:
$ rails new my-app
$ cd my-app
Add webpacker and react-rails to your gemfile:
gem 'webpacker'
gem 'react-rails'
Note: on Rails 6.x webpacker is already included.
Now run the installers:
$ bundle install
$ rails webpacker:install
$ rails webpacker:install:react
$ rails generate react:install
Generate your first component:
$ rails g react:component HelloWorld greeting:string
Generate controller and a view:
$ rails generate controller Site index
Render it in a Rails view:
<!-- app/views/site/index.html.erb -->
<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>
Set route:
<!-- config/routes.rb -->
root 'site#index'
Let's start the app:
$ rails s
Output: greeting: "Hello from react-rails", inspect webpage in your browser too see change in tag props.
Make the app production ready:
move sqlite3 gem inside development and test group
<!-- Gemfile -->
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
# Put sqlite3 here
gem 'sqlite3', '1.4.2'
end
then add pg gem
gem 'pg'
change production settings
<!-- config/database.yml -->
production:
adapter: postgresql
database_url: <%= ENV['DATABASE_URL'] %>
secret_key_base: <%= ENV['SECRET_KEY_BASE'] %>
rails_master_key: <%= ENV['RAILS_MASTER_KEY'] %>
encoding: unicode
pool: 5
Push the repo to Github and deploy the app to Heroku.
If you only need react for rails, you're good to go. To integrate tailwind for your app, follow the next steps
Intall tailwind using yarn:
$ yarn add tailwindcss
Include tailwindcss in postcss.config.js:
<!-- postcss.config.js -->
module.exports = {
plugins: [
// ...
require('tailwindcss')('./app/javascript/stylesheets/tailwind.js'),
require('autoprefixer'),
// ...
]
}
Setup tailwind for rails:
Create a folder named "stylesheets" in app/javascript then create "application.scss" inside stylesheets folder
<!-- app/javascript/stylesheets/application.scss -->
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Load application.scss:
<!-- app/javascript/packs/application.js -->
require("stylesheets/application.scss")
Change stylesheet_link_tag to stylesheet_pack_tag
<!-- app/views/layouts/application.html.erb -->
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
Create a file named "tailwind.config.js" in app/javascript/stylesheets
then paste this code:
module.exports = {
theme: {
extend: {}
},
variants: {},
plugins: []
}
Try using tailwind utility classes on app/views/site/index.html.erb
Finally run the app:
$ rails s
Push the repo to Github and deploy the app to Heroku.