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.

Background Jobs in Rails with SolidQueue

# Intro

I'm going to run you through setting up a Next.js app so that it can fetch data from a Rails API using Tanstack Query. I'll step you through creating a new Next.js app, a new Rails App in API mode and show you how to connect the two. If you hang around to the end of the video I'll show you how you can easily add types to the Rails API.

# Why?

React is really great for developing frontends (that's what it was built for) and Next.js is one of the leading frameworks for getting started. Javascript can definitely feel a bit clunky when building out your backend logic and this is where Rails comes in. It is very mature, has a bunch of helpers and gems that make building out API's super simple. ActiveRecord is an ORM that really has no match in the Javascript world and is one of the main reasons I always reach for Rails when building complex apps.

# Setup Directory

We will create a directory to house both the frontend and backend. To do this run the command:

```bash
> mkdir nextjs-rails
```

Jump in to the directory so that we can setup the Next.js app:

```bash
> cd nextjs-rails
```

# Setup Next.js App

This is how we create a new app with Next.js. We are going to use the app router as it is the recommended method in 2024.

```bash
> npx create-next-app@latest
What is your project named? … frontend
Would you like to use TypeScript? › No / Yes
Would you like to use ESLint? › No / Yes
Would you like to use Tailwind CSS? › No / Yes
Would you like to use `src/` directory? › No / Yes
Would you like to use App Router? (recommended) › No / Yes
Would you like to customize the default import alias (@/*)? › No / Yes
```

Let that do its thing and then let's check if it runs:

```bash
npm run dev
```

Open up your browser and go to: <http://localhost:3000/>

## Install Tanstack Query

If you don't know already, Tanstack Query (or formerly React Query) won the query library because it handles all the complex pieces of data fetching seamlessly. Let's install it so you can see what I mean.

```bash
npm install @tanstack/react-query
```

Setup the QueryClient component in `src/components/ReactQueryClientProvider/index.tsx` 

```js
'use client'

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { useState } from 'react'

export const ReactQueryClientProvider = ({ children }: { children: React.ReactNode }) => {
  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            // With SSR, we usually want to set some default staleTime
            // above 0 to avoid refetching immediately on the client
            staleTime: 60 * 1000,
          },
        },
      })
  )
  return (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  )
}
```

Now we need to wrap the entire App with the Provider. We can do this in the `src/app/layout.tsx` file:

```js
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"

import { ReactQueryClientProvider } from '@/components/ReactQueryClientProvider'

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

type RootLayoutProps = Readonly<{
  children: React.ReactNode;
}>

export default function RootLayout(props: RootLayoutProps) {
  const {
    children,
  } = props

  return (
    <ReactQueryClientProvider>
      <html lang="en">
        <body className={inter.className}>{children}</body>
      </html>
    </ReactQueryClientProvider>
  );
}
```

## Setup HTTP Client

We will need to setup our HTTP Client so that we can make requests to the server. We will use axios to do this:

```bash
> npm i axios
```

Add the baseUrl file in `api/baseUrl.ts`:

```js
const baseURLs = {
  development: 'http://localhost:3002/v1/',
  staging: '',
  production: '',
  test: '',
}

const baseURL = baseURLs[process.env.NODE_ENV || 'development']

export default baseURL
```

Create the api file in `api/index.ts`:

```js
import axios from "axios"

import baseURL from "./baseUrl"

const instance = axios.create({
  baseURL,
  timeout: 1000,
})

type ApiOptions = {
  data?: object,
  method?: 'get' | 'put' | 'post' | 'delete',
  params?: object,
}

export const api = async (url: string, options: ApiOptions = {}) => {
  const { data, method = 'get', params } = options

  const accessToken = 'ACCESS_TOKEN'

  try {
    const response = await instance.request({
      data,
      headers: {
        'Authorization': `Bearer ${accessToken}`,
      },
      method,
      params,
      responseType: 'json',
      url,
    })

    return response.data
  } catch (error) {
    throw new Error(error.response?.data?.errors)
  }
}

export default api
```

Next we will setup a router file in `api/router.ts`. This is just a way to keep all our queries organised and in one location so that we don't have them littered around our app:

```js
import userEndpoints from './user'

const endpoints = {
  users: userEndpoints,
}

export default endpoints
```

Now we can add our user endpoints in `api/user.ts` 

```js
import api from "./index"

const endpoints = {
  getUsers: async () => {
    return await api('users')
  },
}

export default endpoints
```

We can now use our API in our Next.js app, but before we do that we will setup our Rails API so that we can actually return some data.

# Setup Rails API

Open a new tab in terminal and jump back to our root directory (nextjs-rails):

```bash
> cd ../
```

Let's create a new Rails app in API mode - we are going to name the app `backend`:

```bash
> rails new backend --api
```

Let's change the default port in `backend/config/puma.rb` so that our API runs on `3002`:

```ruby
port ENV.fetch("PORT") { 3002 }
```

We will use the `jbuilder` gem to build our json views:

In our `Gemfile` un-comment the `jbuilder` gem and run:

```bash
> bundle install
```

**Note**: We are using sqlite as our database as noted in the Gemfile. This is ok for now but you may want to use something like Postgresql in production.

Now we can start the rails server in the terminal and see if it is working:

```bash
> rails s
```

Open up `http://localhost:3002` and you should be presented with the default page

## Add User Model

If that is working we can move on to adding our users controller. To do this run the scaffold command to setup everything quickly:

```bash
> rails g scaffold User
```

This will setup our database migration, tests, routes, controller as well as create the jbuilder views required - with one simple command.

Open up the new migration file (it ends with create_users.rb) and let's add some fields. We are going to keep it really simple for now:

```ruby
class CreateUsers < ActiveRecord::Migration[7.1]
  def change
    create_table :users do |t|
      t.string :name
      t.string :email

      t.timestamps
    end
  end
end
```

Once you have done that save the file and run:

```bash
> rails db:migrate
```

Let's add a user to the database using the Rails console (one of my favourite tools):

```bash
> rails c
> User.create(name: "Ken Greeff", email: "ken@email.com")
```

Restart the rails server and go to `http://localhost:3002/users.json` to see the user.

We haven't added in auth because it is outside the scope of this video but you can see how to implement it in a video I did on JWT Authentication: <https://youtu.be/W8O-jlyH3k8>

Ok, with that working we can update the view to also show the name and email in the view file `backend/app/views/users/_user.json.jbuilder`:

```ruby
json.extract!(user, 
  :id,
  :created_at,
  :email,
  :name,
  :updated_at,
)

json.url user_url(user, format: :json)
```

Save the file then refresh the page in the browser to see your changes.

## Setup API Versioning

Before we continue let's namespace our API endpoints so that we can easily modify versions later without breaking old clients.

Create a new folder called `v1` in the `backend/app/controllers` directory. Inside that folder create a file called `api_controller.rb`:

```ruby
module V1
  class APIController < ApplicationController

  end
end
```

By doing this it allows us to implement different authentication mechanisms and actions between versions easily, without breaking anything in previous versions.

Drag the `backend/app/controllers/users_controller.rb` file in to the `v1` folder. Update it so that it looks like that:

```ruby
module V1
  class UsersController < APIController
    before_action :set_user, only: %i[ show update destroy ]

    # GET /users
    # GET /users.json
    def index
      @users = User.all
    end

    # GET /users/1
    # GET /users/1.json
    def show
    end

    # POST /users
    # POST /users.json
    def create
      @user = User.new(user_params)

      if @user.save
        render :show, status: :created, location: @user
      else
        render json: @user.errors, status: :unprocessable_entity
      end
    end

    # PATCH/PUT /users/1
    # PATCH/PUT /users/1.json
    def update
      if @user.update(user_params)
        render :show, status: :ok, location: @user
      else
        render json: @user.errors, status: :unprocessable_entity
      end
    end

    # DELETE /users/1
    # DELETE /users/1.json
    def destroy
      @user.destroy!
    end

    private
      # Use callbacks to share common setup or constraints between actions.
      def set_user
        @user = User.find(params[:id])
      end

      # Only allow a list of trusted parameters through.
      def user_params
        params.fetch(:user, {})
      end
  end
end
```

We need to update our routes `backend/config/routes.rb` to support the new changes:

```ruby
Rails.application.routes.draw do
  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

  # Reveal health status on /up that returns 200 if the app boots with no exceptions, otherwise 500.
  # Can be used by load balancers and uptime monitors to verify that the app is live.
  get "up" => "rails/health#show", as: :rails_health_check

  namespace "v1", defaults: { format: 'json' } do
    resources :users
  end
end
```

Create a new folder called `v1` in our views folder and move the `users` directory in to it. Update the index and show views to reflect this as well.

We also need to update our inflections `backend/config/initializers/inflections.rb` so that Rails can find our API namespace - (convention is to upcase the first character only):

```ruby
# Be sure to restart your server when you modify this file.

# Add new inflection rules using the following format. Inflections
# are locale specific, and you may define rules for as many different
# locales as you wish. All of these examples are active by default:
# ActiveSupport::Inflector.inflections(:en) do |inflect|
#   inflect.plural /^(ox)$/i, "\\1en"
#   inflect.singular /^(ox)en/i, "\\1"
#   inflect.irregular "person", "people"
#   inflect.uncountable %w( fish sheep )
# end

# These inflection rules are supported but not enabled by default:
ActiveSupport::Inflector.inflections(:en) do |inflect|
  inflect.acronym "API"
end
```

We will need to restart our server for the changes to take affect.

# Displaying the data in our Frontend

With the API now setup we can jump back in to the frontend and render the results.

Open up the `frontend/src/app/page.tsx` file and clear out everything in between the `main` tags so that it looks like this:

```js
'use client'

export default function Home() { 
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      Hello
    </main>
  );
}
```

Import `useQuery` and our `apiRouter`

```js
'use client'

import { useQuery } from "@tanstack/react-query";

import apiRouter from '@/api/router'

export default function Home() { 
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      Hello
    </main>
  );
}
```

Now we can add our query to get the users from our backend/API. You will notice that the apiRouter autocompletes which makes it easier to find the right query

```js
'use client'

import { useQuery } from "@tanstack/react-query";

import apiRouter from '@/api/router'

export default function Home() { 
  const { data } = useQuery({ queryKey: ['getUsers'], queryFn: apiRouter.users.getUsers })

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <ul>
        {data?.map((user) => {
          return (
            <li key={user.id}>
              {user.name} - {user.email}
            </li>
          )
        })}
      </ul>
    </main>
  );
}
```

You might get an error in the console:

```
Access to XMLHttpRequest at 'http://localhost:3002/v1/users' from origin 'http://localhost:3000' has been blocked by CORS policy
```

Let's fix it!

### Cross-Origin Resource Sharing (CORS)

Let's update our Cross-Origin Resource Sharing (CORS) rules for the API so that our frontend can make requests if on a different domain.

In our `Gemfile` un-comment the `rack-cors` gem and run:

```bash
> bundle install
```

Open up the `backend/config/initializers/cors.rb` file and update it:

```ruby
# Be sure to restart your server when you modify this file.

# Avoid CORS issues when API is called from the frontend app.
# Handle Cross-Origin Resource Sharing (CORS) in order to accept cross-origin AJAX requests.

# Read more: https://github.com/cyu/rack-cors

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins "*"

    resource "*",
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end
```

Empty the Cache and perform a hard refresh and we should be back in business!

# Bonus: Adding Types

There are a few ways of generating types for a Rails API but today I am just going to use a simple one as an example.

Install the gem - `ts_schema`

```bash
> bundle add ts_schema
> rails generate ts_schema:install
```

Let's update the config file `backend/config/initializers/ts_schema.rb` quickly:

```ruby
config.output = Rails.root.join("api-schema.d.ts")
config.namespace = :APISchema
config.schema_type = :type
```

Now we can run the command to generate our schema:

```bash
> rails ts_schema:generate
```

That will generate the schema file at `backend/api-schema.d.ts` 

To use this in our frontend we simply edit the `tsconfig.json` file:

```js
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "../backend/api-schema.d.ts"],
```

We can now use types in our API definitions:

```js
import api from "./index"

type Endpoints = {
  getUsers: () => Promise<APISchema.User[]>
}

const endpoints: Endpoints = {
  getUsers: async () => {
    return await api('users')
  },
}

export default endpoints
```

# Conclusion

And there you have it! A frontend running with Next.js that is connected to a Rails API. I would recommend watching my video on JWT Authentication next so that you can lock down your API. 

Link to the repo:
https://github.com/kengreeff/nextjs-rails

Catch you on the next one!

In this episode we will setup a repo that contains a Rails app running in API mode as well as a Next.js app for the frontend.

Fetch data from Rails API with Next.js

In this episode we will setup ActiveStorage in Rails so that we can upload project thumbnails.

Pundit Gem:
https://github.com/varvet/pundit

--

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 ActiveStorage in Rails so that we can upload project thumbnails.

EASY Image Uploads in Rails with ActiveStorage

In this episode we will setup Pundit to add authorization to our controller endpoints in Rails. This will scope records so that user's only see the ones that belong to their organization.

Pundit Gem:
https://github.com/varvet/pundit

--

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 Pundit to add authorization to our controller endpoints in Rails.

Authorizing Rails Endpoints with Pundit

In this episode we will work on styling the Sign Up screenin Rails using Tailwind and ViewComponents. We will also update the sign up logic so that organization slugs are always unique using  a callback. We then create a getter & setter for defining a user's default organization.

--

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 work on styling the Sign Up screenin Rails using Tailwind and ViewComponents.

Fix Sign Up with Tailwind & ViewComponents in Rails

In this episode we will work on closing a modal after saving a form in Rails using Turbo & Stimulus.

--

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 work on closing a modal after saving a form in Rails using Turbo & Stimulus.

How to close modal after save in Rails (Turbo & Stimulus)

We have just received some great feedback from one of our users so I have decided to walk you through them and talk about how we decided which features should be worked on, left for later and those that should be ignored.

--

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 have just received some great feedback from one of our users so I have decided to walk you through them

How to Select App Feature Requests to Build

In this episode we will setup add support for dark mode to the sidebar modal component as well as setup the FormFieldComponent so that we can reuse our styling between fields easily.

--

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 add support for dark mode to the sidebar modal component.

Modal Dark Mode and Form Field Components - Clipflow - Part 11

We are proud to announce the official launch of the Clipflow Beta. Take a look at some of the key features. If you are create videos on YouTube or know someone who does, please join our limited beta and help us improve and create the best workflow possible.

We are proud to announce the official launch of the Clipflow Beta.

Introducing Clipflow Beta - Feature Walkthrough

In this episode we will setup a Sidebar Modal Component in Rails that can be reused whenever we want to present data or forms in a modal. This can be achieved using very little stimulus / javascript code along with some tailwind styling.

In this episode we will setup a Sidebar Modal Component in Rails.

Adding Sidebar Modal Component - Clipflow - Part 10

In this episode we setup the Project Ideas Screen. As a YouTube creator and Clipflow most videos will start out as an idea and then transition in to a project. We will be using Rails and the Hotwire toolset (Turbo / Stimulus) as well as View Components for the layout.

In this episode we setup the Project Ideas Screen.

Ken Greeff

Software Engineer, Australia