mioquispe / create-ic-app

Use your favourite frontend framework with the Internet Computer

Create IC App

Use your favourite frontend framework with the Internet Computer. Powered by ViteJS

Quick start

Requirements

• DFINITY Canister SDK latest version
• NodeJS version >= 12

1. Start the wizard and choose your preferred settings (npx comes with NodeJS)

npx create-ic-app@latest

2. After the setup is finished run:

cd my-ic-app

npm install
dfx start --background
dfx deploy
npm run dev

3. Thats it! Ready to go.

Canisters

Import them in your Javascript like so, it is configured in vite.config.js to work automatically

import { counter } from "canisters/counter"

When wishing to remove, add or rename a canister, you will have to edit 2 files:

• /dfx.json
• /tsconfig.json (if using typescript, see paths option)

Deploying

More detailed walkthrough soon. For now follow the official guides.

For Fleek

• Choose fleek/create-react-app as the docker image
• Set publish directory as dist

FAQ

Q: Is this usable for real apps or just for toys?

A: Yes 100% usable. You don't have to use webpack anymore. ViteJS bundles with rollup when you run the npm run build command. This can result in even smaller sizes than with webpack (which most frameworks are leaving behind). However when developing it skips that because it's unnecessary, and hence provides a better experience.

Q: I want to modify things like directory structure. Can I?

A: Yes! Go wild. ViteJS is very customizable and has excellent documentation. This project is only aiming to provide useful defaults and to get you started quickly.

Contributions

Want to contribute your own template? Find something that could be improved? Repo is open for PRs.

🏆 @ferMartz (React JS + Tailwind template)

create-ic-app's Issues

Deploy doesn´t works in ic

I have a project created with create-ic-app@latest command, leaving intact it, it works fine in local, but it doesn´t works in ic, throwing the following javascript error in browser console:

Unable to fetch root key. Check to ensure that your local replica is running

Error: Failed to parse
at Uint8ArrayDecoder$2._decode (index.6fb51243.js:65:66389)
at Uint8ArrayDecoder$2.decodeFirst (index.6fb51243.js:65:66504)
at decode$5 (index.6fb51243.js:66:10453)
at HttpAgent$1.status (index.6fb51243.js:78:11)
at async HttpAgent$1.fetchRootKey (index.6fb51243.js:78:108)
(

caught (in promise) Error: Failed to parse
at Uint8ArrayDecoder$2._decode (index.6fb51243.js:65:66389)
at Uint8ArrayDecoder$2.decodeFirst (index.6fb51243.js:65:66504)
at decode$5 (index.6fb51243.js:66:10453)
at HttpAgent$1.query (index.6fb51243.js:72:11)
at async _e (index.6fb51243.js:885:2960)
at async pr (index.6fb51243.js:2786:3025)

I think that this happens when receiving the response from the backend canister, but I'm not entirely sure

The issue can be easily replicated by creating a project and deploying it to ic without making any changes or additions to the code like these commands:

npx create-ic-app
dfx deploy --network ic
--> set name, package empty, and select react option

Open the url with the frontend canister and check javascript console.

Thanks for your help

The command '"npm" "run" "build"' failed with exit status 'exit code: 1'

Thanks for the work you are doing, we are trying to get a successful "svelte" Javascript install on Ubuntu 20.04 dfx version 0.8.1 and on running "dfx deploy" we are hitting the following messages...

The post-build step failed for canister 'rrkah-fqaaa-aaaaa-aaaaq-cai' with an embedded error: The command '"npm" "run" "build"' failed with exit status 'exit code: 1'.
Stdout:

[email protected] build
vite build

Stderr:
internal/modules/cjs/loader.js:638
throw err;
^

Error: Cannot find module 'worker_threads'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object. (/home/mikebrunt/create-ic-app-main_2/create_ic_app/svelte-version/node_modules/vite/dist/node/chunks/dep-55830a1a.js:14:20)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)

DFX latest? I have 0.10.0

The guide says 0.8.2 as the latest, though I have 0.10.0. After I npm install dfx start and then...

