A follow up to show how we fixed our S3 cost blow out caused by Data Transfer Out of AWS to Fly.io

--

Subscribe to our Podcast:

YouTube
https://www.youtube.com/@initium-clips

Spotify
https://open.spotify.com/show/4Znpm8ST33x3NQ1mfRyi2H

Follow along to watch us build a Rails / SaaS / B2C app from the ground up.

Clipflow.co
https://www.clipflow.co

Twitter
Darrell - https://twitter.com/craftbuildcut
Ken - https://twitter.com/kennnG

A follow up to show how we fixed our S3 cost blow out

How We Fixed our AWS Bill Blow Out

In this video we will add attributes and links to the listing page and then implement a model to track the click throughs to those links to store data which we can use for analytics later.

In this series I will build a new directory for a luxury accommodation website. We are going to use Rails + Hotwire + ViewComponents + Stimulus.

GitHub Repo
https://github.com/kengreeff/luxury-stays

--

Subscribe to our Podcast:

YouTube
https://www.youtube.com/@initium-clips

Spotify
https://open.spotify.com/show/4Znpm8ST33x3NQ1mfRyi2H

Follow along to watch us build a Rails / SaaS / B2C app from the ground up.

Clipflow.co
https://www.clipflow.co

Twitter
Darrell - https://twitter.com/craftbuildcut
Ken - https://fllw.li/tU1sH_vx5s_4

In this video we will add attributes and links to the listing page

Tracking Link Clicks for Outbound Analytics - Part 11

After receiving quite a shock from an AWS billing notification we jumped in to the console to determine what was going on. It turned out we were getting absolutely smashed by data transfer out of AWS to Fly.io even though we only had a handful of very active users. This would obviously not scale so we had to figure out a solution and quickly.

--

Subscribe to our Podcast:

YouTube
https://www.youtube.com/@initium-clips

Spotify
https://open.spotify.com/show/4Znpm8ST33x3NQ1mfRyi2H

Follow along to watch us build a Rails / SaaS / B2C app from the ground up.

Clipflow.co
https://www.clipflow.co

Twitter
Darrell - https://twitter.com/craftbuildcut
Ken - https://twitter.com/kennnG

After receiving quite a shock from an AWS billing notification we jumped in to the console to determine what was going on

AWS Data Transfer Costs Can Bankrupt You

Adding full text search to our Rails directory so that we can search listings and places using the pg_search Gem

In this series I will build a new directory for a luxury accommodation website. We are going to use Rails + Hotwire + ViewComponents + Stimulus.

GitHub Repo
https://github.com/kengreeff/luxury-stays

PG Search
https://github.com/Casecommons/pg_search

Blog Articles
https://thoughtbot.com/blog/full-text-search-with-postgres-and-action-text
https://pganalyze.com/blog/full-text-search-ruby-rails-postgres

Postgresql Text Search Docs
https://www.postgresql.org/docs/current/datatype-textsearch.html

--

Subscribe to our Podcast:

YouTube
https://www.youtube.com/@initium-clips

Spotify
https://open.spotify.com/show/4Znpm8ST33x3NQ1mfRyi2H

Follow along to watch us build a Rails / SaaS / B2C app from the ground up.

Clipflow.co
https://www.clipflow.co

Twitter
Darrell - https://twitter.com/craftbuildcut
Ken - https://twitter.com/kennnG

Adding full text search to our Rails directory so that we can search listings

Adding Full Text Search to Rails Directory - Part 10

In this episode we will setup the listing detail page where we will show the main image, gallery and details about the listing.

In this series I will build a new directory for a luxury accommodation website. We are going to use Rails + Hotwire + ViewComponents + Stimulus.

GitHub Repo
https://fllw.li/b1dQyPg52p5t

--

Follow along to watch us build a Rails / SaaS / B2C app from the ground up.

Clipflow.co
https://www.clipflow.co

Twitter
Darrell - https://fllw.li/dTTR5spyvV1p
Ken - https://fllw.li/PtL6qAExzLaD

Subscribe to our Podcast:

YouTube
https://fllw.li/iC7CpCWivTgT

Spotify
https://fllw.li/uxkDsMUxFWyg

In this episode we will setup the listing detail page where we will show the main image, gallery and details about the listing.

Creating View Components for Listing Detail Page in Rails

