vite.config.js

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

const isDev = process.env["DFX_NETWORK"] !== "ic";

let canisterIds;
try {
  canisterIds = JSON.parse(fs.readFileSync(isDev ? "./.dfx/local/canister_ids.json" : "./canister_ids.json"));
} catch (e) {
  console.error("\n⚠️  Before starting the dev server run: dfx deploy\n\n");
}

// List of all aliases for canisters
// This will allow us to: import { canisterName } from "canisters/canisterName"
const aliases = Object.entries(dfxJson.canisters).reduce((acc, [name, _value]) => {
  // Get the network name, or `local` by default.
  const networkName = process.env["DFX_NETWORK"] || "local";
  const outputRoot = path.join(__dirname, ".dfx", networkName, "canisters", name);

  return {
    ...acc,
    ["canisters/" + name]: path.join(outputRoot, "index" + ".js"),
  };
}, {});

// 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),
  }),
  {}
);

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

// See guide on how to configure Vite at:
// https://vitejs.dev/config/
export default defineConfig({
  mode: "development",
  plugins: [svelte()],
  root: "./src/website/",
  resolve: {
    alias: {
      "@src": path.resolve(__dirname, "src/website/src"),
      "@utils": path.resolve(__dirname, "src/website/src/utils"),
      "@tasks": path.resolve(__dirname, "src/website/src/tasks"),
      "@components": path.resolve(__dirname, "src/website/src/components"),
      "@icons": path.resolve(__dirname, "src/website/src/icons"),
      "@canisters": path.resolve(__dirname, "src/declarations"),
      "@assets": path.resolve(__dirname, "assets"),
    },
  },
  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"),
    //   },
    // },
  },
  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"),
  },
});