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

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.

Ken Greeff

Software Engineer, Australia