If you are managing an application that has a staging version, you will need to point default_url_options[:host] to the correct host domain. If not, features that depend on host domains(i.e. uploading to cloudinary or sending out an email from your application)will not work.

# application_controller.rb
def set_default_url_option
  if ENV["HOST"]
    {host: ENV["HOST"]}
  elsif Rails.env.production?
    {host: 'https://app-name.com'}
  else
    {:host => "localhost", :port => "3000"}
  end
end

Set env variable in your staging app

heroku config:set --app app_name_staging HOST="https://staging.app-name.com"

I recently had a job interview for a Junior Rails role with a company. I was tasked to complete one of three exercises, one of which was a to-do list. I decided to utilize hotwire in order to expand my understanding of it.

I’m working on a Rails 6 project that is still dependent on sprockets. Which means I am often clobbering and precompiling when cleaning up on CSS styling. Setting up aliases help me save time.

alias rap='bin/rails assets:precompile && bin/rails s'
alias rac='bin/rails assets:clobber && bin/rails assets:precompile && bin/rails s'

Update–

You might not have to clobber and pre-compile. It may be an issue with a webpacker dependency. To fix, try deleting public/packs and public/assets.

I’ve been tinkering with request.js and it’s quite magical. From the client, we can make make typical REST requests get, post, put, patch, destroy. We can even deliver a turbo-stream response. By adding responseKind: "turbo-stream" to the options config, you can receive some_action.turbo_stream.erb. When hooked with a stimulus controller, the implementation is easier than you would imagine.

<!-- pages/index.html.erb -->
<div class="flex flex-col" data-controller="activity">
  <div>
    What would you like to do?
    <%= select_tag "activity",
                   options_for_select(@options),
                   { include_blank: true,
                     data: { activity_target: "input",
                             url: what_to_do_path,
                             action: "change->activity#select" } } %>
  </div>
  <div>
    <div data-activity-target="loading" class="hidden">Loading...</div>
    <%= turbo_frame_tag "option" %>
  </div>
</div>

In the stimulus controller I import get from the request.js library. When a change event is triggered on the select tag, select() makes a get request. Notice how I use new URLSearchParams to append the param to the url. You can also return a Promise object with your request.

// javascript/controllers/activity_controller.js
import { Controller } from "@hotwired/stimulus"
import { get } from "@rails/request.js"

export default class extends Controller {
  static targets = [ "loading", "input" ]

  select(event) {
    let url = this.inputTarget.dataset.url
    let body = document.getElementById("option")
    let params = new URLSearchParams()
    params.append("option", this.inputTarget.value)


    this.loadingTarget.classList.remove("hidden")
    body.textContent = ""

    const request = get(`${url}?${params}`, { responseKind: "turbo-stream" })
    request.then((response) => {
      this.loadingTarget.classList.add("hidden")
    })
  }
}

From the controller, in your respond_to specify the turbo_stream format.

# controllers/pages_controller.rb
def what_to_do
  @result = params[:option]
  sleep 0.5
  respond_to do |format|
    format.turbo_stream
  end
end

And finally, deliver HTML over the wire with your turbo_stream ☺︎

# views/pages/what_to_do.turbo_stream.erb
<%= turbo_stream.replace "option" do %>
  <%= turbo_frame_tag "option" do %>
    <% unless @result.blank? %>
      Then you should <%= @result.downcase %>!
    <% end %>
  <% end %>
<% end %>

A really simple way to apply dark mode on your webpage is including a CSS media query. The browser checks the users system display settings and sets accordingly. ☺︎

@media (prefers-color-scheme: dark) {
  body { background: black; color: white; }
  h1, h2, h3 { @apply text-yellow-500 }
  a { @apply text-yellow-500 hover:text-yellow-600 }
}