How to use style sheets

Developers Getting Started
1

Hey there

I’m trying modify the code in this tutorial https://sdk.dfinity.org/docs/developers-guide/tutorials/custom-frontend.html. However I’m having some trouble using using a separate stylesheet. I have a file called index.css in the public/src directory however when I try to import it on the top with import “./index.css”; I get the following error in the browser:

An error happened:
Error: An error happened while retrieving asset "index.js":
  Status: rejected
  Message: IC0503: Canister ic:0D75C81A6F63E9FE95 trapped explicitly: assertion failed at /Users/dfinitybasics/dfnProject/hello/src/hello/main.mo-assets:7.25-7.37

at http://localhost:8000/index.js:2:144013
at async _loadJs (http://localhost:8000/index.js:2:89821)
at async _main (http://localhost:8000/index.js:2:90986)

when I prettify index.js this is where it seems to go wrong:

retrieveAsset(e, t) {
                const r = f.encode([f.Text], [t]);
                return this.query(e, {
                    methodName: "__dfx_asset_path",
                    arg: r
                }).then(e=>{
                    switch (e.status) {
                    case "rejected":
                        throw new Error(`An error happened while retrieving asset "${t}":\n` + `  Status: ${e.status}\n` + `  Message: ${e.reject_message}\n`);
                    case "replied":
                        const [r] = f.decode([f.Text], e.reply.arg);
                        return i.toByteArray("" + r)
                    }
                }
                )
            }

The file is in the same directory as index.jsx and when I comment the import out it seems to work fine. I looked at the linkup example and the stylesheet seems to be imported the same way so I don’t know what is going wrong here

Edit: Also it would be really nice to have a command that build and installs the canister and then opens the browser with the correct ID. It is a bit cumbersome to manually enter those commands yourself with every iteration and then manually copy the id.

2 Likes
2

For the latter, you can use the crc8.py python script and bash commands from the linkedup repo (needs python2).

So to open the canister frontend in your web browser:

ID=$(xxd -u -p canisters/linkedup/_canister.id)
CRC=$(python2 -c "import crc8;h=crc8.crc8();h.update('$ID'.decode('hex'));print(h.hexdigest())")
xdg-open "http://127.0.0.1:8000/?canisterId=ic:$ID$CRC"

https://github.com/dfinity-lab/linkedup?files=1

https://github.com/dfinity-lab/linkedup/blob/master/README.md

1 Like
3

For this you either need the crc8.py in your directory or install it with pip (notice that this uses python 2). If you‘re on mac, change xdg-open to open. You can just create a shell script like this

2 Likes
4

A little bit hard to troubleshoot without seeing your code, mind sharing a repo? This worked fine for me (tested on 0.5.7)

1 Like
5

Oh, i just noticed you say your file is index.jsx, but the command line output is looking for index.js. You would need to modify your dfx.json to fit the new name (edit the entrypoint).

1 Like
6

I did modify the json actually

1 Like