Installation and Configuration

How to install and configure both the Ruby GEM and NPM package

01

Add the GEM to your Gemfile

$ command line
bundle add turbo_boost-commands

The command above adds this to the Gemfile.

Gemfile
gem "turbo_boost-commands", "~> 0.0.13"
02

Add the NPM packages to your package.json file

$ command line
yarn add @turbo-boost/streams@$(bundle show turbo_boost-streams | ruby -ne 'puts $_.split(/-/).last')
yarn add @turbo-boost/commands@$(bundle show turbo_boost-commands | ruby -ne 'puts $_.split(/-/).last')

The command above adds this to package.json.

package.json
{
  "dependencies": {
    "@turbo-boost/streams": "^0.0.8",
    "@turbo-boost/commands": "^0.0.13"
  }
}
$ command line
bin/importmap pin add @turbo-boost/streams@$(bundle show turbo_boost-streams | ruby -ne 'puts $_.split(/-/).last')
bin/importmap pin @turbo-boost/commands@$(bundle show turbo_boost-commands | ruby -ne 'puts $_.split(/-/).last')

The command above adds this to importmap.rb.

config/importmap.rb
pin "@turbo-boost/streams", to: "https://ga.jspm.io/npm:@turbo-boost/streams@0.0.8/app/javascript/turbo_boost-streams.js"
pin "@turbo-boost/commands", to: "https://ga.jspm.io/npm:@turbo-boost/commands@0.0.13/app/javascript/turbo_boost-commands.js"
03

Configure your JavaScript app

app/javascript/application.js
import '@hotwired/turbo-rails'
import '@turbo-boost/streams'  // <-- add this line
import '@turbo-boost/commands' // <-- add this line

// set the log level [optional]
//
//   - unknown (default)
//   - debug
//   - info
//   - warn
//   - error
//
TurboBoost.Commands.logger.level = 'debug' // <-- add this line [optional]
04

Configure your Rails app

app/views/layouts/application.html.erb
<html>
  <head>
    <%= turbo_boost.meta_tag # <-- add this line %>
  </head>
  <body>
  </body>
</html>
config/initializers/turbo_boost.rb
# frozen_string_literal: true

# NOTE: this line is only required by the test/dummy app, regular apps will not need this
require "turbo_boost/streams"

# Configuration can be accessed multiple ways.
# All options return the same configuration object.
#
# - TurboBoost::Commands.config
# - Rails.application.config.turbo_boost_commands
#
# Options:
# - apply_client_state_overrides, opt-(in/out) of client state overrides (false)
# - apply_server_state_overrides, opt-(in/out) of server state overrides (false)
# - max_cookie_size, Max size for the state management cookie in bytes (ActionDispatch::Cookies::MAX_COOKIE_SIZE / 3)
# - validate_client_token, opt-(in/out) of client token validation (false)
#
TurboBoost::Commands.config.tap do |config|
  config.apply_client_state_overrides = false
  config.apply_server_state_overrides = false

  # NOTE: We're being extra cautious with cookie size by targeting a max of 4 kilobytes for ALL cookies across the domain.
  # SEE: http://browsercookielimits.iain.guru/
  # SEE: https://stackoverflow.com/questions/52203972/maximum-cookie-size-of-current-browsers-year-2018
  config.max_cookie_size = 1.kilobyte

  config.validate_client_token = false
end

That's it! You're ready to start using TurboBoost Commands. 🙌

Was this helpful?

I hope TurboBoost helps you get better at Hotwire while teaching you some cool new tricks... because this stuff is fun and addictive. Check out the test/dummy app on GitHub to see how this site was made, and please consider supporting my efforts.

Sponsor TurboBoost