Skip to content

Comments

Fix CDN_HOST support in Vite configuration#12

Merged
mikehikes merged 4 commits intoforked-mainfrom
fix-cdn-host-vite-config
Nov 12, 2025
Merged

Fix CDN_HOST support in Vite configuration#12
mikehikes merged 4 commits intoforked-mainfrom
fix-cdn-host-vite-config

Conversation

@mikehikes
Copy link

Summary

Fixes CDN_HOST environment variable not being respected after upgrading to Mastodon v4.5+, which switched from Webpack to Vite.

Problem

After the v4.5+ upgrade, all Vite-generated assets (JavaScript chunks, emoji data files, CSS) were being loaded from the local domain instead of the configured CDN at mastodon-static.theatl.social.

Root Cause: Vite's base path was hardcoded to /${outDirName}/ in vite.config.mts. Since Vite generates asset URLs at build time (via import.meta.glob() and code splitting), these URLs don't respect Rails' runtime config.asset_host setting.

Solution

Configure Vite's base option to use CDN_HOST during production builds:

const cdnHost = process.env.CDN_HOST;
const base = isProdBuild && cdnHost ? `${cdnHost}/${outDirName}/` : `/${outDirName}/`;

Affected Assets

This fix ensures the following assets correctly use the CDN:

  • JavaScript chunks (e.g., schedule_idle_task-*.js)
  • Emoji data files (e.g., compact-*.json)
  • CSS files and other Vite-managed assets

Build Requirements

Important: CDN_HOST must be set as an environment variable during the production build, not just at runtime:

export CDN_HOST=https://mastodon-static.theatl.social  # No trailing slash
yarn build:production

Or in Dockerfile:

ENV CDN_HOST=https://mastodon-static.theatl.social
RUN yarn build:production

Testing

After merging and rebuilding with CDN_HOST set:

  1. Check browser network tab for asset requests
  2. Verify URLs like /packs/assets/compact-*.json become https://mastodon-static.theatl.social/packs/assets/compact-*.json
  3. Confirm dynamically imported JS chunks use CDN

🤖 Generated with Claude Code

@mikehikes mikehikes force-pushed the fix-cdn-host-vite-config branch 2 times, most recently from 5adbcab to bbea141 Compare November 12, 2025 17:43
After upgrading to Mastodon v4.5+ which switched from Webpack to Vite,
the CDN_HOST environment variable was no longer being respected for
Vite-generated assets. This caused all dynamically imported JavaScript
chunks, emoji data files, and other assets to be loaded from the local
domain instead of the configured CDN.

Root cause: Vite's base path was hardcoded to `/${outDirName}/` in
vite.config.mts, which made all asset URLs relative to the local domain.
Vite generates these URLs at build time using import.meta.glob() and
code splitting, so they don't respect Rails' runtime config.asset_host.

Solution: Configure Vite's base option to use CDN_HOST during production
builds. The base path now uses the full CDN URL when CDN_HOST is set
and isProdBuild is true, falling back to the relative path otherwise.

This fixes asset loading for:
- JavaScript chunks (e.g., schedule_idle_task-*.js)
- Emoji data files (e.g., compact-*.json)
- CSS files and other Vite-managed assets

Note: CDN_HOST must be set as an environment variable during the
production build, not just at runtime:
  export CDN_HOST=https://mastodon-static.theatl.social
  yarn build:production

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
@mikehikes mikehikes force-pushed the fix-cdn-host-vite-config branch from bbea141 to f7286cf Compare November 12, 2025 17:46
Consolidate asset copying in Dockerfile.
mikehikes and others added 2 commits November 12, 2025 13:27
This passes the CDN_HOST variable to the Docker build so that Vite
can generate asset URLs with the CDN domain during compilation.

Without this, the Dockerfile receives CDN_HOST but the workflow
wasn't passing it, so assets were still using relative paths.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
@mikehikes mikehikes merged commit 255b3f4 into forked-main Nov 12, 2025
10 checks passed
mikehikes added a commit that referenced this pull request Nov 12, 2025
…onfig"

This reverts commit 255b3f4, reversing
changes made to 79911de.
mikehikes added a commit that referenced this pull request Nov 12, 2025
This commit rolls back TheConnector to Mastodon v4.5.0 by:
1. Reverting PR #12 (CDN_HOST build-time fix)
2. Reverting PR #11 (v4.6.0-alpha.1 merge)
3. Merging v4.5.0 final on top of PR #10's state

This restores runtime CDN_HOST functionality that was broken by
upstream commit ff5d745 (import.meta.glob for emoji loading).

Version: 4.5.0-theatlsocial-20251112

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant