# Creating a web canister **URL:** \ **Category:** Developers\ **Created:** [June 5, 2023, 12:26pm UTC](https://forum.dfinity.org/t/creating-a-web-canister/20460 "2023-06-05T12:26:14Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Safik](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/safik/32/953_2.png) [@Safik](https://forum.dfinity.org/u/Safik)\ **Post date:** [June 5, 2023, 12:26pm UTC](https://forum.dfinity.org/t/creating-a-web-canister/20460/1 "2023-06-05T12:26:14Z")
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 ---
**Author:** ![Vivienne](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/vivienne/32/29170_2.png) [@Vivienne](https://forum.dfinity.org/u/Vivienne)\ **Post date:** [June 5, 2023, 12:31pm UTC](https://forum.dfinity.org/t/creating-a-web-canister/20460/2 "2023-06-05T12:31:37Z")
@NathanosDev just added the ability to run custom build commands for asset canisters: [PR](https://github.com/dfinity/sdk/pull/3140). If you run the latest dfx beta release (0.14.1-beta.1) you should already have access to that feature ---
**Author:** ![Safik](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/safik/32/953_2.png) [@Safik](https://forum.dfinity.org/u/Safik)\ **Post date:** [June 5, 2023, 12:39pm UTC](https://forum.dfinity.org/t/creating-a-web-canister/20460/3 "2023-06-05T12:39:14Z")
Thanks! No I don’t use beta versions :). I’ll try it now. ---
**Author:** ![Safik](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/safik/32/953_2.png) [@Safik](https://forum.dfinity.org/u/Safik)\ **Post date:** [June 5, 2023, 12:55pm UTC](https://forum.dfinity.org/t/creating-a-web-canister/20460/4 "2023-06-05T12:55:20Z")
It doesn’t work. Here are the errors. ![1](https://us1.discourse-cdn.com/flex023/uploads/dfn/original/2X/9/9198992cd65fe010dab020d8781567ee841ba70f.png) He wants to do something with webpack again. How to tell him: just make wasm it already works.? ---
**Author:** ![Safik](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/safik/32/953_2.png) [@Safik](https://forum.dfinity.org/u/Safik)\ **Post date:** [June 5, 2023, 1:15pm UTC](https://forum.dfinity.org/t/creating-a-web-canister/20460/5 "2023-06-05T13:15:50Z")
It worked. He does the build with errors. But it loads successfully! ---
**Author:** ![Safik](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/safik/32/953_2.png) [@Safik](https://forum.dfinity.org/u/Safik)\ **Post date:** [June 5, 2023, 2:22pm UTC](https://forum.dfinity.org/t/creating-a-web-canister/20460/6 "2023-06-05T14:22:41Z")
What could this error be related to? ![2](https://us1.discourse-cdn.com/flex023/uploads/dfn/original/2X/b/ba74664e7779a0f7351a9473dcfbfbe64e2be595.png) Ok, Tomorrow or a little later I will downgrade the dfx version to 12 and try to re-upload again ---
**Author:** ![Vivienne](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/vivienne/32/29170_2.png) [@Vivienne](https://forum.dfinity.org/u/Vivienne)\ **Post date:** [June 5, 2023, 2:53pm UTC](https://forum.dfinity.org/t/creating-a-web-canister/20460/7 "2023-06-05T14:53:03Z")
That looks like a service worker issue. Do you have any errors in the console? ---
**Author:** ![anon74414410](https://avatars.discourse-cdn.com/v4/letter/a/85f322/32.png) [@anon74414410](https://forum.dfinity.org/u/anon74414410)\ **Post date:** [June 5, 2023, 5:54pm UTC](https://forum.dfinity.org/t/creating-a-web-canister/20460/8 "2023-06-05T17:54:48Z")
you’ve cropped out potentially useful information. Are you visiting at `ic0.app`, or `icp0.io`? ---
**Author:** ![Safik](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/safik/32/953_2.png) [@Safik](https://forum.dfinity.org/u/Safik)\ **Post date:** [June 6, 2023, 4:47am UTC](https://forum.dfinity.org/t/creating-a-web-canister/20460/9 "2023-06-06T04:47:11Z")
Yes, there are errors when building the project. Console error: dfx deploy ```auto 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), :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), :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 ---
**Author:** ![Safik](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/safik/32/953_2.png) [@Safik](https://forum.dfinity.org/u/Safik)\ **Post date:** [June 6, 2023, 4:50am UTC](https://forum.dfinity.org/t/creating-a-web-canister/20460/10 "2023-06-06T04:50:22Z")
My web: [https://gyuwx-hqaaa-aaaan-qdw2a-cai.icp0.io/](https://gyuwx-hqaaa-aaaan-qdw2a-cai.icp0.io/) ---
**Author:** ![Safik](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/safik/32/953_2.png) [@Safik](https://forum.dfinity.org/u/Safik)\ **Post date:** [June 7, 2023, 8:52am UTC](https://forum.dfinity.org/t/creating-a-web-canister/20460/11 "2023-06-07T08:52:13Z")
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](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 ](https://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](https://gyuwx-hqaaa-aaaan-qdw2a-cai.icp0.io) ---
**Author:** ![NathanosDev](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/nathanosdev/32/7204_2.png) [@NathanosDev](https://forum.dfinity.org/u/NathanosDev)\ **Post date:** [June 7, 2023, 9:50am UTC](https://forum.dfinity.org/t/creating-a-web-canister/20460/12 "2023-06-07T09:50:27Z")
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? ---
**Author:** ![Safik](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/safik/32/953_2.png) [@Safik](https://forum.dfinity.org/u/Safik)\ **Post date:** [June 7, 2023, 10:36am UTC](https://forum.dfinity.org/t/creating-a-web-canister/20460/13 "2023-06-07T10:36:25Z")
This : [https://github.com/fury02/rbac-dev](https://github.com/fury02/rbac-dev) Web : [https://github.com/fury02/rbac-dev/tree/main/src/web\_admin](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”] > } ---
**Author:** ![NathanosDev](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/nathanosdev/32/7204_2.png) [@NathanosDev](https://forum.dfinity.org/u/NathanosDev)\ **Post date:** [June 7, 2023, 12:04pm UTC](https://forum.dfinity.org/t/creating-a-web-canister/20460/14 "2023-06-07T12:04:06Z")
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](https://github.com/dfinity/awesome-internet-computer#starters) ---
**Author:** ![Safik](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/safik/32/953_2.png) [@Safik](https://forum.dfinity.org/u/Safik)\ **Post date:** [June 7, 2023, 12:31pm UTC](https://forum.dfinity.org/t/creating-a-web-canister/20460/15 "2023-06-07T12:31:29Z")
Thanks, If using Vite+React taking into account your comments, will this pass assembly in the current version of dfx? ---
**Author:** ![NathanosDev](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/nathanosdev/32/7204_2.png) [@NathanosDev](https://forum.dfinity.org/u/NathanosDev)\ **Post date:** [June 7, 2023, 12:37pm UTC](https://forum.dfinity.org/t/creating-a-web-canister/20460/16 "2023-06-07T12:37:35Z")
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. ---
**Author:** ![anon74414410](https://avatars.discourse-cdn.com/v4/letter/a/85f322/32.png) [@anon74414410](https://forum.dfinity.org/u/anon74414410)\ **Post date:** [June 8, 2023, 5:37pm UTC](https://forum.dfinity.org/t/creating-a-web-canister/20460/17 "2023-06-08T17:37:30Z")
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` ---
**Author:** ![Safik](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/safik/32/953_2.png) [@Safik](https://forum.dfinity.org/u/Safik)\ **Post date:** [June 8, 2023, 6:52pm UTC](https://forum.dfinity.org/t/creating-a-web-canister/20460/18 "2023-06-08T18:52:18Z")
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 ```auto 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. ---
**Author:** ![Safik](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/safik/32/953_2.png) [@Safik](https://forum.dfinity.org/u/Safik)\ **Post date:** [June 15, 2023, 12:08pm UTC](https://forum.dfinity.org/t/creating-a-web-canister/20460/19 "2023-06-15T12:08:03Z")
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/](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/](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](https://github.com/fury02/rbac-motoko) ---
**Author:** ![anon74414410](https://avatars.discourse-cdn.com/v4/letter/a/85f322/32.png) [@anon74414410](https://forum.dfinity.org/u/anon74414410)\ **Post date:** [June 15, 2023, 6:29pm UTC](https://forum.dfinity.org/t/creating-a-web-canister/20460/20 "2023-06-15T18:29:46Z")
![image](https://us1.discourse-cdn.com/flex023/uploads/dfn/original/2X/3/389906e588fe4ec18c7258f21530244965785642.png) ![image](https://us1.discourse-cdn.com/flex023/uploads/dfn/original/2X/c/c4bd858e0db7590baad38fdfb5e7de494ecbabe7.png) 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 [Next page](https://forum.dfinity.org/t/creating-a-web-canister/20460.md?page=2)