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.

Integrating Third Party APIs in Rails

In this video I will show you how to setup OAuth2 login with Google using the omniauth gem in a Rails app.

Omniauth
https://github.com/omniauth/omniauth

Omniauth Google OAuth2
https://github.com/zquestz/omniauth-google-oauth2

--

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 to setup OAuth2 login with Google using the omniauth gem in a Rails app.

Google OAuth2 with Omniauth in Rails

# Intro

One is a React framework that aims to make full stack development as simple as possible - whether you're making a website, an app, or sharing code between the two.

This framework is brought to you by the team who created Tamagui, so naturally I am keen to test it out.

# Install

Make sure you are running Node 18 or above then run

```
npx one
```

Follow the prompts and select the Fullstack template with Drizzle, Postgres and all the good stuff.

We will use Docker to run Postgres for us so make sure you have Docker desktop installed then run:

```
docker compose up
```

Next we will setup, sync our tables and seed our db using drizzle:

```
yarn db:init
```

If that all works you should now be able to run the dev server:

```
yarn one dev
ow
```

# Highlights

## Typed Filesystem Routing

Simple routing with nested layouts, groups all fully typed

## Routing Modes - SPA, SSR or SSG

Select globally and per page

## Loaders

Typed data loaders, similar to remix

## Web + Native

Build your website and React Native app at the same time, sharing components

## 100% Vite

No more Metro, one plugin, one server, one port - three platforms.

## Integration with ZeroSync

A new general purpose sync engine

In this episode we will take a look at the newest React framework on the block, One.js.

Tamagui is dead. Long live One, a new React framework

# Create new branch

Create a new branch called `github-actions`

# Create workflow files

In the root directory create files called:

 `.github/workflows/deploy-api.yml` 

```
name: Deploy API
on:
  push:
    branches:
      - github-actions
jobs:
  deploy:
    name: Deploy to Fly.io
    runs-on: ubuntu-latest
    concurrency: deploy-group    # optional: ensure only one action runs at a time
    steps:
      - run: echo "deploy api" 
```

`.github/workflows/deploy-frontend.yml.` 

```
name: Deploy Frontend
on:
  push:
    branches:
      - github-actions
jobs:
  deploy:
    name: Deploy to Vercel
    runs-on: ubuntu-latest
    concurrency: deploy-group    # optional: ensure only one action runs at a time
    steps:
      - run: echo "deploy frontend"
```

Push the changes to GitHub. Open up the repo in Github and navigate to Actions tab to see the workflows running.

# Deploying API to [Fly.io](http://Fly.io)