Adding image upload functionality using the Uppy package with ActiveStorage in Rails so that we can attach images to our Listings and Places.

In this series I will build a new directory for a luxury accommodation website. We are going to use Rails + Hotwire + ViewComponents + Stimulus.

GitHub Repo
https://github.com/kengreeff/luxury-stays

Uppy
https://uppy.io/

--

Follow along to watch us build a Rails / SaaS / B2C app from the ground up.

Clipflow.co
https://www.clipflow.co

Twitter
Darrell - https://twitter.com/craftbuildcut
Ken - https://twitter.com/kennnG

Subscribe to our Podcast:

YouTube
https://www.youtube.com/@initium-clips

Spotify
https://open.spotify.com/show/4Znpm8ST33x3NQ1mfRyi2H

Adding image upload functionality using Uppy and ActiveStorage

Image Uploads with Uppy & ActiveStorage in Rails - Part 8

Adding CRUD (Create, Read, Update & Destroy) endpoints for listings, setting user default organizations and displaying listings on home page.

In this series I will build a new directory for a luxury accommodation website. We are going to use Rails + Hotwire + ViewComponents + Stimulus.

GitHub Repo
https://github.com/kengreeff/luxury-stays

--

Subscribe to our Podcast:

YouTube
https://www.youtube.com/@initium-clips

Spotify
https://open.spotify.com/show/4Znpm8ST33x3NQ1mfRyi2H

Follow along to watch us build a Rails / SaaS / B2C app from the ground up.

Clipflow.co
https://www.clipflow.co

Twitter
Darrell - https://twitter.com/craftbuildcut
Ken - https://twitter.com/kennnG

Adding CRUD (Create, Read, Update & Destroy) endpoints for listings

Adding Listings to Home Page in Rails Directory - Part 7

Adding CRUD (Create, Read, Update & Destroy) endpoints for Places as well as locking them down to prevent unauthorised access using pundit policies.

In this series I will build a new directory for a luxury accommodation website. We are going to use Rails + Hotwire + ViewComponents + Stimulus.

GitHub Repo
https://github.com/kengreeff/luxury-stays

--

Subscribe to our Podcast:

YouTube
https://www.youtube.com/@initium-clips

Spotify
https://open.spotify.com/show/4Znpm8ST33x3NQ1mfRyi2H

Follow along to watch us build a Rails / SaaS / B2C app from the ground up.

Clipflow.co
https://www.clipflow.co

Twitter
Darrell - https://twitter.com/craftbuildcut
Ken - https://twitter.com/kennnG

Adding CRUD endpoints for Places as well as locking them down to prevent unauthorised access using pundit policies.

Setting up secure CRUD endpoints for Places in Rails Directory - Part 6

Seeding entities and setting up new components required for the authenticated user dashboard.

In this series I will build a new directory for a luxury accommodation website. We are going to use Rails + Hotwire + ViewComponents + Stimulus.

GitHub Repo
https://github.com/kengreeff/luxury-stays

--

Subscribe to our Podcast:

YouTube
https://www.youtube.com/@initium-clips

Spotify
https://open.spotify.com/show/4Znpm8ST33x3NQ1mfRyi2H

Follow along to watch us build a Rails / SaaS / B2C app from the ground up.

Clipflow.co
https://www.clipflow.co

Twitter
Darrell - https://twitter.com/craftbuildcut
Ken - https://twitter.com/kennnG

Seeding entities and setting up new components required for the authenticated user dashboard.

Seeding Data and Creating Dashboard Components for Rails Directory (From Scratch) - Part 5

In this series I will build a new directory for a luxury accommodation website. We are going to use Rails + Hotwire + ViewComponents + Stimulus.

GitHub Repo
https://github.com/kengreeff/luxury-stays

--

Subscribe to our Podcast:

YouTube
https://www.youtube.com/@initium-clips

Spotify
https://open.spotify.com/show/4Znpm8ST33x3NQ1mfRyi2H

Follow along to watch us build a Rails / SaaS / B2C app from the ground up.

Clipflow.co
https://www.clipflow.co

Twitter
Darrell - https://twitter.com/craftbuildcut
Ken - https://twitter.com/kennnG

Setting up the management dashboard to allow authenticated users to add listings.

Management Dashboard for Rails Directory (From Scratch) - Part 4

