Creating a web canister

Safik · June 5, 2023, 12:26pm

I am creating and assembling a web solution via react-scripts build.
I am creating a fully working instance of the site.
When building (dfx deploy), a lot of errors are thrown. It looks like dfx wants to build via webpack
Question:
How to build a website into a wasm file if I don’t use webpack, but let’s say I build it separately via react-scripts build.?

I did a similar thing in dfx version 0.12.1, I managed to build the web in wasm. I poured it into a web canister. I also have a demo version that works fine through the created via (dfx new) But the peculiarity is that I have an application react, with .ts

Severin · June 5, 2023, 12:31pm

@NathanosDev just added the ability to run custom build commands for asset canisters: PR. If you run the latest dfx beta release (0.14.1-beta.1) you should already have access to that feature

Safik · June 5, 2023, 12:39pm

Thanks! No I don’t use beta versions :). I’ll try it now.

Safik · June 5, 2023, 12:55pm

It doesn’t work. Here are the errors.

He wants to do something with webpack again. How to tell him: just make wasm it already works.?

Safik · June 5, 2023, 1:15pm

It worked. He does the build with errors. But it loads successfully!

Safik · June 5, 2023, 2:22pm

What could this error be related to?

Ok, Tomorrow or a little later I will downgrade the dfx version to 12 and try to re-upload again

Severin · June 5, 2023, 2:53pm

That looks like a service worker issue. Do you have any errors in the console?

kpeacock · June 5, 2023, 5:54pm

you’ve cropped out potentially useful information. Are you visiting at ic0.app, or icp0.io?

Safik · June 6, 2023, 4:47am

Yes, there are errors when building the project.
Console error:
dfx deploy

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 'bd3sg-teaaa-aaaaa-qaaba-cai' (web_admin) with an embedded error: Failed to build frontend for network 'local'.: The command '"npm" "run" "build"' failed with exit status 'exit status: 1'.
Stdout:

> rbac_frontend@0.2.0 prebuild
> dfx generate


> rbac_frontend@0.2.0 build
> webpack

dfx deploy
Deploying all canisters.
All canisters have already been created.
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 'bd3sg-teaaa-aaaaa-qaaba-cai' (web_admin) with an embedded error: Failed to build frontend for network 'local'.: The command '"npm" "run" "build"' failed with exit status 'exit status: 1'.
Stdout:

> rbac@0.2.0 prebuild
> dfx generate


> rbac@0.2.0 build
> webpack

asset index.html 2.56 KiB [compared for emit]
asset index.js 99 bytes [compared for emit] (name: index)

ERROR in index
Module not found: Error: Can't resolve 'ts-loader' in '/home/fury02/Projects_4/rbac'

ERROR in unable to locate '/home/fury02/Projects_4/rbac/src/public/assets' glob

