How to use `npm start`

Developers JavaScript
1

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?

2

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

3

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: "http://127.0.0.1:4943",
        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.

4

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

5

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

6

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 https://icp-api.io for mainnet

1 Like