dfx deploy
Creating a wallet canister on the local network.
The wallet canister on the "local" network for user "default" is "rklht-iiaaa-aaaaa-aaaaa-cai"
Deploying all canisters.
Creating canisters...
Creating canister "assets"...
"assets" canister created with canister id: "rrkah-fqaaa-aaaaa-aaaaq-cai"
Creating canister "counter"...
"counter" canister created with canister id: "ryjl3-tyaaa-aaaaa-aaaba-cai"
Building canisters...
Building frontend...
Error: The post-build step failed for canister 'rrkah-fqaaa-aaaaa-aaaaq-cai' (assets) with an embedded error: The command '"npm" "run" "build"' failed with exit status 'exit status: 1'.
Stdout:

> [email protected] build
> vite build

vite v2.9.13 building for production...
transforming...
✓ 394 modules transformed.

Stderr:
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
'PipeArrayBuffer' is not exported by node_modules/@dfinity/candid/lib/esm/index.js, imported by node_modules/@dfinity/agent/lib/esm/canisterStatus/index.js
file: ~/node_modules/@dfinity/agent/lib/esm/canisterStatus/index.js:2:20
1: /** @module CanisterStatus */
2: import { lebDecode, PipeArrayBuffer } from '@dfinity/candid';
                       ^
3: import { Principal } from '@dfinity/principal';
4: import { Cbor, Certificate, toHex } from '..';
error during build:
Error: 'PipeArrayBuffer' is not exported by node_modules/@dfinity/candid/lib/esm/index.js, imported by node_modules/@dfinity/agent/lib/esm/canisterStatus/index.js
    at error (~/node_modules/rollup/dist/shared/rollup.js:198:30)
    at Module.error (~/node_modules/rollup/dist/shared/rollup.js:12555:16)
    at Module.traceVariable (~/node_modules/rollup/dist/shared/rollup.js:12914:29)
    at ModuleScope.findVariable (~/node_modules/rollup/dist/shared/rollup.js:11566:39)
    at ReturnValueScope.findVariable (~/node_modules/rollup/dist/shared/rollup.js:6486:38)
    at ChildScope.findVariable (~/node_modules/rollup/dist/shared/rollup.js:6486:38)
    at Identifier.bind (~/node_modules/rollup/dist/shared/rollup.js:7553:40)
    at NewExpression.bind (~/node_modules/rollup/dist/shared/rollup.js:5383:23)
    at CallExpression.bind (~/node_modules/rollup/dist/shared/rollup.js:5379:73)
    at CallExpression.bind (~/node_modules/rollup/dist/shared/rollup.js:9049:15)

To fix what is recommended? I'm guessing it is a mismatch due to dfx versions, but is not 0.10.0 the latest?

[vite] http proxy error

I followed the steps of the tutorial and got an error at the last step(npm run dev), the error log is:
`
11:38:46 [vite] http proxy error:
Error: connect ECONNREFUSED ::1:8000
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1157:16) (x2)

`
the type of project is react -> js/ts,

when us http://127.0.0.1:8000/?canisterId=rrkah-fqaaa-aaaaa-aaaaq-cai in browser the page works fine

Import web3 error

Use template-react, import Web3 from "web3"
Prompt Object prototype may only be an Object or null: undefined

Website?

Hi there, do you have a website? I could include that in my awesome IC list if you are planning to launch the service/app.

https://zire.github.io/awesome-IC/

Template for react with tailwind

I created a template for react with tailwind based on your react template. Would you be interested to add it to this repo?

how to use local frontend to test ic network(not local)?

when use local frontend, the agentjs raise "DestinationInvalid" error. use frontend in ic network canister no this error.

Non-Critical Error when using react-time-picker

I needed a time input so initially was going to use: https://www.npmjs.com/package/react-time-picker however, when I try to do the basic example I get the following console error:

Uncaught Error: Dynamic require of "~/node_modules/react-clock/dist/Clock.css" is not supported
    __require chunk-ACCAMVX6.js:12
    js entry.js:8
    __require2 chunk-ACCAMVX6.js:18
    <anonymous> react-time-picker:1