In this series I will build a new directory for a luxury accommodation website. We are going to use Rails + Hotwire + ViewComponents + Stimulus.

GitHub Repo
https://fllw.li/e_cVjoJxfucH

--

Subscribe to our Podcast:

YouTube
https://fllw.li/S95FVzxBQUQP

Spotify
https://fllw.li/3r88XzTRKXZk

Follow along to watch us build a Rails / SaaS / B2C app from the ground up.

Clipflow.co
https://www.clipflow.co

Twitter
Darrell - https://fllw.li/7XahjnuiJpzY
Ken - https://fllw.li/okfpSixkm4oE

In this episode we will setup View Components and build the landing page skeleton.

Rails Directory (From Scratch) - Components & Landing Page - Part 3

In this series I will build a new directory for a luxury accommodation website. We are going to use Rails + Hotwire + ViewComponents + Stimulus.

GitHub Repo
https://github.com/kengreeff/luxury-stays

--

Subscribe to our Podcast:

YouTube
https://www.youtube.com/@initium-clips

Spotify
https://open.spotify.com/show/4Znpm8ST33x3NQ1mfRyi2H?si=db942ae2918e43d8

Follow along to watch us build a Rails / SaaS / B2C app from the ground up.

Clipflow.co
https://www.clipflow.co

Twitter
Darrell - https://twitter.com/craftbuildcut
Ken - https://twitter.com/kennnG

In this series I will build a new directory for a luxury accommodation website. We are going to use Rails + Hotwire + ViewComponents + Stimulus.

Rails Directory (From Scratch) - Part 2 - Authentication + Authorization

Luxury Accommodation Directory with Rails (From Scratch) - Part 1

# Create New Rails App

Make sure you have setup Rails. You can read the guide here:

<https://guides.rubyonrails.org/getting_started.html>

Before we being make sure we are running node version 18 or above:

```
nvm use 18
```

Create our new app `rails-view-components`

```
rails new rails-stimulus-demo --css=tailwind --javascript=esbuild
cd rails-stimulus-demo
```

Spin up the server to test everything is running:

```
./bin/dev
```

# Setup Home Controller

Create a new controller at `app/controllers/home_controller.rb` 

```
class HomeController < ApplicationController
  def index
  end
end
```

Create the view `app/views/home/index.html.erb`

```
Hello World
```

Set it as the default route `config/routes.rb` 

```
root "home#index"
```

Refresh the page and we should be in business!

# Create a stimulus controller

We will create a controller that automatically grabs the YouTube ID from the share url when pasted in. We can use the rails generator to do this:

```
rails g stimulus external_platform_id
```

We can now see our newly created controller here `app/javascript/controllers/external_platform_id_controller.js`:

```
import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="external-platform-id"
export default class extends Controller {
  connect() {
  }
}
```

You can also check the `index.js` file to see that it has been registered to be loaded.

```
import YoutubeIdFieldController from "./youtube_id_field_controller"
application.register("youtube-id-field", YoutubeIdFieldController)
```

# Connect Input to Controller

In our index.html.erb file let's set up an input which will be connected to the stimulus controller:

```
<input
  class="border border-gray-300 rounded-md p-2 m-4"
  data-controller="youtube-id-field"
  type="text"
/>
```

The key piece here is the `data-controller` property. This tells stimulus which controller to use. You can add multiple controllers here by separating them with a space but we will focus on one today.

I like to sanity test to make sure we are connected properly to avoid hours of debugging!

In the connect() function add a console.log call to get the connected element:

```
import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="youtube-id-field"
export default class extends Controller {
  connect() {
    console.log(this.element)
  }
}
```

When you open up the console you should now see the element and can hover over it to highlight it in the browser.

# Extracting the YouTube ID:

In our controller add a new method/action that will extract the ID for us:

```
import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="youtube-id-field"
export default class extends Controller {
  connect() {
    console.log(this.element)
  }

  extractYoutubeId(e) {
    const { value } = e.target
    console.log(value)
  }
}
```

Then in the index.html.erb file add link the action:

```
<input
  class="border border-gray-300 rounded-md p-2 m-4"
  data-action="youtube-id-field#extractYoutubeId"
  data-controller="youtube-id-field"
  type="text"
/>
```

Now when we paste something in to the input we should see the input value being logged to the console.

Let's add the regex required to strip all of the url except the ID:

