markmcdermott.io (js, ruby, ...etc) by mark mcdermott

Adding S3 to Barebones Tutorial

Wherein the Tutorial Gets a Bit Cheeky

03/02/2025

read time：30 mins

Minimal Rails API & Nuxt 3 App Tutorial

Overview

In this tutorial, you’ll build a lean Rails API (backend) and a Nuxt 3 app (frontend), both hosted on fly.io. There will be RSpec, Vitest and Playwright tests, which will run locally and on CircleCI. Avatars will be hosted on S3.

Part I: Barebones App With CircleCI Tests On Fly.io

1. Initial Setup

fly.io url details:
  frontend url: 
  backend url: 

fly.io postgres cluster details
  name: 
  Username: 
  Password: 
  Hostname: 
  Flycast: 
  Proxy port: 
  Postgres port: 
  Connection string: 

AWS details:
  aws acct id: 
  aws region:  
  s3 user policy: 
  s3 user: 
  s3 user access key: 
  s3 user secret access key: 
  s3 bucket dev: 
  s3 bucket prod:

2. Building the MVP Hello World Version

Backend Health Endpoint

Nuxt Default Page

3. Setting Up Testing

RSpec Test (Backend)

Vitest Component Test (Frontend)

Playwright End-to-End Test

4. CircleCI Integration

ENV['POSTGRES_HOST'] ||= 'postgres'

5. Production Deployment

Part II: Auth

1. Install and Configure Devise with JWT and Sidebase Auth

2. Create User Model with Devise & JWT

3. Create Registration and Login Endpoints

4. JWT Configuration

Test

5. Session Controller for Login

Test

6. Registration Controller

Test

7. Current User Endpoint

Test

8. User Seeds and Production Deployment

Test

Deploy Backend to Fly.io

9. Setup Frontend Auth

  1. Add Index/Login/Signup/Private Pages

Test Locally

Test Prod

11. Swagger API Documentation

Test

Part III: Flutter

Add Flutter With WebViews

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: WebViewScreen(),
    );
  }
}

class WebViewScreen extends StatefulWidget {
  const WebViewScreen({super.key});

  @override
  State<WebViewScreen> createState() => _WebViewScreenState();
}

class _WebViewScreenState extends State<WebViewScreen> {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse("https://app001-frontend.fly.dev"));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea( 
        child: WebViewWidget(controller: _controller),
      ),
    );
  }
}

Part IV: S3 Preparation

AWS S3 Setup

Now we’ll create our AWS S3 account so we can store our user avatar images there as well as any other file uploads we’ll need. There are a few parts here. We want to create a S3 bucket to store the files. But a S3 bucket needs a IAM user. Both the S3 bucket and the IAM user need permissions policies. There’s a little bit of a chicken and egg issue here - when we create the user permissions policy, we need the S3 bucket name. But when we create the S3 bucket permissions, we need the IAM user name. So we’ll create everything and use placeholder strings in some of the policies. Then when we’re all done, we’ll go through the policies and update all the placeholder strings to what they really need to be.

AWS General Setup

AWS User Policy

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "AllowGetObject",
			"Effect": "Allow",
			 "Action": [
          "s3:PutObject",
          "s3:GetObject",
          "s3:DeleteObject"
            ],
			"Resource": ["arn:aws:s3:::<development bucket name>", "arn:aws:s3:::<production bucket name>"]
		}
	]
}

AWS User

AWS S3 Bucket

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::<aws acct id without dashes>:user/<iam username>"
            },
            "Action": "s3:ListBucket",
            "Resource": "arn:aws:s3:::<bucket name>"
        },
        {
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::<aws acct id without dashes>:user/<iam username>"
            },
            "Action": [
                "s3:GetObject",
                "s3:PutObject",
                "s3:DeleteObject",
                "s3:PutObjectAcl"
            ],
            "Resource": "arn:aws:s3:::<bucket name>/*"
        }
    ]
}

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "POST",
            "PUT",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

Part V: Setup S3 In Rails/Nuxt

S3 Manual Avatar Upload

brew install awscli

aws configure

aws s3 cp ~/Desktop/avatar.png s3://app001-s3-bucket-production/avatars/avatar.png --acl public-read

aws s3 ls s3://app001-s3-bucket-production/ --recursive

https://<bucket-name>.s3.<region>.amazonaws.com/avatars/avatar.png

https://app001-s3-bucket-production.s3.us-east-1.amazonaws.com/avatars/avatar.png

Hardcode avatar url in Nuxt

<ClientOnly fallback=" ">
  <div v-if="status === 'authenticated' && user?.email" class="user-email">
    User logged in: <img src="https://app001-s3-bucket-production.s3.us-east-1.amazonaws.com/avatars/avatar.png" ><strong>{{ user.email }}</strong>
  </div>
  <div v-else>
    No users logged in
  </div>
</ClientOnly>

.user-email {
  margin-left: auto;
  white-space: nowrap;

  img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    vertical-align: middle;
    margin: 0 8px;
  }
}

cd backend && rails s
cd frontend && npm run dev

cd frontend && fly deploy

Pull avatar url from backend to frontend

User.create!(email: 'test@mail.com', password: 'password', avatar: 'https://app001-s3-bucket-production.s3.us-east-1.amazonaws.com/avatars/avatar.png', admin: true)
User.create!(email: 'test2@mail.com', password: 'password')

class UserSerializer
  include JSONAPI::Serializer
  attributes :email, :uuid, :admin, :avatar
end

class Api::V1::Auth::CurrentUserController < ApplicationController
  before_action :authenticate_user!
  def index
    render json: UserSerializer.new(current_user).serializable_hash[:data][:attributes]
  end
end

<ClientOnly fallback=" ">
  <div v-if="status === 'authenticated' && user?.email" class="user-email">
    User logged in: <img v-if="user?.avatar" :src="user.avatar" ><strong>{{ user.email }}</strong>
  </div>
  <div v-else>
    No users logged in
  </div>
</ClientOnly>

cd backend && rails db:drop db:create db:migrate db:seed
cd backend && rails s
cd frontend && npm run dev

Final Thoughts

I hope you’ve enjoyed this tutorial and gotten everything working. If anything didn’t work for you, feel free to message me or leave a comment here!

(End of Tutorial)