Easiest way to get started with frontend. Templates for React/Vue/Svelte based on ViteJS

Its based on ViteJS so you get hot module reloading etc. out of the box and its not very opinionated. It uses a regular dev server while you’re developing (for speed) and when you are finished you can deploy the frontend to the IC. Comes with an example Counter canister.

At the moment React, Vue & Svelte are supported. Lemme know if there’s any issues or question marks.

13 Likes

There’s a CLI tool now.

With NPM:

npx create-ic-app

Just make your selections and follow the instructions.

8 Likes

Seems quite interesting! You might wanna submit it to the GitHub - dfinity/awesome-dfinity: A curated list of awesome projects and resources relating to DFINITY and the Internet Computer project :wink:

4 Likes

Hi @Tbd ! Great work !
I just have an issue while deploying to the local node, when I go to http://localhost:8000/?canisterId=ASSET_CANISTER_ID
I got an error :

Uncaught ReferenceError: require is not defined
    at vendor.7a6e7b4a.js:10

Have you encountered the problem ?
Otherwise it works great on the local Devserver

1 Like

Hey, thanks for using & report it! I must have forgotten about this issue, will see if I can find a solution.

1 Like

There seem to be require statements in the esm version of @dfinity/agent which are causing this issue… for some reason they get compiled away in the react version (so react-ts version doesn’t have this problem) but they shouldn’t be there in the first place. Would be great if that could be fixed for future versions. I’ll see if I can get a workaround for it in the meantime.

1 Like

Yeah, please do call out issues like that and provide specific tracing back to the part of the codebase responsible!

2 Likes

Luckily its only this one. It’s in the esm dir.

Another thing that was causing an issue was the use of “global”. So I had to add this line:

/**
 * @dfinity/agent requires this. Can be removed once it's fixed
 */
(window as any).global = window

Thanks for the quick response!

1 Like

I added a temporary fix which patches @dfinity/agent automatically after running npm install.
This is done automatically for new projects, but since you already have one:

See here:

  • Move the patches dir and its contents to your project root
  • Change package.json to add patch-package in devDependencies and add the scripts > “postinstall”, it should be run automatically when you do npm i
2 Likes

That was quick ! Will try it asap ! Thanks

It worked ! Thanks
@kpeacock let us know when the fix is deployed.

1 Like

Pr’s open! Expect the next patch today or early next week

4 Likes

Small update

  • Added support for Vanilla templates. Slightly more basic now but should get you started
  • Added Instructions on how to deploy to README.md.
1 Like

An update:

[Experimental] Watch mode for canisters

This will auto build and install your canisters whenever you make a change to them

npm run watch

This is also available as a standalone package ic-dfx-utils which can be added as an npm script to any projects package.json as follows:

  "scripts": {
    "watch": "ic-dfx-watch"
  },

But I can’t promise you it works :grinning_face_with_smiling_eyes: Please try it and report issues. It requires dfx canister create --all to be run in beforehand.

4 Likes

Ive updated all the versions since there was a problem on some machines.
Make sure you get the latest SDK version if you use this

DFX_VERSION=0.7.0-beta.8 sh -ci "$(curl -fsSL https://sdk.dfinity.org/install.sh)" 

Also removed the unnecessary patch since its not required anymore.

As always, let me know if you run into issues or find something confusing (I don’t bite).
The repo is also open for PRs if you want to contribute your own templates or find something that could be improved!

4 Likes