```
import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="youtube-id-field"
export default class extends Controller {
  connect() {
    console.log(this.element)
  }

  extractYoutubeId(e) {
    const { value } = e.target

    // https://youtu.be/aQuu_-R2Pwg
    // https://www.youtube.com/watch?v=aQuu_-R2Pwg
    // YOUTUBE_ID = aQuu_-R2Pwg
    const youtubeRegex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([A-Za-z0-9\-\_]+)/

    const match = value.match(youtubeRegex)
    if (match) {
      e.target.value = match[1]
    }
  }
}
```

Paste in a valid YouTube url and watch it do its magic!

<https://youtu.be/K-XQIas9Asw>

# Refactoring to use Targets

Let's setup a slightly more advanced example using targets.

Update our index.html.erb file to this:

```
<div
  class="flex gap-2 p-4"
  data-controller="external-platform-id"
>
  <input
    class="border border-gray-300 rounded-md p-2"
    data-action="external-platform-id#extractYoutubeId"
    placeholder="Paste a YouTube URL"
    type="text"
  />

  <input
    class="border border-gray-300 rounded-md p-2"
    data-external-platform-id-target="idField"
    type="text"
  />
</div>
```

We will allow the user to paste in one field and show the extracted ID in the other.

We defined the targets using the following:

```
static targets = ["idField"]
```

This matches the data attribute in the HTML:

```
data-external-platform-id-target="idField"
```

We can check that we have the target registered by using the naming convention `this.has[Name]Target` :

```
this.hasIdFieldTarget
```

Our updated controller looks like this:

```
import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="external-platform-id"
export default class extends Controller {
  static targets = ["idField"]

  extractYoutubeId(e) {
    const { value } = e.target

    // https://youtu.be/aQuu_-R2Pwg
    // https://www.youtube.com/watch?v=aQuu_-R2Pwg
    // YOUTUBE_ID = aQuu_-R2Pwg
    const youtubeRegex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([A-Za-z0-9\-\_]+)/

    const match = value.match(youtubeRegex)
    if (match && this.hasIdFieldTarget) {
      this.idFieldTarget.value = match[1]
    }
  }
}
```

Now when we paste the url in the field we get the ID in the other.

# Using Values

We can add values to our controller like so:

```
<div
  class="flex gap-2 p-4"
  data-controller="youtube-id-field"
  data-youtube-id-field-platform-value="youtube"
>
  <input
    class="border border-gray-300 rounded-md p-2"
    data-action="youtube-id-field#extractYoutubeId"
    placeholder="Paste a YouTube URL"
    type="text"
  />

  <input
    class="border border-gray-300 rounded-md p-2"
    data-youtube-id-field-target="idField"
    type="text"
  />
</div>
```

We have added a value for `platform` and set it to `youtube` we can use this to add more functionality in the future if required.

Add it to the stimulus controller here:

```
static values = {
  platform: String
}
```

We can access the value using `this.platformValue` 

Let's update our controller to support this:

```
import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="youtube-id-field"
export default class extends Controller {
  static targets = ["idField"]
  static values = {
    platform: String
  }

  extractPlatformId(e) {
    const { value } = e.target

    if (this.platformValue === "youtube") {
      // https://youtu.be/aQuu_-R2Pwg
      // https://www.youtube.com/watch?v=aQuu_-R2Pwg
      // YOUTUBE_ID = aQuu_-R2Pwg
      const youtubeRegex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([A-Za-z0-9\-\_]+)/

      const match = value.match(youtubeRegex)
      if (match && this.hasIdFieldTarget) {
        this.idFieldTarget.value = match[1]
      }
    }
  }
}
```

And then just update the html:

```
<div
  class="flex gap-2 p-4"
  data-controller="youtube-id-field"
  data-youtube-id-field-platform-value="youtube"
>
  <input
    class="border border-gray-300 rounded-md p-2"
    data-action="youtube-id-field#extractPlatformId"
    placeholder="Paste a YouTube URL"
    type="text"
  />

  <input
    class="border border-gray-300 rounded-md p-2"
    data-youtube-id-field-target="idField"
    type="text"
  />
</div>
```

When we change the platform value in the html to something else we will see the code is no longer called. This is useful when you want to set values using data from rails to control how controllers function.

# Conclusion

