allen hansrisuk

Recently, I was creating a proof of concept module as part of a monorepo project. The module needed to include flex panel layout functionality and the ability to display maps within these panels. To achieve this, I pulled in Resium and Dockview. The existing monorepo was instantiated using Nx.

For each package, I followed their respective install guides but had to make a few changes.

You can view the code for the sample project here: resium-nx-vite-test project.

Check Import Paths in an Nx Monorepo

I had to ensure that my static asset paths were correct in relation to where I am calling it. Since all the node_modules are at the root of the entire monorepo instead of the root of the project, my import path for the Dockview CSS file had to account for this.

// app.tsx 

import '../../../node_modules/dockview-react/dist/styles/dockview.css';

Changes to Resium Install Process

The Resium documentation instructs us to use a plugin, vite-plugin-cesium, that should handle copying the necessary assets to the project build. However, the plugin assumes that the vite.config.ts file is on the same level as the node_modules directory, which is typically the case in a non-monorepo project but not true in our scenario. The vite.config.ts file is scoped to the specific projects in the monorepo so we can't use it here.

Configure Vite for Cesium

I found a blog post by the folks at Cesium that detail how to properly configure Vite to include the Cesium assets.

We utilize vite-plugin-static copy to copy over the necessary assets. Note the cesiumSource path is two levels up from the location of our vite.config.ts file.

$ npm install vite-plugin-static

// vite.config.ts

/// <reference types='vitest' />
// ... 
import { viteStaticCopy } from 'vite-plugin-static-copy';

const cesiumSource = '../../node_modules/cesium/Build/Cesium';
const cesiumBaseUrl = 'cesium';

export default defineConfig({
  // ... 
  plugins: [
    react(),
    nxViteTsPaths(),
    nxCopyAssetsPlugin(['*.md']),
    // Copy Cesium Assets, Widgets, and Workers to a static directory.
    viteStaticCopy({
      targets: [
        { src: `${cesiumSource}/ThirdParty`, dest: cesiumBaseUrl },
        { src: `${cesiumSource}/Workers`, dest: cesiumBaseUrl },
        { src: `${cesiumSource}/Assets`, dest: cesiumBaseUrl },
        { src: `${cesiumSource}/Widgets`, dest: cesiumBaseUrl },
      ],
    }),
  ],
  // ...
});

You can view the code for the sample project here: resium-nx-vite-test project.