# 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.

How to Build an RSS Feed Parser with Next.js

In this video I discuss why most indie developers ultimately fail when building businesses and how I almost fell in to the same trap.

--

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 discuss why most indie developers ultimately fail when building businesses and how I almost fell in to the same trap.

Why Indie Devs Fail: The Truth About Execution

In this episode we will build a new dashboard screen in Clipflow and I walk you through how we are using ViewComponents in Rails.

View Components:
https://viewcomponent.org/

--

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 we will build a new dashboard screen in Clipflow and I walk you through how we are using ViewComponents in Rails.

Building a Dashboard with View Components in Rails

In this episode I react to an article by James Halsall and provide our experience in production with soft deletes and my opinion on how to work with them.

Original Article:
https://jameshalsall.co.uk/posts/why-soft-deletes-are-evil-and-what-to-do-instead?utm_source=tldrnewsletter

--

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

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

Podcast
https://open.spotify.com/show/4Znpm8ST33x3NQ1mfRyi2H?si=81b4c20f9ec84e8f

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

I react to an article by James Halsall and provide our experience in production with soft deletes and my opinion on how to work with them.

Why soft deletes are EVIL and what to do instead

In this episode I review the current (2024) version of the Evil Martians Gemfile to see if there are any worth recommending for new Rails projects.

Evil Martians Gemfile:
https://evilmartians.com/chronicles/gemfile-of-dreams-libraries-we-use-to-build-rails-apps

--

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

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

Podcast
https://open.spotify.com/show/4Znpm8ST33x3NQ1mfRyi2H?si=81b4c20f9ec84e8f

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

In this episode I review the current (2024) version of the Evil Martians Gemfile to see if there are any worth recommending for new Rails projects.

Reacting to the Evil Martians Gemfile

In this episode we will continue working on our repo we setup last time that contains a Rails app running in API mode as well as a Next.js app for the frontend. I'll walk you through setting up CRUD endpoints on the Rails API and connecting them to the frontend in Next.js

Tutorial Code:
https://github.com/kengreeff/nextjs-rails

Ruby on Rails:
https://rubyonrails.org

Next.js:
https://nextjs.org

TanStack Query:
https://tanstack.com/query/latest

--

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

We continue working on our repo we setup last time that contains a Rails app running in API mode as well as a Next.js app for the frontend.

Building a CRUD App with Next.js & Rails API

# Intro

When building marketing pages we want to make sure that we are converting the maximum number of users who view the page. It is important that we find the best taglines, copy and images to ensure this happens and this is where A/B testing can be a useful tool. It allows you to test multiple variants and see what converts the best. In this video I will show you how to install the "split" gem in a rails app and setup a simple A/B test on a tagline.

<https://github.com/splitrb/split>

# Install Redis

On mac we can simply run:

```
brew install redis
```

# Setup the Gem

Add the gem to your `GemFile`. We want to use the dashboard as well so we will require it.

```
# Split - A/B Testing
gem "split", require: 'split/dashboard'
```

Install the gem

```
> bundle install
```

Once you have added the gem let's create the initializer `config/initializers/split.rb`.

```
Split.configure do |config|
  config.persistence = :cookie
end
```

We will use the `:cookie` adapter as we want to do testing with users who are not logged in.

Now we will add the dashboard to `config/routes.rb`:

```
# Split Dashboard - A/B Testing
Split::Dashboard.use Rack::Auth::Basic do |username, password|
  # Protect against timing attacks:
  # - Use & (do not use &&) so that it doesn't short circuit.
  # - Use digests to stop length information leaking
  ActiveSupport::SecurityUtils.secure_compare(::Digest::SHA256.hexdigest(username), ::Digest::SHA256.hexdigest(Rails.application.credentials.dig(:split, :username))) &
    ActiveSupport::SecurityUtils.secure_compare(::Digest::SHA256.hexdigest(password), ::Digest::SHA256.hexdigest(Rails.application.credentials.dig(:split, :password)))
end

mount Split::Dashboard, at: 'split'
```

Finally, let's add the username and password to our credentials file:

```
> EDITOR="code --wait" bin/rails credentials:edit --environment=development
```

Generate a secure password and add the details like below. Remember to use your own data here.

```
split:
  username: "admin@website.com"
  password: "k9SYb4s$WJF#JsI^SH"
```

Now we can run an experiment!

# Run an Experiment

In our view we can setup an experiment like this:

```
title = ab_test(:landing_heading, "Welcome!", "Hello")
```

To finish the experiment once the user has completed the desired outcome e.g. sign up we can use:

```
ab_finished(:landing_heading)
```

We can force the test to a specific value by setting a query param:

```
?ab_test[landing_heading]=max_effort
```

# Viewing our Results

We can view our results by navigating to <http://localhost:3000/split/> to view the dashboard.

--

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 we will setup the Split gem in our Rails app so that we can use A/B tests to help us make data driven decisions to determine which headline we should use on our landing page.

Data Driven Decisions using A/B tests in Rails

In this episode we will setup SolidQueue in our Rails app. So that we can use our database as a job queue for our background workers.

--

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 we will setup SolidQueue in our Rails app. So that we can use our database as a job queue for our background workers.

Ken Greeff

Software Engineer, Australia