[chunk-ACCAMVX6.js:12:9](http://localhost:3000/node_modules/.vite/deps/chunk-ACCAMVX6.js?v=7a9889ac)
    __require chunk-ACCAMVX6.js:12
    js entry.js:8
    __require2 chunk-ACCAMVX6.js:18
    <anonymous> react-time-picker:1
    InnerModuleEvaluation self-hosted:2325
    InnerModuleEvaluation self-hosted:2325
    InnerModuleEvaluation self-hosted:2325
    InnerModuleEvaluation self-hosted:2325
    evaluation self-hosted:2286

Not that this is critical thing, there are many ways to add time inputs, but in case it reflects a more significant issue I thought I'd post the issue here.

Can't find variable require after deploying canisters

Following readme and can run npm run dev, but won't run from deployed canisters

dfx 0.7.0-beta.8
node v14.15.4
npm 6.14.10
MacOS 11.3.1

Vite config with React and JS

Rust support

Hi, I am planning to work on the rust support. I would like to know if anyone else would want tot contribute.

Error when running npx create-ic-app@latest

Hey,
Looks like you published the dev branch instead of the main branch maybe?
I get error when I run npx create-ic-app@latest

Error: ENOENT: no such file or directory, scandir /node_modules/create-ic-app/langs'

It's looking for the lang directory but it's not there on main, however I found the last PR for internationalization is merged to dev instead which had the lang dir.

Internet Identity does not work on prod with this.

Hello!

agentOptions: the identity is never passed to this. So on local all may seem well, but when you push to the IC all msg.caller fields will be anonymous making all msg.callers the same Principal.

There needs to be a way to pass the currently logged in user to agentOptions as identity. This will allow the calls to be made as that person for shared(msg) in Motoko.

Let me know if there is already a way to pass the identity into the createActor.

Would love to see an angular template maintained here as well

Any plans for that?

Add Internet Identity Dev Build

Hi,

Internet Identity dev here. Just a quick note: It would be good if the templates included the Internet Identity dev build for local authentication. The reason being that the local replica will not accept canister signatures from mainnet. So to really develop canisters enforcing authentication with Internet Identity the dev build has to be used anyways.

We have a complete working example of how to most easily accomplish this here: https://github.com/dfinity/internet-identity/tree/main/demos/using-dev-build

Best regards,
Frederik

react sample can't find counter.did.js - (workaround provided)

The counter.did.js file can't be found under ../.dfx/local/canisters/counter. I tried react+javascript and react+typescript. Seems the build needs to include dfx generate.

I had to: 1) generate the candid interfaces manually using dfx generate. 2) Update the App.jsx file with the proper import:

import * as counter from "../src/declarations/counter"

Stderr:
Could not resolve './counter.did.js' from .dfx/local/canisters/counter/index.js
error during build:
Error: Could not resolve './counter.did.js' from .dfx/local/canisters/counter/index.js
at error (/home/hosermage/projects/dfinity/create-ic-app/ledger_sample_react/node_modules/rollup/dist/shared/rollup.js:198:30)
at ModuleLoader.handleResolveId (/home/hosermage/projects/dfinity/create-ic-app/ledger_sample_react/node_modules/rollup/dist/shared/rollup.js:22464:24)
at /home/hosermage/projects/dfinity/create-ic-app/ledger_sample_react/node_modules/rollup/dist/shared/rollup.js:22427:26

Error on dfx build

failed to load config from /site/vite.config.ts
error during build:
Error: Not supported

Any idea why this is happening?

npm @latest is pointing to an old version

Hello,
Thanks for the great work.
I noticed that latest on npm is pointing at 0.1.7 and not to latest
https://www.npmjs.com/package/create-ic-app/v/0.0.9

did it ever work as expected?

Following the instructions of README.md:

