How to add base/baseHref to Nx/Vite manifest.json file

Question

How can I prefix the file, css, and assets in a Vite manifest.json file with a CDN URL?

export default defineConfig({
  base: 'https://my-cdn.com/',
  build: {
    manifest: true,
    rollupOptions: {
      input: '/path/to/main.js'
    }
  }
})

but the end result is:

{
  "main.js": {
    "file": "assets/main.4889e940.js",
    "src": "main.js",
    "isEntry": true,
    "dynamicImports": [],
    "css": ["assets/main.b82dbe22.css"],
    "assets": ["assets/asset.0ab0f9cd.png"]
  }
}

instead of:

{
  "main.js": {
    "file": "https://my-cdn.com/assets/main.4889e940.js",
    "src": "main.js",
    "isEntry": true,
    "dynamicImports": [],
    "css": ["https://my-cdn.com/assets/main.b82dbe22.css"],
    "assets": ["https://my-cdn.com/assets/asset.0ab0f9cd.png"]
  }
}

Answer 1

To achieve that, you need to add a base property with the URL or path in the project.json file under targets/build/options.

Here is an example project.json config file:

{
    "name": "app",
    "$schema": "node_modules/nx/schemas/project-schema.json",
    "sourceRoot": "./src",
    "projectType": "application",
    "targets": {
        "build": {
            "executor": "@nrwl/vite:build",
            "outputs": ["{options.outputPath}"],
            "defaultConfiguration": "production",
            "options": {
                "outputPath": "dist/app",
                "base": "https://my-cdn.com"
            }
        }
    }
}

And if you are using vite without NX, then you can provide a base argument to the vite build command.

An example:

vite build --base="https://my-cdn.com"