Hopefully that gave you a very basic intro in to Stimulus and the Hotwire suite of tools for Rails. If you want me to dive deeper and show you more complex examples please drop a comment below.

In this video I will walk through how to use Stimulus in a Rails application. I talk about some of the differences in the mental model when you have come from a javascript framework like React.

Getting Started with Stimulus in Rails (The Basics)

# Create new Rails App

Make sure you have setup Rails. You can read the guide here:

<https://guides.rubyonrails.org/getting_started.html>

Before we being make sure we are running node version 18 or above:

```
nvm use 18
```

Create our new app `rails-view-components`

```
rails new rails-view-components --css=tailwind --javascript=esbuild
cd rails-view-components 
```

Spin up the server to test everything is running:

```
./bin/dev
```

# Install ViewComponent gem

<https://evilmartians.com/chronicles/viewcomponent-in-the-wild-supercharging-your-components>

Next we will install the super handy package from Evil Martians that make working with components even better. It will install both the gems we need to continue:

```
rails app:template LOCATION="https://railsbytes.com/script/zJosO5"
```

Step through the installer. I like to keep components in the views directory.

```
Where do you want to store your view components? (default: app/frontend/components) app/views/components
Would you like to use dry-initializer in your component classes? (y/n) y
Do you use Stimulus? (y/n) y
Do you use TailwindCSS? (y/n) y
Would you like to create a custom generator for your setup? (y/n) y
Which template processor do you use? (1) ERB, (2) Haml, (3) Slim, (0) Other 1
```

Most of the above is pretty straight forward except for the dry-initializer gem:

<https://dry-rb.org/gems/dry-initializer/3.1/>

# Update controller views location

To keep things tidy we will add controller views in to their own directory.

```
views/
  components/
  layouts/
  controllers/
    my_controller/
      index.html.erb
  mailers/
    my_mailer/
      message.html.erb
```

Add the following to `app/controllers/application_controller.rb`

```
append_view_path Rails.root.join("app", "views", "controllers")
```

Do the same for `app/mailers/application_mailer.rb`

```
append_view_path Rails.root.join("app", "views", "mailers")
```

# Modify Generator

I like to skip the tests and preview file until I need them. We can do this by modifying the generator `lib/generators/view_component/view_component_generator.rb`:

```
class_option :skip_test, type: :boolean, default: true
class_option :skip_system_test, type: :boolean, default: true
class_option :skip_preview, type: :boolean, default: true
```

I also like to remove the `with_collection_parameter` from the template as I dont use it. Remove it from the file `lib/generators/view_component/templates/component.rb.tt`:

```
with_collection_parameter :<%= singular_name %>
```

# Create our first component

Let's create a basic button component to test this out:

```
rails g view_component Button
```

# Add a controller endpoint

We need a place to render our cool new button. Let's setup a controller in `app/controllers` called `marketing_controller.rb`

```
class MarketingController < ApplicationController
  def index
  end
end
```

This will need a view to render so create one in `app/views/controllers/marketing/index.html.erb` 

```
<%= render(Button::Component.new) %>
```

We also need to add our route in `config/routes.rb`

```
root "marketing#index"
```

When you start up the server again you should see our awesome component!

# Add Helper

We will add a helper to make rendering components a bit simpler and easier on the eyes

Add the following to `app/helpers/application_helper.rb`

```
def component(name, *args, **kwargs, &block)
  component = name.to_s.camelize.constantize::Component
  render(component.new(*args, **kwargs), &block)
end
```

We can now update our component render code:

```
<%= component("Button") %>
```

This helper makes it easy to render nested components like this:

```
<%= component("Button/Nested/Item", prop: "Test") %>
```

Update the base class `app/views/components/application_view_component.rb` to allow usage of helpers in the components:

```
class ApplicationViewComponent < ViewComponentContrib::Base
  extend Dry::Initializer

  include ApplicationHelper
end
```

# Load Stimulus Controllers

First, install the js package esbuild-rails to easily load stimulus controllers:

```
yarn add esbuild-rails
```

Setup the `esbuild.config.mjs` file:

