VueJs Boilerplate

Developers
1

Not mine! Doesn’t look like this has been shared here before:

Just need to figure out how to get dev-server running!

If you end up seeing this, huge thanks Nop33!

4 Likes
2

Cool! Below is how people usually get hot reload working, you need to load the DFINITY agent in the browser as it gets injected by the canister.

Then in his index he has this:

So if the environment is development then it calls createAgent. I think this is the cleanest approach I’ve seen.

Also please pay attention to his DFINITY agent version, I think the latest this works with is 0.6.13? After that there is an issue with the BLS wasm file not loading which Im not sure how to fix.

"@dfinity/agent": "0.6.13", is in my package.json

5 Likes
3

Thanks for sharing! Funny you replied, I was just looking at your AS CDK earlier!

Super cool stuff!!

4 Likes
4

Anyone has managed to run this template on dev-server ? Tried a lot of things but can’t get it working for the moment :frowning:

5

@anthonymq - I have a dev-server project I can share that I built before this.

Should be enough to get the above template working.

4 Likes
6

Thanks it helped !
Did you found a way to split your assets in chunks with webpack ? I’m worried I will hit the limit pretty soon and can’t get it working.

7

I suspect you can load them all using the canister apis. However, what I did was just disable generating the source map :\

1 Like
8

Hi @Steve ,
Did you try to use vue-router ?
I get an error “ic is not defined” on every routes when I run on the devserver :frowning:, it works great when I deploy on the local IC.
I don’t understand what is happening.

9

Nevermind, I fixed that.
I was importing my components with “import” instead of “require”.

10

What version of Vue are you using? Also: JS or TS?

11

We will support normal routing for static assets in the asset canister starting with dfx: ^0.7.0. It makes things like Vue and React routers work much more smoothly.

I just wrote a post on adapting an out-of-the box JS framework to deploy to the IC with our new pattern, hope it helps!

2 Likes
12

JS and vue 2.6.12.
@kpeacock I will give it a try

13

Hi @kpeacock ,
I’m trying to update my dfx to the new version.
I have not finished the migration but when I deploy my frontend canister I get an error :

Installing code for canister frontend, with canister_id ryjl3-tyaaa-aaaaa-aaaba-cai
Authorizing our identity (default) to the asset canister...
Uploading assets to asset canister...
  /logo.png 1/1 (85719 bytes)
  /index.html 1/1 (201 bytes)
  /index.js 1/1 (1460952 bytes)
  /sample-asset.txt 1/1 (24 bytes)
Invalid data: Expected arguments but found none.

Does it ring any bell to you ?

14

Hey Kyle,

Would upgrading to the latest @dfinity/agent 7.x.x? Impact this solution at all?

1 Like
15

Ah, there’s a slight bug with Buffer in upgrading to 0.7.1. We plan to get rid of that package soon, but for now the way to manage it is with a webpack config. I’ll update the repo and my blog post

2 Likes
16

Pushed those out. The solution for now is to add something like this to a webpack config, if anyone else encounters it

plugins: [
  new webpack.ProvidePlugin({
    Buffer: [require.resolve("buffer/"), "Buffer"],
  }),
]
4 Likes