Developer Journey: Feedback and discussion

Hey @CodeBlocker52,

In the latest version of dfx, the default frontend project template uses a workspace setup. It’s possible that you accidentally deleted the workspace but left the workspace-level scripts.

You can regenerate the necessary files with the commands dfx generate and tsc && vite build.

Let me know if this helps!

@Jessie

Yeah, I fixed that error, it was due to node.js not installed in my wsl , so it couldn’t geneate the frontend set up with vite +tsc . But , I installed node.js and created the app and it’s working. Thanks.

But, now since the app is working , I have a couple of doubts. Could you plz. clarify the same.

  1. The Frontend of working is working at : http://127.0.0.1:4943/?canisterId=be2us-64aaa-aaaaa-qaabq-cai but not working at path: http://be2us-64aaa-aaaaa-qaabq-cai.localhost:4943/ . Don’t know Why ?
  2. On running dfx deploy , it’s auto generate a declarations folder which have poll_backend and poll_frontend as sub -directories. What is actual purpose of these folders in my code. and Is it a good practice to do any changes in these directory at some point if needed ?
  1. This is related to your networks.json file in your dfx configuration. You will need to specify a custom network for localhost:4943 to work in addition to 127.0.0.1:4943: Defining custom networks | Internet Computer

  2. These are for your Candid interface declaration files. When developing in Motoko, these are automatically generated and it is not recommended to edit these manually since dfx will overwrite any changes you make when your code is built. Candid is covered in 2.4 of the Developer Journey: https://internetcomputer.org/docs/current/tutorials/developer-journey/level-2/2.4-intro-candid#the-did-file

1 Like

@Jessie,
I have located the netrwork.json file on my local system , using dfx cmd:

dfx info networks-json-path

It returns me the path as follows: /home/kundan/.config/dfx/networks.json
But, when I am running cat cmd to see the code:

cat  /home/kundan/.config/dfx/networks.json

getting an error: cat: /home/kundan/.config/dfx/networks.json: No such file or directory
How, can I see that file and configure it’s code from my Vs code ?

dfx info networks-json-path shows where dfx is looking for the file, but doesn’t necessarily mean that it currently exists. If it doesn’t exist, you’ll need to create a new file in that location.

I have configured the networks.json as follows:

{
    "local": {
        "replica": {
            "subnet_type": "application"
        }
    },
    "network_1": {
        "bind": "localhost:4943",
        "replica": {
          "subnet_type": "application"
        }
      }
}

After that, I try to redeploy my poll dapp on that network us:

dfx deploy --network network_1

But, the dapp is showing up but not working as expected.

@Severin Could you assist?

Which browser are you on? Safari does not support localhost subdomains.

I am using Brave Browser.

@Severin
On deploying my dapp on mainnet , I am getting the following error using cmd:

dfx deploy --network ic 

Output :


Building canisters before generate for Motoko
WARN: .did file for canister 'poll_frontend' does not exist.
Generating type declarations for canister poll_frontend:
Error: Failed while trying to generate type declarations for 'poll_frontend'.
Caused by: Failed while trying to generate type declarations for 'poll_frontend'.
  Candid file: /mnt/k/developer_journey/poll/.dfx/local/canisters/poll_frontend/assetstorage.did doesn't exist.
npm ERR! Lifecycle script `build` failed with error: 
npm ERR! Error: command failed 
npm ERR!   in workspace: poll_frontend@0.0.0 
npm ERR!   at location: /mnt/k/developer_journey/poll/src/poll_frontend 

Could you help me resolve this issue?

Is this group still active? Is there another group that is actively a helpful source for aspiring ICP developers to help each other?

Never mind. It looks like it’s happening right here. Glad I found this group.

@Jessie
On deploying my dapp on mainnet , I am getting the following error using cmd:

dfx deploy --network ic 

Output :

Building canisters before generate for Motoko
WARN: .did file for canister 'poll_frontend' does not exist.
Generating type declarations for canister poll_frontend:
Error: Failed while trying to generate type declarations for 'poll_frontend'.
Caused by: Failed while trying to generate type declarations for 'poll_frontend'.
  Candid file: /mnt/k/developer_journey/poll/.dfx/local/canisters/poll_frontend/assetstorage.did doesn't exist.
