UPDATED: Create IC App - Modern, unopinionated templates for all frameworks

I’m still finishing up my blog post, but here’s a draft of my explanation of the 0.7.7 changes and their rationale:

2 Likes

That was super helpful! Looking forward to seeing all of it. I ran the copy task and got my folder.

Basically, it looks like the idl_factory isn’t exposed from index.js any more, which was the issue. I was able to deduce how to use the exposed createActor method to pass in the options that I wanted.

1 Like

The environment variables are throwing me for a bit of a loop. Does dfx deploy --network ic flip the environment behind the scenes to production? Things worked before, but I’m not sure how. I think i just had my local and ic defined for each canister in .dfx/local/canister_ids.json and things ‘just worked’. Now I’m at a bit of a loss. I see in webpack you have the initiateCanisterIds, but when I try to copy that over to my vite.config.js I always seem to get production values.

When I try to serve the dev version It seems to get the right values, but the app fails on export const canisterId = process.env.MY_CANISTER_ID; because the process doesn’t exist.

I guess I’ll hard code them for now. :frowning:

Any reason you can’t expose the agent and idlFactory from index.js? I’d like to call fetchroot manually if I need to(I check window for localhost and call it if necessary since I can’t bend the environment variables to my will due to my inexperience with vite).

The idlfactory is still available in the .did file, but we could export it from the index as well

1 Like

Hey, Im gonna put some time on this today to see if I can get it working with the latest version.

1 Like

I have it working with a few modifications…feel free to ping me if you get stuck. I basically just manually edited the index.js to expose the IDL and kept the method I was using to fetch the root for the agent and use a hard-coded set of canister IDs if I’m browsing localhost.

1 Like

Checking back in - @skilesare I think you’d be interested in the Minimal Update section I added to my blog post

1 Like

I got it working for dev. Just need to spend some time on the env settings & making sure it works in prod seemlessly. But expect an update within next few days.

4 Likes

Hi @Tbd, thanks for the awesome template.
I’m using Vue + vite and getting some trouble upgrading to 0.8.0, did you manage to do it ?
I keep getting errors on the agent.fetchrootKey() call

Update is out! Check it out.

TLDR;

  • Flattened dir structure
  • Added auth example
  • Updated look + consistent for all frameworks
  • Upgraded to dfx 0.8.1
  • Upgraded to all latest @dfinity/* packages

8 Likes

@ferMartz @Tbd

Hey you guys thank you very much for your hard work on this tool.
I’m just getting started with the IC and decided to try out the tailwindcss template for my first project. Which is a simple wordgame loosely inspired by wurdle. Local development went fine but after I deployed to the IC all of the formatting seems to have disappeared.

Here’s what the frontend looks like on localhost:

Here’s what it looks like after deploying to the IC:

My instinct’s tell me that tailwind.config.js is not being built into the canister when deployed to production. But I’m not certain.

Any advice is appreciated!

1 Like

If you build your app locally (npm run build I guess) and try to serve locally (without IC) your bundle (I guess your www, or dist or build with npx serve ... for example), do you get your styling?

I have not updated the tailwind template lately. If you are not set with tailwind this one works in prod like charm. It has Material UI. You can also upgrade to the latest Material UI if you like as well as latest DFX version.

Just clone this repo:

1 Like

Hey! Yeah as @ferMartz mentioned its a bit outdated. I would suggest either use his project or take the default ones and add tailwind to them, it should be quite straightforward.

I’m cooking something new at the moment so hope to update these in the coming month or two if everything goes well.

Thanks for the insight, running npm run serve resulted in the same loss of formatting. Typically I use npm run dev. Now just gotta figure out why.

Good to know - I’m starting a new one after this is live so I’ll look into it.

Nice, looking forward too it

Alright so indeed looks like you loose your styling when you do a productive build - i.e. the error does not sound related to the IC itself. Something with the tailwind or bundler configuration. I hope the sample repo that have been provided will help you track down the issue.

New create-ic-app version 0.2.0 is out!

Now supports all major wallets out of the box and takes care of authenticated canister calls (thanks to connect2ic).

Try it out with: npm init ic-app@latest

See demo video here:
https://twitter.com/miamaruq/status/1541822713064464385

5 Likes