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

Developers
23

@Tbd

Thanks a lot for your help. Changing the @dfinity/agent to 0.8.7 did the trick along with cleaning the npx cache.

I was previously on 0.8.6.

Thanks!

1 Like
24

Great project @Tbd! I managed to run a React+TS template on my local network (after upgrading node to v16+ and dfx to 0.7+) and it was seamless! Thank you very much!

1 Like
25

Glad to hear that! Keeps me motivated to work on it.

2 Likes
26

Amazing work! I tried the comand line tool and selected svelte. Works just out of the box.

Now I just neet do learn svelte as well :slight_smile:

Will you include support for IC Mainnet deployment as well as soon as it opens to the public?

1 Like
27

Oh yeah, ofc! Tbh it should just work out of the box since it can already run fine on your local replica, but I could definitely add instructions to the readme for convenience.

1 Like
28

Upgraded dfx to 0.7.0 and added instructions on deploying the asset canister through fleek (super easy!)

Got my own projects site up and running with this :slight_smile:
https://3ve4r-liaaa-aaaad-qaena-cai.raw.ic0.app/

4 Likes
29

I created a small playground with your vite template. I followed your instructions on the github repo but I’m getting an error. Take a look below:

Deploy started at 2021-07-06T19:39:53.723Z

2021-07-06T19:39:56.386Z: Deploy started
2021-07-06T19:40:00.975Z: Docker image: ‘fleek/create-react-app’
2021-07-06T19:40:00.975Z: Build command: ‘npm install && npm run build’
2021-07-06T19:40:00.975Z: Triggering build execution…
2021-07-06T19:41:24.236Z: added 205 packages, and audited 205 packages in 7s
2021-07-06T19:41:24.236Z: 21 packages are looking for funding
2021-07-06T19:41:24.236Z: run npm fund for details
2021-07-06T19:41:24.252Z: 4 moderate severity vulnerabilities
2021-07-06T19:41:24.252Z: To address all issues, run:
2021-07-06T19:41:24.252Z: npm audit fix
2021-07-06T19:41:24.252Z: Run npm audit for details.
2021-07-06T19:41:24.253Z: npm notice
2021-07-06T19:41:24.253Z: npm notice New minor version of npm available! 7.0.8 → 7.19.1
2021-07-06T19:41:24.253Z: npm notice Changelog: https://github.com/npm/cli/releases/tag/v7.19.1
2021-07-06T19:41:24.253Z: npm notice Run npm install -g npm@7.19.1 to update!
2021-07-06T19:41:24.253Z: npm notice
2021-07-06T19:41:24.523Z: > ic-rewind@0.0.0 build
2021-07-06T19:41:24.523Z: > vite build
2021-07-06T19:41:24.836Z: vite v2.3.3 building for production…
2021-07-06T19:41:24.901Z: transforming…
2021-07-06T19:41:29.184Z: ✓ 74 modules transformed.
2021-07-06T19:41:29.184Z: Could not load /workspace/.dfx/local/canisters/playground/playground.js (imported by src/agent.js): ENOENT: no such file or directory, open ‘/workspace/.dfx/local/canisters/playground/playground.js’
2021-07-06T19:41:29.184Z: error during build:
2021-07-06T19:41:29.184Z: Error: Could not load /workspace/.dfx/local/canisters/playground/playground.js (imported by src/agent.js): ENOENT: no such file or directory, open ‘/workspace/.dfx/local/canisters/playground/playground.js’
2021-07-06T19:41:29.202Z: npm ERR! code 1
2021-07-06T19:41:29.202Z: npm ERR! path /workspace
2021-07-06T19:41:29.204Z: npm ERR! command failed
2021-07-06T19:41:29.205Z: npm ERR! command sh -c vite build
2021-07-06T19:41:29.224Z: npm ERR! A complete log of this run can be found in:
2021-07-06T19:41:29.224Z: npm ERR! /root/.npm/_logs/2021-07-06T19_41_29_205Z-debug.log
2021-07-06T19:41:54.789Z: Error occured during the build.

Any idea what is going on?

