Unable to Deploy Existing Frontend

Developers JavaScript
1

I am unable to deploy an existing React application as frontend canisters on the ICP.

Whenever I run dfx deploy, it runs and I receive a frontend canister local link but the components are not rendering. I receive the error Could not find a canister id to forward to when I navigate to the link and a Failed to load resource: the server responded with a status of 400 (Bad Request) in my console.

If I run npm install and npm run dev, I am able to run localhost:3000 and see the components.

Here is how I built the application:

  1. I first built a React application using create-react-app in Typescript (end product is similar to this: GitHub - shahinadev/create-react-app: A sample react app generator.) and now am refactoring the code to deploy the React application as a frontend canister.

  2. I created the following dfx.json manually:

{
    "canisters": {
        "app": {
            "frontend": {
                "entrypoint": "src/index.tsx"
            },
            "source": [
                "src/assets"
            ],
            "type": "assets"
        }
    }
}
  1. I navigated to the folder and ran dfx create canister app. This created a .dfx folder.

What could I be doing wrong?

2

my suspicion is that your source is not pointing to the compiled website. It should point to the directory that’s created when you run npm run build, which is probably dist

1 Like
3

Thank you so much. This did work! I pointed it to my build folder which is created after I ran npm run build.