Why Put a CDN in Front of a Vite Build?
A content delivery network improves how your site’s static resources reach users by serving them from edge locations spread around the globe. When a browser requests an asset, the CDN routes that request to the nearest edge. If the asset is already cached there—whether from that user’s prior visit or someone else’s—it’s served directly. Otherwise, the CDN fetches it from your origin domain, stores it, and delivers it. This post walks through setting up AWS CloudFront to serve the JavaScript, CSS, and font files produced by a Vite build.
Creating the CloudFront Distribution
For production infrastructure, you’d typically define this with the Serverless Framework or AWS CDK. Here, to keep the setup approachable, we’ll use the AWS console. From the CloudFront homepage, click the orange button to create a new distribution.
The creation screen presents many options, but most defaults are fine. Start by entering the domain where your resources are hosted.
Scroll to the Response headers policy dropdown and select “CORS-With-Preflight.”
Click Create Distribution and confirm the new distribution appears in your list.
Pointing Vite at the CDN
A valid CDN distribution is only half the job—your site must actually request files from it. In Vite, the build maintains a graph of imported JavaScript and CSS and injects the necessary <script> tags, <link> tags, and import() calls. To make those point at the CDN in production, edit vite.config.ts.
First, detect whether the build is running for production. Vite sets the relevant environment variable when you run vite build, as opposed to dev mode with hot module reloading.
const isProduction = process.env.NODE_ENV === "production"; Then set the base property of the config object so all asset URLs are prefixed with the CDN location.
export default defineConfig({
base: isProduction ? process.env.REACT_CDN : "",The REACT_CDN environment variable should hold your CloudFront distribution’s URL, something along these lines:
https://distributiondomainname.cloudfront.netIf You Use the VitePWA Plugin
When using vite-plugin-pwa, reset the base property inside the plugin configuration as shown below. If you don’t, the generated web.manifest file will contain invalid settings and trigger errors.
VitePWA({
base: "/",Verifying the CDN Is Serving Assets
After deployment, open your site and inspect network requests for script or CSS files. The protocol should be h2.
Check the response headers of those files—you should see CloudFront-specific data there.
Cache Busting Comes Built In
CDNs like CloudFront let you manually evict cached items, but Vite-built assets handle this automatically. Vite appends content hashes to output filenames: a source home.js might be emitted as home-abc123.js in one build, then home-xyz987.js after you edit and rebuild. Because the filename changes, the new asset bypasses the cache and forces the CDN to fetch fresh content from your origin.
Other Static Assets Worth Caching
JavaScript, CSS, and fonts aren’t the only candidates. If you serve images from an S3 bucket, consider adding a CloudFront distribution for it—the console offers S3-specific options that make setup quick. Beyond edge caching, you also gain HTTP/2 responses, which S3 does not provide natively.
Going Beyond Static Files
The setup described here covers build assets only: users hit your server for the root HTML, then the browser connects to the CDN for everything else. A more complete approach serves the entire site through the CDN, letting it reach back to your web server only for non-static, non-cached requests.