[andre@nopogi connect2ic]$ npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/svelte
npm ERR! dev svelte@"^3.42.5" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer svelte@"^4.0.0" from @sveltejs/[email protected]
npm ERR! node_modules/@sveltejs/vite-plugin-svelte
npm ERR! dev @sveltejs/vite-plugin-svelte@"next" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /home/andre/.npm/_logs/2023-11-02T15_05_13_317Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /home/andre/.npm/_logs/2023-11-02T15_05_13_317Z-debug-0.log
[andre@nopogi connect2ic]$ npm i --force
npm WARN using --force Recommended protections disabled.
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @sveltejs/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/svelte
npm WARN peer svelte@"^4.0.0" from @sveltejs/[email protected]
npm WARN node_modules/@sveltejs/vite-plugin-svelte/node_modules/@sveltejs/vite-plugin-svelte-inspector
npm WARN @sveltejs/vite-plugin-svelte-inspector@"^2.0.0-next.0 || ^2.0.0" from @sveltejs/[email protected]
npm WARN node_modules/@sveltejs/vite-plugin-svelte
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer svelte@"^4.0.0" from @sveltejs/[email protected]
npm WARN node_modules/@sveltejs/vite-plugin-svelte
npm WARN dev @sveltejs/vite-plugin-svelte@"next" from the root project
npm WARN 1 more (@sveltejs/vite-plugin-svelte-inspector)
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/svelte
npm WARN peer svelte@"^4.0.0" from @sveltejs/[email protected]
npm WARN node_modules/@sveltejs/vite-plugin-svelte
npm WARN dev @sveltejs/vite-plugin-svelte@"next" from the root project
npm WARN 1 more (@sveltejs/vite-plugin-svelte-inspector)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @sveltejs/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/vite
npm WARN peer vite@"^5.0.0-beta.1 || ^5.0.0" from @sveltejs/[email protected]
npm WARN node_modules/@sveltejs/vite-plugin-svelte/node_modules/@sveltejs/vite-plugin-svelte-inspector
npm WARN @sveltejs/vite-plugin-svelte-inspector@"^2.0.0-next.0 || ^2.0.0" from @sveltejs/[email protected]
npm WARN node_modules/@sveltejs/vite-plugin-svelte
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer vite@"^5.0.0-beta.1 || ^5.0.0" from @sveltejs/[email protected]
npm WARN node_modules/@sveltejs/vite-plugin-svelte
npm WARN dev @sveltejs/vite-plugin-svelte@"next" from the root project
npm WARN 1 more (@sveltejs/vite-plugin-svelte-inspector)
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/vite
npm WARN peer vite@"^5.0.0-beta.1 || ^5.0.0" from @sveltejs/[email protected]
npm WARN node_modules/@sveltejs/vite-plugin-svelte
npm WARN dev @sveltejs/vite-plugin-svelte@"next" from the root project
npm WARN 1 more (@sveltejs/vite-plugin-svelte-inspector)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/vite
npm WARN peer vite@"^5.0.0-beta.1 || ^5.0.0" from @sveltejs/[email protected]
npm WARN node_modules/@sveltejs/vite-plugin-svelte/node_modules/@sveltejs/vite-plugin-svelte-inspector
npm WARN @sveltejs/vite-plugin-svelte-inspector@"^2.0.0-next.0 || ^2.0.0" from @sveltejs/[email protected]
npm WARN node_modules/@sveltejs/vite-plugin-svelte
npm WARN
npm WARN Could not resolve dependency:
npm WARN peerOptional vite@"^3.0.0 || ^4.0.0 || ^5.0.0" from [email protected]
npm WARN node_modules/@sveltejs/vite-plugin-svelte/node_modules/vitefu
npm WARN vitefu@"^0.2.5" from @sveltejs/[email protected]
npm WARN node_modules/@sveltejs/vite-plugin-svelte
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/vite
npm WARN peerOptional vite@"^3.0.0 || ^4.0.0 || ^5.0.0" from [email protected]
npm WARN node_modules/@sveltejs/vite-plugin-svelte/node_modules/vitefu
npm WARN vitefu@"^0.2.5" from @sveltejs/[email protected]
npm WARN node_modules/@sveltejs/vite-plugin-svelte
npm WARN deprecated @types/[email protected]: This is a stub types definition. sass provides its own type definitions, so you do not need this installed.
npm WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead

added 130 packages, and audited 131 packages in 16s

16 packages are looking for funding
run npm fund for details

