SOLVED - frontend not communicating with Mokoto backend

Hello,
I’m starting out with the 1st tutorial (1.3 programming language poll) and I am unable to get it to work. I’ve set everything up and dfx apparently runs fine. The back-end works fine, the calls work as expected. The front-end spins up and the html displays as expected (without data), but the front-end is not communicating with the Mokoto back-end. No data is being passed.
DFX starts fine (?). It’s using the default definition for the ‘local’ shared network because networks.json does not exist. I’m running local.
DFX deploy runs apparently ok. I’m only getting a WARN: Building canisters before generate for Motoko. But the canisters appear to start, I can access them. When I try clicking the buttons on the frontend, nothing happens (even in the console), but after 2 or 3 clicks, I get “Could not find a canister id to forward to.”

I’m running on a new Ubuntu image set up just for this project.
$ dfx --version dfx 0.18.0
$ node -v v20.11.1

I’ve checked the code, the locations of the files, restarted, reloaded, rebuilt from scratch, etc…
Any help or assistance would be greatly appreciated!
Thank you

1 Like

When at “dfx new …” did you select a framework ? Last time I looked at this part ( 0.17 ) there was some issue with failing to build the backend, will take a look at it tomorrow if you can’t figure it out by then.

Hi Zack,
Thanks for the response.

I followed the tutorial build guidelines. I selected Motoko for the back-end canister type and vanilla JS for the front-end and no extra added features.

Since the front end works (without data) and the back end works (because the queries work on the back end url) then I’m assuming the issue must be with the canister to canister communication. I looked at the network.json file and tried defining local but that didn’t work either.
I disabled all ad blockers and scanners, maybe that was a problem, still no help.

I tried downgrading some of the packages as suggested in another post. That a didn’t work for me either. I’m back to running these and dfx 0.18.0 …
@dfinity/agent@0.20.2
│ ├── @dfinity/candid@0.20.2
│ ├── @dfinity/principal@0.20.2
│ ├── @testing-library/jest-dom@5.17.0
│ ├── cross-fetch@3.1.8
│ ├── dotenv@16.4.5
│ ├── lit-html@2.8.0
│ ├── sass@1.72.0
│ ├── typescript@5.4.2
│ ├── vite-plugin-environment@1.1.3
│ ├── vite@4.5.2
│ └── vitest@0.32.4
└── webpack-cli@5.1.4

I’m looking to run the most current (that works.)

The other thread mentions to run dfx start with logging…

dfx start --clean -vv
Trace mode enabled. Lots of logs coming up.
Running dfx start for version 0.18.0
There is no project-specific network ‘local’ defined in /home/username/ic-projects/reactor/dfx.json
Using the default definition for the ‘local’ shared network because /home/username/.config/dfx/networks.json does not exist.
Local server configuration:
bind address: 127.0.0.1:4943
bitcoin: disabled
canister http: enabled
log level: Error
replica:
subnet type: Application
log level: Error
data directory: /home/username/.local/share/dfx/network/local
scope: shared

Starting canister http adapter…
canister http adapter ready
Starting replica…
replica ready on 46735, so re/starting icx-proxy
Waiting for replica to report healthy status
Starting icx-proxy…
2024-03-18T21:48:45.113855Z INFO icx-proxy: icx_proxy: Log Level: info
2024-03-18T21:48:45.132745Z INFO icx-proxy: icx_proxy_dev::proxy: Starting server. Listening on http://127.0.0.1:4943/
Initialized replica.
Dashboard: http://localhost:46735/_/dashboard
2024-03-18T21:48:57.979078Z INFO handler: icx_proxy_dev::proxy::agent: forwarding addr=127.0.0.1:46476 replica=http://localhost:46735/
2024-03-18T21:48:57.997858Z INFO handler: icx_proxy_dev::proxy::agent: forwarding addr=127.0.0.1:46476 replica=http://localhost:46735/
and so on …

Maybe are clues here.
I don’t get any errors. It just doesn’t communicate.

1 Like

Hey so sorry couldn’t get to try and reproduce this yet, tagging @Jessie and @Severin maybe can take a look, would appreciate it. Redoing the whole dev journey with latest changes on baremetal Linux is high on priority list. Also the Discord is pretty helpful if you haven’t tried it yet.

This looks like the critical line. How do you hook the frontend to the backend? And IIRC you’re running dfx deploy, right? If not, then you could be accidentally deploying code that includes canister ids from the wrong environment

1 Like

I found the solution on discord. I finally was able to get this to work.

  • Built a new project selecting Motoko and Vanilla JS as the “dfx new” options.

  • created my project (i used the tutorial)

  • built and deployed like normal (but this is broken like described above.)

  • added this 2 lines of code to the index.html file above the last 2 lines ( and ) and saved …

  • moved both index.js and index.html to the same directory level as the assets folder, not in the assets folder but the same level. (I used poll as the project name)
    \wsl.localhost\Ubuntu\home\myuser\ic-projects\poll\src\poll_frontend

  • Rebuilt and redeployed. This time it worked!!!

The link to the discord is here Discord link to this fix

1 Like