How to use `npm start`

To ease my development process, I want to run the frontend process using npm start rather than in a canister.

But when I try, I get:

Server returned an error:
  Code: 504 (Gateway Timeout)
  Body: Error occurred while trying to proxy: localhost:8080/api/v2/canister/b77ix-eeaaa-aaaaa-qaada-cai/query

Obviously, it because the frontend should query port 8000, not 8080 on which it runs. How to make the frontend query the different port?

assuming you’re using a dfx new template, the webpack dev server config is configured to proxy requests from /api to localhost:4943/api. If you’re using port 8000, you’ll need to update webpack.config.js with your preferred replica port

It queries port 8080 (see the above error message), not 4943, when started as npm start, despite of the following proxy settings.

  devServer: {
    proxy: {
      "/api": {
        target: "",
        changeOrigin: true,
        pathRewrite: {
          "^/api": "/api",
    static: path.resolve(__dirname, "src", frontendDirectory, "assets"),
    hot: true,
    watchFiles: [path.resolve(__dirname, "src", frontendDirectory)],
    liveReload: true,

I don’t understand, what’s wrong.

8080 is the port your dev server is running on. It queries its own host, which is then proxying the request to

So, apparently, it should instead query 8000 where the canisters run. How to make it query 8000 instead of its own host?

You would replace 4943 with 8000

Alternately, you can specify the host by using the createActor export from your declarations, and passing agentOptions -> host with the url of your local replica or for mainnet

1 Like