MCPcopy Index your code
hub / github.com/MioQuispe/create-ic-app

github.com/MioQuispe/create-ic-app @main

Chat with this repo
repository ↗ · DeepWiki ↗ · + Follow
24 symbols 88 edges 29 files 0 documented · 0%
What it actually does AI analysis from the code graph — generated when you open this
loading…
README

Create IC App

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

Quick start

Requirements

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.

:trophy: @ferMartz (React JS + Tailwind template)

Extension points exported contracts — how you extend this code

CanisterIds (Interface)
(no doc)
template-vue-ts/vite.config.ts
CanisterIds (Interface)
(no doc)
template-svelte-ts/vite.config.ts
CanisterIds (Interface)
(no doc)
template-react-ts/vite.config.ts

Core symbols most depended-on inside this repo

write
called by 2
index.js
copy
called by 2
index.js
refreshCounter
called by 2
template-react/frontend/components/Counter.jsx
refreshCounter
called by 2
template-react-ts/frontend/components/Counter.tsx
init
called by 1
index.js
getValidPackageName
called by 1
index.js
copyDir
called by 1
index.js
emptyDir
called by 1
index.js

Shape

Function 21
Interface 3

Languages

TypeScript100%

Modules by API surface

index.js7 symbols
template-react/frontend/components/Counter.jsx3 symbols
template-react-ts/frontend/components/Counter.tsx3 symbols
template-react/frontend/components/Transfer.jsx2 symbols
template-react-ts/frontend/components/Transfer.tsx2 symbols
template-vue-ts/vite.config.ts1 symbols
template-svelte-ts/vite.config.ts1 symbols
template-react/frontend/components/Profile.jsx1 symbols
template-react/frontend/App.jsx1 symbols
template-react-ts/vite.config.ts1 symbols
template-react-ts/frontend/components/Profile.tsx1 symbols
template-react-ts/frontend/App.tsx1 symbols

For agents

$ claude mcp add create-ic-app \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact