EatTheBlocks Forum

Problem at the frontend part of the part 4 of DAPP30

Hello everyone,

I am stuck at the frontend part of the day4 of DAPP30. When I want to make a transaction by entering a number and by clicking on submit, nothing happens (Metamask does not ask for the confirmation of the transaction). I think it’s because Metamask indicates “not connected”(see picture below).

Here is my environment:
Ganache 2.1.1
Truffle v5.0.42 (core: 5.0.42)
Solidity v0.5.8 (solc-js)
Node v14.4.0
Web3.js v1.2.1
Last version of Google Chrome

Do you know how to make Metamask connecting please?

Thank you in advance

Take care
Pierre

Hi Pierre,

What do you see in the Javascript console when you click on submit?

For Metamask not connected, it means you are not running Ganache or have entered incorrect URL/PORT. You need to be running Ganache while you are doing the test.

Do you use the exact code from Github, and not the one you coded yourself?
You might have made a typo in your code

Hi Julian,

Thanks for you answer.
I see this in the javascript console when I click on submit:
image

I notice that I used the code in the end folder and there was no bundle.js so I created one and I put in it the code of the index.js file. If I don’t create a bundle.js file the javascript console complains that there is no bundle.js file.

Ganache is running correctly.

Thank you for your help.

Pierre

bundle.js is created automatically and is the result of a complex processing by a tool called Webpack. You shouldnt create it yourself.

Are you running the server for the frontend? (npm start) This process re-create the bundle file everytime there is a code change.

Hi Julian,

Thanks for your answer.
I did not typed npm start but after having typed it, it still does not work.
And now I have this message:
image

It seems it is not finding the bundle.js file.

Thanks

Pierre

Hi Pierre,

I believe there is a confusion about the development process.

npm start:

  • runs webpack, which compiles your Javascript code (in src folder) into a bundle.js file, and save it in public
  • everytime you change anything in Javascript, it recompiles this bundle.js file
  • In public directory, you have a file called index.html. This file references bundle.js
  • a server is also started with npm start. It runs at http://localhost:3000 in your browser
  • when you load http://localhost:3000 in your browser, it loads the index.html file, which itself load bundle.js, which itself start your Javascript code
  • and after that you see some output in the Javascript console

The error you shows seem to mean that you are not running npm start and you are trying to access the frontend in your browser. You have to run npm start first, and keep it running in your terminal.

Another possibility is that there is an error in your Javascript code. In this case webpack refuses to compile, does not produce a bundle.js file and show you the error in the console.

If you are still stuck after all of this, please send me an email at julien [at] eattheblocks [dot] com, and we can schedule a quick 10min session to unstuck you.