```
#!/usr/bin/env node
// Requires esbuild 0.17+
//
// Esbuild is configured with 3 modes:
//
// `yarn build` - Build JavaScript and exit
// `yarn build --watch` - Rebuild JavaScript on change
// `yarn build --reload` - Reloads page when views, JavaScript, or stylesheets change
//
// Minify is enabled when "RAILS_ENV=production"
// Sourcemaps are enabled in non-production environments

import * as esbuild from "esbuild"
import path from "path"
import rails from "esbuild-rails"
import chokidar from "chokidar"
import http from "http"
import { setTimeout } from "timers/promises"

const clients = []
const entryPoints = [
  "application.js"
]
const watchDirectories = [
  "./app/javascript/**/*.js",
  "./app/views/**/*.html.erb",
  "./app/assets/builds/**/*.css", // Wait for cssbundling changes
]
const config = {
  absWorkingDir: path.join(process.cwd(), "app/javascript"),
  bundle: true,
  entryPoints: entryPoints,
  minify: process.env.RAILS_ENV == "production",
  outdir: path.join(process.cwd(), "app/assets/builds"),
  plugins: [rails()],
  sourcemap: process.env.RAILS_ENV != "production"
}

async function buildAndReload() {
  // Foreman & Overmind assign a separate PORT for each process
  const port = parseInt(process.env.PORT)
  const context = await esbuild.context({
    ...config,
    banner: {
      js: ` (() => new EventSource("http://localhost:${port}").onmessage = () => location.reload())();`,
    }
  })

  // Reload uses an HTTP server as an even stream to reload the browser
  http
    .createServer((req, res) => {
      return clients.push(
        res.writeHead(200, {
          "Content-Type": "text/event-stream",
          "Cache-Control": "no-cache",
          "Access-Control-Allow-Origin": "*",
          Connection: "keep-alive",
        })
      )
    })
    .listen(port)

  await context.rebuild()
  console.log("[reload] initial build succeeded")

  let ready = false
  chokidar
    .watch(watchDirectories)
    .on("ready", () => {
      console.log("[reload] ready")
      ready = true
    })
    .on("all", async (event, path) => {
      if (ready === false)  return

      if (path.includes("javascript")) {
        try {
          await setTimeout(20)
          await context.rebuild()
          console.log("[reload] build succeeded")
        } catch (error) {
          console.error("[reload] build failed", error)
        }
      }
      clients.forEach((res) => res.write("data: update\n\n"))
      clients.length = 0
    })
}

if (process.argv.includes("--reload")) {
  buildAndReload()
} else if (process.argv.includes("--watch")) {
  let context = await esbuild.context({...config, logLevel: 'info'})
  context.watch()
} else {
  esbuild.build(config)
}
```

Update our package.json build command:

```
"build": "node esbuild.config.mjs",
```

Let's automatically load stimulus controllers from our components directory by adding the code to `app/javascript/controllers/application.js`

```
// ViewComponents in app/views/components
import viewComponentControllers from "./../../views/components/**/controller.js"

viewComponentControllers.forEach((controller) => {
  const { name, module } = controller

  // Tidy up controller name
  // ..--..--views--components--video-reviewer--controller.js => video-reviewer
  const controllerName = name
    .replaceAll('..--..--views--components--', '')
    .replaceAll('--controller.js', '')

  application.register(controllerName, module.default)
})
```

# Styling our Button component

Now we can get in to the fun part!

Open up the `app/views/components/button/component.html.erb`

```
<button
  class="
    bg-blue-500
    font-bold
    px-4
    py-2
    rounded-lg
    text-white
  "
>
  <%= content %>
</button>
```

This is cool but what if we want to support variants?

Add the tailwind_merge gem:

```
bundle add tailwind_merge
```

Update `tailwind.config.js` to watch our component.rb files

```
module.exports = {
  content: [
    './app/assets/stylesheets/**/*.css',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.html.erb',
    './app/views/components/**/*.js',
    './app/views/components/**/*.rb',
  ]
}
```

Update our `app/views/components/application_view_component.rb` file:

```
class ApplicationViewComponent < ViewComponentContrib::Base
  extend Dry::Initializer

  include ApplicationHelper
  include ViewComponentContrib::StyleVariants

  style_config.postprocess_with do |classes|
    TailwindMerge::Merger.new.merge(classes.join(" "))
  end
end
```

Let's move our classes to the `app/views/components/button/component.rb`  file:

