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

Go to 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 > Secrets & Variables > Actions > 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 > Secrets & Variables > Actions > 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/