How toUse a CDN for your static assets in Remix

Let's say you're deploying your Remix app somewhere, and you want to upload your public folder to some CDN that will work under assets.company.com, while your app runs on www.company.com.

We can tell Remix that every link to your public files (JS files, images, fonts, CSS, etc.) will be loaded from that URL by using the publicPath option in the remix.config.mjs.

remix.config.mjs
/** @type {import('@remix-run/dev').AppConfig} */
export default {
  publicPath: getPublicPath(),
  // other options
};

function getPublicPath() {
  let defaultCDN = "https://assets.company.com";
  let isCI = process.env.CI || false;
  if (!isCI) return "/build/";
  return `${defaultCDN}/build/`;
}

With this, when we run remix build in a CI process it will use the path https://assets.company.com/build/ for every public file our app links to, and locally it will just use /build/.