Webpack-dev-server?

Developers Programs & Applications
1

Has anyone tried developing canisters with webpack-dev-server instead of the bootstrap server? Or, is there a faster way to develop than to build and install?

1 Like
2

I guess you can do this locally. You still need to build and install for the network.

3

You can use webpack-dev-server but you’ll have to setup an API proxy to your bootstrap server. You also won’t be storing your frontend on the IC. But it should be totally doable. I could setup an example for it.

4

I managed to get it working with this webpack config:

    plugins: [new HtmlWebpackPlugin()],
    devServer: {
      proxy: {
        "/api": `http://${dfxJson.networks.local.bind}`,
      },
    },

and creating an agent before importing actors:

if (process.env.NODE_ENV === "development") {
  const ic = require("@dfinity/agent");
  if (!window.ic) {
    const { HttpAgent, IDL, Principal } = ic;
    const keyPair = ic.generateKeyPair();
    const agent = new HttpAgent({
      principal: Principal.selfAuthenticating(keyPair.publicKey),
    });
    agent.addTransform(ic.makeNonceTransform());
    agent.setAuthTransform(ic.makeAuthTransform(keyPair));
    window.ic = { agent, HttpAgent, IDL };
  }

  if (!document.getElementById("app")) {
    document.write('<div id="app"></div>');
  }
}

const App = require("./App").default;
...
2 Likes
5

I created a React starter template with the stack I like (dev-server, TS, jest, react, tailwind), feel free to try it out.

Can we get type declarations for canisters @hansl? :slight_smile:

2 Likes
6

Thanks for this!

I recall there was some talk about the type declarations, so it’s probably on the way soon.

7

Yes we are working on a code generator for candid for typescript.

2 Likes