vite.config.js

import { svelte } from "@sveltejs/vite-plugin-svelte";
import { defineConfig } from "vite";
import path from "path";
import fs from "fs";

export default ({ mode }) => {
  const isDev = mode === "development";

  let canisterIds;
  try {
    canisterIds = JSON.parse(
      fs
        .readFileSync(
          isDev ? ".dfx/local/canister_ids.json" : "./canister_ids.json",
        )
        .toString(),
    );
  } catch (e) {}

  // Generate canister ids, required by the generated canister code in .dfx/local/canisters/*
  // This strange way of JSON.stringifying the value is required by vite
  const canisterDefinitions = Object.entries(canisterIds).reduce(
    (acc, [key, val]) => ({
      ...acc,
      [`process.env.${key.toUpperCase()}_CANISTER_ID`]: isDev
        ? JSON.stringify(val.local)
        : JSON.stringify(val.ic),
    }),
    {},
  );

  let dfxJson;
  try {
    dfxJson = JSON.parse(fs.readFileSync("./dfx.json").toString());
  } catch (e) {}

  // Gets the port dfx is running on from dfx.json
  const DFX_PORT = dfxJson.networks.local.bind.split(":")[1];

  return defineConfig({
    define: {
      // Here we can define global constants
      // This is required for now because the code generated by dfx relies on process.env being set
      ...canisterDefinitions,
      "process.env.NODE_ENV": JSON.stringify(
        isDev ? "development" : "production",
      ),
    },
    optimizeDeps: {
      exclude: ["tinro"],
    },
    plugins: [svelte()],
    resolve: {
      alias: {
        // Here we tell Vite the "fake" modules that we want to define
        $canisters: path.resolve("./src/declarations"),
        $lib: path.resolve("./src/lib"),
      },
    },
    server: {
      fs: {
        allow: ["."],
      },
      proxy: {
        // This proxies all http requests made to /api to our running dfx instance
        "/api": {
          target: `http://localhost:${DFX_PORT}`,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, "/api"),
        },
      },
    },
    build: {
      target: ["es2020"],
    },
  });
};