npm ERR! Lifecycle script `build` failed with error: 
npm ERR! Error: command failed 
npm ERR!   in workspace: poll_frontend@0.0.0 
npm ERR!   at location: /mnt/k/developer_journey/poll/src/poll_frontend 

Could you help me resolve this issue?

It looks like the Candid file isn’t being generated. Have you run dfx generate?

Related to tutorial 1.3, Developing your first app, the voting results field is not updating:

Could not find a canister id to forward to.

Great job Jessie and big mahalo for all your work here! I finished the Motoko Bootcamp and this Journey is cool because it really starts at square 1 and helps one setup a local dev environment. Love it!

I’m on 1.3 and backend works great. It’s the frontend that’s a problem. It seems that the more recent version of node.js/dfx creates a different file structure on a dfx new and a vanilla JS when I compare my tree to yours in the video.

% npm -v
10.7.0

%node -v
v22.2.0

this is what gets created in the frontend/src:

ls -RF
assets/		package.json	tsconfig.json
index.html	src/		vite.config.js

./assets:
favicon.ico

./src:
App.js		index.scss	logo2.svg	main.js		vite-env.d.ts
 % 

and if you strictly follow the tut, it definitely breaks. I can mess with it and get the index.html to render but the buttons don’t work.

It’s got to be such a pain to keep updating based on new versions. IMO cleaner and easier to stick to backend only and use Candid to test - save the agony of Node.js etc.

Anyway, if there’s an update LMK otherwise I’ll just keep going and essentially ignore the frontend stuff if it keeps breaking like this (which is fine by me - it’s motoko and ICP I care about anyway - never been much of a frontend guy as it is).

Hi @peterkayhi ! I appreciate the kind feedback and I’m glad you’re enjoying the series!

To get the frontend working, you can clone the Github repo for the 1.3 project and use that, since the file structure should still work as expected in that code.

Thanks!

awesome - now I know where the cheat codes are ! :slight_smile:

looks like this repo needs webpack which was not originally called for (in 0.3). Pardon me for flying blind here - so I installed webpack using brew. Details below - I’m at a loss on what’s next - is the brew-based install a bad idea? (I followed your use of brew to install node.js) what do you recommend?

Now when deploying I get tons of errors but I think the key one is this:

Failed to load '/Users/dad/developer_journey/dev-journey-poll-dapp/webpack.config.js' config
[webpack-cli] Error: Cannot find module 'dotenv'

In case you want to see the rest of the blood and gore that followed:

webpack-cli] Error: Cannot find module 'dotenv'
Require stack:
- /Users/dad/developer_journey/dev-journey-poll-dapp/webpack.config.js
- /opt/homebrew/Cellar/webpack/5.91.0/libexec/lib/node_modules/webpack-cli/lib/webpack-cli.js
- /opt/homebrew/Cellar/webpack/5.91.0/libexec/lib/node_modules/webpack-cli/lib/bootstrap.js
- /opt/homebrew/Cellar/webpack/5.91.0/libexec/lib/node_modules/webpack-cli/bin/cli.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1186:15)
    at Module._load (node:internal/modules/cjs/loader:1012:27)
    at Module.require (node:internal/modules/cjs/loader:1271:19)
    at require (node:internal/modules/helpers:123:16)
    at Object.<anonymous> (/Users/dad/developer_journey/dev-journey-poll-dapp/webpack.config.js:1:1)
    at Module._compile (node:internal/modules/cjs/loader:1434:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1518:10)
    at Module.load (node:internal/modules/cjs/loader:1249:32)
    at Module._load (node:internal/modules/cjs/loader:1065:12)
    at Module.require (node:internal/modules/cjs/loader:1271:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/dad/developer_journey/dev-journey-poll-dapp/webpack.config.js',
    '/opt/homebrew/Cellar/webpack/5.91.0/libexec/lib/node_modules/webpack-cli/lib/webpack-cli.js',
    '/opt/homebrew/Cellar/webpack/5.91.0/libexec/lib/node_modules/webpack-cli/lib/bootstrap.js',
    '/opt/homebrew/Cellar/webpack/5.91.0/libexec/lib/node_modules/webpack-cli/bin/cli.js'
  ]
}

Thanks for letting me know @peterkayhi, I’ll take a look and push some changes to that repo so it works out of the box.