Full-Stack Asset Management: Migrating to Local Assets & Dynamic Attribution

This week, I successfully transitioned my Rails/React application (Ben's Bikes) from using external image hosting to a self-hosted asset pipeline with full artist accreditation.

1. The Challenge

Relying on external URLs (like Imgur) for product images was brittle. If a link expired, the frontend broke. Additionally, I wanted to properly credit the artists behind the product visuals by including their names and portfolio links in the metadata.

2. Backend Evolution (Rails + Heroku)

To solve this, I moved all product images into the Rails public/images/items directory. This ensures that assets are version-controlled and deployed alongside the code.

Schema Updates

I expanded the Item model to include artist metadata:

• Added artist_name (String)
• Added artist_url (String)

Deployment Hurdles

During deployment to Heroku, I encountered a few "DevOps" challenges:

• Git Persistence: Discovered that db/migrate was accidentally in the .gitignore, causing migrations to fail on the production server.
• Ghost Migrations: Fixed a "NO FILE" error in the migration status by force-syncing the migration folder and refreshing the Heroku dyno environment.

3. Frontend Integration (React + Vercel)

The React frontend now dynamically builds image URLs based on the environment.

Environment-Specific Paths

Instead of hardcoding URLs, the app uses a REACT_APP_URL environment variable. This allows the app to look at localhost:3000 during development and the Heroku domain in production.

<img src={`${globalState.url}${item.image}`} alt={item.name} />