Thanks in advance!!!

30

Hey @ferMartz I haven’t actually tried deploying a frontend with canister calls yet :thinking: (only static one)
it seems .dfx directory js isnt being included in the bundle maybe? What does the dist directory look like for you?

31

@Tbd you are right, no .dfx directory and the dist has only assets although it has an agent.xxxx.js. Do you know if there is a setting on fleek for deploying the canister?

I just found this tutorial from one of your peers I guess.
https://kyle-peacock.com/blog/dfinity/your-first-canister

BTW: I posted a question on Fleek’s slack channel about deploying a canister. Let’s see if they respond.

Any idea if there is another option for deploying canisters?

Thanks again!!

32

Strange. I tried locally with a frontend + canister call. there’s no dependencies to .dfx so bundling is working as it should.

Something in the fleek settings?

Here’s what I put in mine:

image
image945×369 25.5 KB

33

@Tbd those are the exact same settings I have.

I’ll keep trying and see if I can figure it out

34

Can you try committing the .dfx folder to see if it works?
Just occurred to me that fleek/create-react-app isn’t doing anything with dfx. will have to get that set up later. See if that works as a temporary solution

35

Your idea of committing .dfx works :raised_hands:

Take a look here :point_right: https://wlyw6-viaaa-aaaad-qajia-cai.ic.fleek.co/

Now the problem is that the queries and calls in production environment are directed to localhost:8000.
I think there must be a tweak in vite.config.js or somewhere in the project. I’m looking into it.
See shot below:
https://snipboard.io/cPqDWG.jpg

1 Like
36

Do you know the best practice to get the window.location.origin in the vite config file for production?

I tried few tweaks but none worked :sweat_smile:

I read Vite’s docs about environment variables but I’m still confused.

I’m guessing I need to define DFX_NETWORK in the production environment variable but is not working.

This is the line that is grabbing the root url in the vite config.

const networkName = process.env[“DFX_NETWORK”] || “local”;

Thanks for help as always!!!

37

I found an example here, look in src/agent.js in your project

Sorry I’m working night and day on my own project at the moment, otherwise I would have tried this already. Can you try taking the relevant bits from there and then continue via DMs if you run into trouble. Then we can post the final solution here.

1 Like
38

Totally understand, I appreciate the help. I’ll try it and post the solution here.

Thanks again!!!

1 Like
39

Just to report that I was able to pass the previous error by adding the following code:

// Get environment from Vite env object
const ENV = import.meta.env.MODE;

// If is prod get the window location at port 8000 otherwise is local
const agentOptions = {
  host:
    ENV === "production"
      ? `${window.location.protocol}${window.location.host}:8000`
      : "http://localhost:8000",
};

const agent = new HttpAgent(agentOptions);

Now the problem is that the query/call never returns, it timeouts. I’m debugging the issue. Let me know if you have any idea.

You can take a look in the link I posted before.

40

Have you deployed the canisters to main net?

Also, remove the port 8000. This is what the request url says:
https://wlyw6-viaaa-aaaad-qajia-cai.raw.ic0.app:8000/api/v2/canister/rkp4c-7iaaa-aaaaa-aaaca-cai/call

41

I’ll see if I can solve for Vite and open up a PR to the create-ic-app repo for dfx 0.7.7 and the latest @dfinity/agent versions. Probably sometime next week

1 Like
42

Any luck upgrading to dfx 0.7.7 for anyone? Vite is suddenly complaining that it can’t load files from dfx_generated.

import { idlFactory as mycanister_idl, canisterId as mycanister_id } from ‘dfx-generated/mycanister’;

I noticed that new projects generated with dfx 0.7.7 end up with a /src/declarations folder. Not sure why I’m not getting that except that perhaps since vite never completes because of the error that the folder isn’t created? Do I need to swap out the webpack.configs with the new version? Vite should take care of that right?

Looks like I’ve gotten the error down to ‘default’ is not exported by .dfx/local/canisters/mycanister/mycanister.did.js, imported by .dfx/local/canisters/mycanister/mycanister.js