found 0 vulnerabilities
[andre@nopogi connect2ic]$
[andre@nopogi connect2ic]$
[andre@nopogi connect2ic]$
[andre@nopogi connect2ic]$
[andre@nopogi connect2ic]$
[andre@nopogi connect2ic]$ dfx start --background --clean
Running dfx start for version 0.15.1
Using project-specific network 'local' defined in /home/andre/play/tic/connect2ic/dfx.json
Initialized replica.
Dashboard: http://localhost:34539/_/dashboard
[andre@nopogi connect2ic]$ dfx deploy
Deploying all canisters.
Creating a wallet canister on the local network.
The wallet canister on the "local" network for user "default" is "bnz7o-iuaaa-aaaaa-qaaaa-cai"
Creating canisters...
Creating canister assets...
assets canister created with canister id: bkyz2-fmaaa-aaaaa-qaaaq-cai
Creating canister counter...
counter canister created with canister id: bd3sg-teaaa-aaaaa-qaaba-cai
Building canisters...
Building frontend...
Error: Failed while trying to deploy canisters.
Caused by: Failed while trying to deploy canisters.
Failed to build all canisters.
Failed while trying to build all canisters.
The post-build step failed for canister 'bkyz2-fmaaa-aaaaa-qaaaq-cai' (assets) with an embedded error: Failed to build frontend for network 'local'.: The command 'cd "/home/andre/play/tic/connect2ic" && ASSETS_CANISTER_ID="bkyz2-fmaaa-aaaaa-qaaaq-cai" CANISTER_CANDID_PATH="/home/andre/play/tic/connect2ic/.dfx/local/canisters/assets/assetstorage.did" CANISTER_CANDID_PATH_COUNTER="/home/andre/play/tic/connect2ic/.dfx/local/canisters/counter/counter.did" CANISTER_CANDID_PATH_counter="/home/andre/play/tic/connect2ic/.dfx/local/canisters/counter/counter.did" CANISTER_ID="bkyz2-fmaaa-aaaaa-qaaaq-cai" CANISTER_ID_ASSETS="bkyz2-fmaaa-aaaaa-qaaaq-cai" CANISTER_ID_COUNTER="bd3sg-teaaa-aaaaa-qaaba-cai" CANISTER_ID_assets="bkyz2-fmaaa-aaaaa-qaaaq-cai" CANISTER_ID_counter="bd3sg-teaaa-aaaaa-qaaba-cai" COUNTER_CANISTER_ID="bd3sg-teaaa-aaaaa-qaaba-cai" DFX_NETWORK="local" DFX_VERSION="0.15.1" "npm" "run" "build"' failed with exit status 'exit status: 1'.
Stdout:

[email protected] build
tsc && vite build

Stderr:
failed to load config from /home/andre/play/tic/connect2ic/vite.config.ts
error during build:
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in /home/andre/play/tic/connect2ic/node_modules/@sveltejs/vite-plugin-svelte/package.json
at new NodeError (node:internal/errors:405:5)
at exportsNotFound (node:internal/modules/esm/resolve:359:10)
at packageExportsResolve (node:internal/modules/esm/resolve:639:13)
at resolveExports (node:internal/modules/cjs/loader:567:36)
at Module._findPath (node:internal/modules/cjs/loader:636:31)
at Module._resolveFilename (node:internal/modules/cjs/loader:1063:27)
at Module._load (node:internal/modules/cjs/loader:922:27)
at Module.require (node:internal/modules/cjs/loader:1143:19)
at require (node:internal/modules/cjs/helpers:121:18)
at Object. (/home/andre/play/tic/connect2ic/vite.config.ts:31:33)

Getting error!

Could not find a declaration file for module '@connect2ic/svelte'. '/Users/pramitgaha/programs/icp/local-icp/node_modules/@connect2ic/svelte/dist/connect2ic-svelte.cjs.js' implicitly has an 'any' type.
Try npm i --save-dev @types/connect2ic__svelte if it exists or add a new declaration (.d.ts) file containing declare module '@connect2ic/svelte';

React's dfinity and connect2ic dependencies are too low and will cause unexpected errors

Fail to verify certificate

I followed the instructions in the README.md, I can launch the boilerplate project, but whenever I hit the counter button something seems wrong regarding certification. My guess would be that something is not in order with certification but I wonder how to approach this.

Specs

dfx 0.7.0-beta.8
Ubuntu 20.04.2 LTS
Node v16.1.0
npm 7.13.0

Vite config:

• React
• No TypeScript

P.S. thanks for this project 🙏

Angular template

Would you be open to receiving a PR with an Angular template?

Any progress on updating the templates to dfx 0.8.0?