```
# frozen_string_literal: true

class Button::Component < ApplicationViewComponent
  option :variant, default: proc { :default }

  # https://github.com/palkan/view_component-contrib#style-variants
  style do
    base {
      %w[
        bg-blue-500
        font-bold
        px-4
        py-2
        rounded-lg
        text-white
      ]
    }

    # The "compound" directive allows us to declare additional classes to add
    # when the provided combination is used
    # compound(variant: :outline, disabled: true) {
    #   %w[
    #     opacity-75
    #     bg-slate-300
    #   ]
    # }
  end
end
```

Then we can update our `component.html.erb` class to this:

```
<button
  class="<%= style() %>"
>
  <%= content %>
</button>
```

If we refresh the page the button should still render correctly.

Let's add a variant called `variant` (yes that's a bit weird but roll with it!):

```
# frozen_string_literal: true

class Button::Component < ApplicationViewComponent
  option :variant, default: proc { :primary }

  # https://github.com/palkan/view_component-contrib#style-variants
  style do
    base {
      %w[
        font-bold
        px-4
        py-2
        rounded-lg
      ]
    }

    variants {
      variant {
        primary {
          %w[
            bg-blue-500
            text-white
          ]
        }
        outline {
          %w[
            border
            border-blue-500
            text-blue-500
          ]
        }
        ghost {
          %w[
            text-blue-500
          ]
        }
      }
    }

    defaults {
      {
        variant: :primary,
      }
    }

    # The "compound" directive allows us to declare additional classes to add
    # when the provided combination is used
    # compound(variant: :outline, disabled: true) {
    #   %w[
    #     opacity-75
    #     bg-slate-300
    #   ]
    # }
  end
end
```

Now we can update the html:

```
<button
  class="<%= style(variant:) %>"
>
  <%= content %>
</button>
```

# Adding Stimulus Controller

We won't be doing anything crazy here but I just want to show you how easy it is!

Update `app/helpers/application_helper.rb`

```
module ApplicationHelper
  def component(name, *args, **kwargs, &block)
    component = name.to_s.camelize.constantize::Component
    render(component.new(*args, **kwargs), &block)
  end

  def component_identifier(name)
    component = "#{name.to_s.camelize}::Component".constantize
    component.identifier
  end
end
```

Add the methods too our ApplicationViewComponent file `app/views/components/application_view_component.rb` 

```
class ApplicationViewComponent < ViewComponentContrib::Base
  extend Dry::Initializer

  include ApplicationHelper
  include ViewComponentContrib::StyleVariants

  style_config.postprocess_with do |classes|
    TailwindMerge::Merger.new.merge(classes.join(" "))
  end

  class << self
    def component_name
      @component_name ||= name.sub(/::Component$/, "").underscore
    end

    def identifier
      @identifier ||= component_name.gsub("_", "-").gsub("/", "--")
    end

    def self.identifier
      identifier
    end
  end
end
```

Let's create our controller at `app/views/components/button/controller.js`

```
import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  connect(){
    console.log("Connected", this.element)
  }

  triggerAlert(e){
    const { target: { dataset: { message } } } = e
    alert(message)
  }
}
```

Link the controller to our component:

```
<button
  class="<%= style(variant:) %>"
  data-action="click-><%= component_identifier("Button") %>#triggerAlert"
  data-controller="<%= component_identifier("Button") %>"
  data-message="<%= alert_message %>"
>
  <%= content %>
</button>

```

Add the option to the `component.rb`

```
option :alert_message, default: proc { "Hello World" }
```

We should now see the connected log message in our console and when you click the button the alert should show.

# Conclusion

And that's it! We now have components running in rails that can be connected to Stimulus to add javascript functionality as well as styling variants with tailwind.

In this video I will walk through setting up View Components in a new Rails app and show you how to create custom components with variants so that you can build your own UI library.

Setup View Components in a Rails App

In this video I will show you how I like to setup third party integrations in Rails applications so that it scales well.

--

Subscribe to our Podcast:

YouTube
https://www.youtube.com/@initium-clips

Spotify
https://open.spotify.com/show/4Znpm8ST33x3NQ1mfRyi2H?si=db942ae2918e43d8

Follow along to watch us build a Rails / SaaS / B2C app from the ground up.

Clipflow.co
https://www.clipflow.co

Twitter
Darrell - https://twitter.com/craftbuildcut
Ken - https://twitter.com/kennnG

In this video I will show you how I like to setup third party integrations in Rails applications so that it scales well.

Ken Greeff

Software Engineer, Australia