ERROR in Error: Child compilation failed:
  Module not found: Error: Can't resolve 'ts-loader' in '/home/fury02/Projects_4  /rbac'
  ModuleNotFoundError: Module not found: Error: Can't resolve 'ts-loader' in '/h  ome/fury02/Projects_4/rbac'
      at /home/fury02/Projects_4/rbac/node_modules/webpack/lib/Compilation.js:20  16:28
      at /home/fury02/Projects_4/rbac/node_modules/webpack/lib/NormalModuleFacto  ry.js:817:13
      at eval (eval at create (/home/fury02/Projects_4/rbac/node_modules/tapable  /lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
      at /home/fury02/Projects_4/rbac/node_modules/webpack/lib/NormalModuleFacto  ry.js:275:22
      at eval (eval at create (/home/fury02/Projects_4/rbac/node_modules/tapable  /lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
      at /home/fury02/Projects_4/rbac/node_modules/webpack/lib/NormalModuleFacto  ry.js:560:15
      at /home/fury02/Projects_4/rbac/node_modules/webpack/lib/NormalModuleFacto  ry.js:118:11
      at /home/fury02/Projects_4/rbac/node_modules/webpack/lib/NormalModuleFacto  ry.js:631:8
      at /home/fury02/Projects_4/rbac/node_modules/neo-async/async.js:2830:7
      at done (/home/fury02/Projects_4/rbac/node_modules/neo-async/async.js:2925  :13)
  
  - Compilation.js:2016 
    [rbac]/[webpack]/lib/Compilation.js:2016:28
  
  - NormalModuleFactory.js:817 
    [rbac]/[webpack]/lib/NormalModuleFactory.js:817:13
  
  
  - NormalModuleFactory.js:275 
    [rbac]/[webpack]/lib/NormalModuleFactory.js:275:22
  
  
  - NormalModuleFactory.js:560 
    [rbac]/[webpack]/lib/NormalModuleFactory.js:560:15
  
  - NormalModuleFactory.js:118 
    [rbac]/[webpack]/lib/NormalModuleFactory.js:118:11
  
  - NormalModuleFactory.js:631 
    [rbac]/[webpack]/lib/NormalModuleFactory.js:631:8
  
  - async.js:2830 
    [rbac]/[neo-async]/async.js:2830:7
  
  - async.js:2925 done
    [rbac]/[neo-async]/async.js:2925:13
  
  - child-compiler.js:169 
    [rbac]/[html-webpack-plugin]/lib/child-compiler.js:169:18
  
  - Compiler.js:551 finalCallback
    [rbac]/[webpack]/lib/Compiler.js:551:5
  
  - Compiler.js:577 
    [rbac]/[webpack]/lib/Compiler.js:577:11
  
  - Compiler.js:1199 
    [rbac]/[webpack]/lib/Compiler.js:1199:17
  
  
  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [rbac]/[tapable]/lib/Hook.js:18:14
  
  - Compiler.js:1195 
    [rbac]/[webpack]/lib/Compiler.js:1195:33
  
  - Compilation.js:2787 finalCallback
    [rbac]/[webpack]/lib/Compilation.js:2787:11
  
  - Compilation.js:3092 
    [rbac]/[webpack]/lib/Compilation.js:3092:11

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)

1 error has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.81.0 compiled with 4 errors in 194 ms

Stderr:
Building canisters before generate for Motoko
Generating type declarations for canister web_admin:
  src/declarations/web_admin/web_admin.did.d.ts
  src/declarations/web_admin/web_admin.did.js
  src/declarations/web_admin/web_admin.did
Generating type declarations for canister rbac:
  src/declarations/rbac/rbac.did.d.ts
  src/declarations/rbac/rbac.did.js
  src/declarations/rbac/rbac.did

nex steps:

copy files .dfx/local/canisters in .dfx/ic/canisters
dfx canister --network ic install web_admin --mode reinstall
not errors

dfx version 0.14.1

Safik · June 6, 2023, 4:50am

My web:
https://gyuwx-hqaaa-aaaan-qdw2a-cai.icp0.io/

Safik · June 7, 2023, 8:52am

Hi!
I have not yet understood the essence of the problem.

1)Next step(failed):
I uploaded via fleek by choosing IC as the hosting.
https://cmco3-qaaaa-aaaad-qfmnq-cai.ic.fleek.co
Error: Bad gateway Error code 502
2)Next step(success):
I also uploaded via fleek but used IPFS hosting
delicate-mode-7341.on.fleek.co

Sending files via the console to my web canister also leads to errors
https://gyuwx-hqaaa-aaaan-qdw2a-cai.icp0.io

NathanosDev · June 7, 2023, 9:50am

Is it possible to share your project?

If not, could you please share your full dfx.json and package.json and the commands that you are running in your terminal to build your project?

Safik · June 7, 2023, 10:36am

This : https://github.com/fury02/rbac-dev
Web : https://github.com/fury02/rbac-dev/tree/main/src/web_admin

I also changed configs and did something similar. Considering upgrades to dfx 0.14.1

“web_admin”: {
“frontend”: {
“entrypoint”: “src/web_admin/src/index.tsx”
},
“source”: [
“src/web_admin/src”
],
“type”: “assets”,
“build”: [“react-scripts build”]
}

NathanosDev · June 7, 2023, 12:04pm

Thanks for sharing your project. So it seems that support for custom build commands for asset canisters has not been included in the 0.14.1 release of DFX, even though the release notes include it. But you can fix your project without using this custom build command.

One issue on your project comes from having multiple package.json files. The package.json at the root of your project is the one that DFX is using to build your project, but the correct build configuration for your project is in src/web_admin/package.json.

Another issues comes from using CRA, which will not work out of the box. I would recommend that you try one of the projects listed here to get started with less issues: GitHub - dfinity/awesome-internet-computer: A curated list of awesome projects and resources relating to the Internet Computer Protocol

Safik · June 7, 2023, 12:31pm

Thanks,
If using Vite+React taking into account your comments, will this pass assembly in the current version of dfx?

NathanosDev · June 7, 2023, 12:37pm

Yes it should work with these starter projects if you have further troubles feel free to reach out again and I can take a look.

kpeacock · June 8, 2023, 5:37pm

I’m seeing an error from the frontend. It seems that you’re pointing the host directly at icp0.io which is throwing a cors error.

I don’t think that behavior is correct, and I’ll raise it with the boundary node team, but in the meantime, I recommend setting host to undefined or pointing it to https://icp-api.io

Safik · June 8, 2023, 6:52pm

Hi!
I’m rebuilding from CRA (it’s outdated) to Vite - React. So far everything is correct out of the box. There is one more detail in the Chrome browser error

Failed to create a secure connection with the Internet Computer.
Please try clearing your browser cache and refreshing the page to try again.

It loads correctly in other browsers.

Safik · June 15, 2023, 12:08pm

Part of the functionality on the site does not work

Everything works fine in the local environment.
Everything works fine in the https://delicate-mode-7341.on.fleek.co/ (IPFS) Moreover, I did not change the host settings in the configurations
Not working in Web IC canister https://gyuwx-hqaaa-aaaan-qdw2a-cai.icp0.io/
Not working: Plug authentication

Perhaps this is a limitation in the nginx server settings?

Source code GitHub - fury02/rbac-motoko

kpeacock · June 15, 2023, 6:29pm

Based on this error, it looks like there’s an issue with the boundary nodes failing to handle the status call during fetchRootKey. Either that, or the serviceworker is failing to catch it, but either way

Topic		Replies	Views
Frontend react icp Programs & Applications	1	828	July 27, 2023
Dfx.json build scripts Developers	5	1130	February 11, 2022
Unable to Deploy Existing Frontend JavaScript	2	492	September 28, 2023
Dfx deploy command Developers	2	502	March 25, 2021
Dfx deploy failed Developers Functional-Programming	27	9569	July 23, 2023

Creating a web canister

Related topics