How does the Hello starter project work? Files, paths, function call flow?

Hello Dfiners,

I got the hello project up and running with your kind help. Now I am trying to pick it apart, and several things are mystifying / blocking me. Also, I think I should post here several things that might help others.

Firstly, in many of the tutorials, commands are used that do not work for me unless I do them with sudo. For example, even simply checking the installed version of dfx:

dfx --version

Will not work unless you type

sudo dfx --version

and then supply your password on the next line.

I really feel you should mention this in the tutorials. Not every user is familiar with linux / mac and it’s tight security.

So, I see that when you run: sudo dfx start

You get the default hello project no mater what you name your project. So, this works similarly to node start.

The file structure that you get is very complex, and repetitive, but the three most important files, in my opinion are:

hello/scr/hello_assest/scr/index.html
hello/scr/hello_assest/scr/index.js
and
hello/scr/hello/main.mo

index.html is the the source code for the web page that the users will see, and interact with.
index.js is the javascript, (very highest level) that will grab the text box values and call the public motoko functions. It can also, of course, get the results back asynchronously, and take update the web page with appropriate actions / text. In my first use case it will up date a tic tac toe game board.

main.mo is the Motoko source code. It will be the engine of this type of application. For the simple
hello example it just spits back what you typed in, but it puts "Hello, " in front of it. Motoko seem to use # as a concatenation character.

Now for my questions:

I want to get going on making my applications by modifying this one.

I called sudo dfx start winSlash

I got a paths to my important files like this:

winSlash/scr/winSlash_assest/scr/index.html
winSlash/scr/winSlash_assest/scr/index.js
and
winSlash/scr/winSlash/main.mo

I edited all of these files, trying to add my first little baby step code of my own.
Most importantly:

My main.mo file now reads:

actor {
private ourGame : Text;
public func greet(name : Text) : async Text {
return "Hello, " # name # “!”;
};
public func move(pieceType : Text, slot : nat) : async Text {
ourGame = “12xo567o9”;
return "gameString: " # ourGame;
};
};

As you can see I have created a public function called move. Currently, the parameters do nothing, but I have a new text box and button in the index.html file, and I have also mimicked the function call in the index.js file.

I got the dfx server running in the background, then I create my canisters and all seemed to be well:

Admins-MacBook-Pro:winSlash admin$ sudo dfx canister create --all

Password:

Creating a wallet canister on the local network.

The wallet canister on the “local” network for user “default” is “rkp4c-7iaaa-aaaaa-aaaca-cai”

Creating canister “winSlash”…

“winSlash” canister created with canister id: “rno2w-sqaaa-aaaaa-aaacq-cai”

Creating canister “winSlash_assets”…

“winSlash_assets” canister created with canister id: “renrk-eyaaa-aaaaa-aaada-cai”

Admins-MacBook-Pro:winSlash admin$

But, when I went to load my new code in Chrome I got:

Replica Error (3): “IC0304: Attempt to execute a message on canister renrk-eyaaa-aaaaa-aaada-cai which contains no Wasm module”

What more piping / path work is needed?

Also, I am confused. The index.html file included the Dfinity logo with a simple src=“logo.png” but there is no file “logo.png” in it’s folder. Why does this work non-the-less, once the project is compiled into canisters?

Another sticking point. I got an error when I tried to just modify the code, and then re-compile the project under the same name: “hello”. It said that the canisters of these names, already exist. That is fair enough, but is there a way to over-write them, or delete them? Or would I have to create a new name every time I want to make a change or test my application? That would lead to about 60 copies at least, the way I work.

Thanks, I know this is a long post, but you folks are the best / only source of information to move forward on this.

James McLain
Family Game Night Forever
Find my project videos on YouTube, search FGNF

I don’t see any “dfx build” step after you wrote/edited your main.mo. That’s probably why you have no wasm module.

You should go through Tutorials :: Internet Computer - the hello world project and others are analyzed in detail (exactly what you are trying to do by yourself :slight_smile: ). All your questions are addressed therein.

If above comment doesn’t work, try restarting dfx with this command:

dfx start --clean

Sometimes doing a clean start solves some problems.

It shouldn’t be necessary to use sudo. Maybe dfx was installed using sudo? I don’t use sudo when running dfx commands.

The logo is in the assets folder, look for the logo.png file in the src/winSlash_assets/assets folder, where you also will find the CSS file.

1 Like