Go to [www.fly.io](http://www.fly.io) and register for an account. 

You will also need to install the Fly CLI tool, instructions are here:

<https://fly.io/docs/flyctl/install/> 

Change directory to `backend` then run:

```
fly launch --no-deploy
```

Create a fly deploy API token:

```
fly tokens create deploy -x 999999h
```

Jump back in to the GitHub repo and create a new repo secret key.

**Settings &gt; Secrets & Variables &gt; Actions &gt; New repository secret**

Call the token **FLY_API_TOKEN** and paste in the one you created above (including FlyV1 part)

Update the `.github/workflows/deploy-api.yml` 

```
name: Deploy API
on:
  push:
    branches:
      - github-actions
jobs:
  deploy:
    name: Deploy to Fly.io
    runs-on: ubuntu-latest
    concurrency: deploy-group    # optional: ensure only one action runs at a time
    steps:
      - uses: actions/checkout@v4
      - uses: superfly/flyctl-actions/setup-flyctl@master
      - name: Deploy to Fly.io
        working-directory: ./backend
        run: flyctl deploy --remote-only
        env:
          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
```

Update the `fly.toml` file so that the ports are set to `3002` 

## Push Up Changes

Let the action run. Once it is complete you should be able to visit the `/up` endpoint on the newly created machine.

# Deploying Frontend to Vercel

## Disable ESLint issues for builds

In the next.config.mjs file:

```
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    // Warning: This allows production builds to successfully complete even if
    // your project has ESLint errors.
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
};

export default nextConfig;
```

## Add the API route to the frontend config

In the `frontend/src/api/baseUrl.ts` update the production url to the same as our API we deployed:

```
const baseUrls = {
    development: 'http://localhost:3002/v1/',
    staging: '',
    production: 'https://backend-shy-dawn-8299.fly.dev/v1/',
    test: '',
}

const baseUrl = baseUrls[process.env.NEXT_PUBLIC_APP_ENV || process.env.NODE_ENV || 'development']

export default baseUrl
```

## Setting up pipline

Create or login to your Vercel account:

<https://vercel.com/>

For most cases Vercel will just build and deploy you app every time you push code to Github. We are just doing this to show an alternative solution.

Update the `.github/workflows/deploy-frontend.yml`

```
name: Deploy Frontend
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
  push:
    branches:
      - github-actions
jobs:
  deploy:
    name: Deploy to Vercel
    runs-on: ubuntu-latest
    concurrency: deploy-group    # optional: ensure only one action runs at a time
    steps:
      - uses: actions/checkout@v4
      - name: Install Vercel CLI
        run: npm install --global vercel@latest
      - name: Pull Vercel Environment Information
        working-directory: ./frontend
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
      - name: Build Project Artifacts
        working-directory: ./frontend
        run: NEXT_PUBLIC_APP_ENV=production vercel build --token=${{ secrets.VERCEL_TOKEN }}
      - name: Deploy Project Artifacts to Vercel
        working-directory: ./frontend
        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}
```

Next we need to get the environment variables required. First we need the token:

<https://vercel.com/guides/how-do-i-use-a-vercel-api-access-token>

Install the vercel CLI locally:

<https://vercel.com/docs/cli>

Once installed, navigate to the frontend folder in our project and run

```
vercel link
```

Follow the steps:

```
Log in to Vercel Continue with GitHub
> Success! GitHub authentication complete for ken@kengreeff.com
? Set up “~/code/nextjs-rails/frontend”? yes
? Which scope should contain your project? Ken Greeff's projects
? Link to existing project? no
? What’s your project’s name? nextjs-rails
```

Now we can add the projectId and orgId to Github secrets as well.

Jump back in to the GitHub repo and create a new repo secret key.

**Settings &gt; Secrets & Variables &gt; Actions &gt; New repository secret**

Once you have set the env variables you are ready to push up your changes.

Jump in to the vercel app and click on the url to view your app!

<https://nextjs-rails-kengreeff-ken-greeffs-projects.vercel.app/>

In this episode I will show you how to setup CI/CD using GitHub Actions.

Using GitHub Actions to deploy Next.js & Rails API

In this episode I add multipart uploads in Clipflow, a Rails app, so that we can upload large video files to S3 efficiently. We are using Uppy on the frontend so need to setup endpoints on the backend to handle the upload as well as custom functions on the frontend to pass the CSRF and authentication information.

Uppy Documentation
https://uppy.io/docs/aws-s3

Gem
https://github.com/janko/uppy-s3_multipart

--

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 episode I add multipart uploads in Clipflow, a Rails app, so that we can upload large video files to S3 efficiently.

Endpoints for Multipart Uploads in Rails, Uppy & S3

In this video I will create a new Next.js app and integrate the new version (Version 7) of UploadThing to see if it really makes uploads better for developers.

UploadThing:
https://uploadthing.com/

Next.js:
https://nextjs.org

--

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 create a new Next.js app and integrate the new version (Version 7) of UploadThing to see if it really makes uploads better for developers.

File Uploads with UploadThing V7 in Next.js

In this episode I will add a RSS Feed Parser to my personal portfolio website built in Next.js with the Pages router. We will consume our Spotify podcast feed to dynamically display the episodes on the website.

Website Code:
https://github.com/kengreeff/kengreeff

Next.js:
https://nextjs.org

RSS Parser
https://github.com/rbren/rss-parser

--

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 episode I will add a RSS Feed Parser to my personal portfolio website built in Next.js with the Pages router.

Ken Greeff

Software Engineer, Australia