Complex Applications (e.g., Vite)

To create a more complex Node.js-based client-side application as a rescile module with a build step, follow this standard pattern:

1. Initialize the Project: Use a build tool like Vite to manage your application source code.
2. Configure the Output Directory: rescile expects web assets to be served from the app/ directory. Configure your build tool to output its production build to app/.
3. Set Relative Base Paths: Since modules are served under a dynamic subpath, ensure your build tool generates relative asset paths (e.g., ./).
4. Create the Manifest: Include a module.toml manifest at the project root to define your module’s identity.
5. Package the Module: Combine the generated app/ directory and the module.toml into a .zip archive for distribution.

Example: Vite Configuration

In vite.config.js (or .mjs):

import { defineConfig } from 'vite';

export default defineConfig({
  base: './', // 3. Set relative base paths
  build: {
    outDir: 'app', // 2. Configure output directory
    emptyOutDir: true,
  },
});

Example: Package Scripts

Automate the build and packaging process in your package.json:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "package": "npm run build && zip -r my-app-module.zip app module.toml"
  }
}