Development workflow: quickly test code modifications

Developers
21

I finally got this working and am hot-reloading like a champ, even post-login!

The problem was that, for some reason, in my dfx.json I had it set up to bind to 0.0.0.0 instead of localhost, so webpack’s proxy to localhost would fail to find my canisters when attempting to communicate, even as early as fetching things like /api/v2/status from my replica. I’m not sure why I ever switched it to 0.0.0.0 in the first place, but binding to localhost as follows instead of 0.0.0.0 resolves the issue:

dx.json:

{
  ...
  "networks": {
    "local": {
      "bind": "127.0.0.1:8000",
      "type": "ephemeral"
    }
  }
}

This works with the default proxy settings set up by dfx new in webpack.config.js:

devServer: {
  proxy: {
    "/api": {
      target: "http://127.0.0.1:8000",
      changeOrigin: true,
      pathRewrite: {
        "^/api": "/api",
      }
    }
  }
}

Now calls like http://r7inp-6aaaa-aaaaa-aaabq-cai.localhost:3000/api/v2/status successfully proxy to my canister running on port 8000, and further communication with the canister, including after login via locally running Internet Identity, works just fine. Webpack’s proxy works just fine for this purpose without involving esbuild or icx-proxy.

It was a simple fix, but I am very relieved to get this working and am off to make some hot-reload-assisted rapid progress on all my post-login pages!

Thanks for all your help, @paulyoung!

edit: updated code above to use 127.0.0.1 instead of localhost. See below.

2 Likes
22

Note to self for the future: bind to 127.0.0.1:8000 instead of localhost:8000 since binding to localhost sometimes uses ipv6’s [::1] address, which won’t work with [cid].localhost:8000 addresses.

4 Likes