Dfx generate fetchRootKey broken with vite

Developers
21

Is this the source of the issue? @dfinity/agent returns 403 response - #4 by kpeacock

Everything I have is running on my local replica network though.

22

Okay, I haven’t confirmed but it looks like it’s because I am trying to create an identity from the production II canister, I will probably have to run a local II canister.

23

I’m curious why this should matter though, I thought I had used production II in the past with local apps (maybe not). Should the keypairs not work independently of the network? A keypair is a keypair, I don’t see why I shouldn’t be able to use a “production” keypair locally for signing, it’s just the root key that should determine that. So if I have an identity from production why can’t that be used locally?

24

If it can help, one issue I had with fetchRootKey and vite is the fact that the generated code of agent-js relies on process.env including expecting process.env.DFX_NETWORK.

So in Juno’s config and other vite config I explicitely set these environment variables.

// npm run dev = local
// npm run build = local
// dfx deploy = local
// dfx deploy --network ic = ic
const network = process.env.DFX_NETWORK ?? 'local';

...

define: {
			'process.env': {
				...readCanisterIds({}),
				DFX_NETWORK: network
			}
		}

https://github.com/buildwithjuno/juno/blob/6152af5699d8fe42e84fda32e500351aefefd319/vite.config.ts#L139

1 Like
25

I’m not sure if DFX_NETWORK would make a difference, but possibly.

I think I found the problem, it’s because I was trying to login with the production Internet Identity canister. Apparently that breaks everything. Also running a separate vite server instead of deploying to the canister seemed to complicate things. I am at least unblocked.

It would be great if there were a simpler solution for running a frontend server that doesn’t require much extra configuration or proxy settings, but for now I’ve moved on from that. II was messing things up so much I’m not even sure if my previous assumptions or observations were correct.

2 Likes
26

Hey, I am having the same problem as you, but I got lost within the forum post with so many answers. Could you please provide an overview on how you fixed it?

27

dfx 0.17.0 now includes vite templates for all our dfx new starters. Here is the vanilla config:

import { defineConfig } from 'vite';
import { fileURLToPath, URL } from 'url';
import environment from 'vite-plugin-environment';
import dotenv from 'dotenv';

dotenv.config({ path: '../../.env' });

export default defineConfig({
  build: {
    emptyOutDir: true,
  },
  optimizeDeps: {
    esbuildOptions: {
      define: {
        global: "globalThis",
      },
    },
  },
  server: {
    proxy: {
      "/api": {
        target: "http://127.0.0.1:4943",
        changeOrigin: true,
      },
    },
  },
  publicDir: "assets",
  plugins: [
    environment("all", { prefix: "CANISTER_" }),
    environment("all", { prefix: "DFX_" }),
  ],
  resolve: {
    alias: [
      {
        find: "declarations",
        replacement: fileURLToPath(
          new URL("../declarations", import.meta.url)
        ),
      },
    ],
  },
});

You may need to adjust a couple paths for your app as necessary

1 Like