# Frontend hosted elsewhere

**URL:** <https://forum.dfinity.org/t/frontend-hosted-elsewhere/1369>\
**Category:** Programs & Applications\
**Created:** [October 4, 2020, 12:08am UTC](https://forum.dfinity.org/t/frontend-hosted-elsewhere/1369 "2020-10-04T00:08:33Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![lastmjs](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/lastmjs/32/3406_2.png) [@lastmjs](https://forum.dfinity.org/u/lastmjs)\
**Post date:** [October 4, 2020, 12:08am UTC](https://forum.dfinity.org/t/frontend-hosted-elsewhere/1369/1 "2020-10-04T00:08:33Z")

</div>

I have a project that I am prototyping on the Internet Computer, but for various reasons I do not plan to host the actual static assets of the project on ICP. I just want to use ICP as the computational and storage backend for the application data.

This doesn’t seem easily possible at the moment. I have been trying to import the @dfinity/agent library on my own, hosting and loading it from my own static file server. I keep running into issues, the most fundamental being that window.ic is not defined.

This has led me to believe that the ICP replica is actually adding some extra scripts into the http response for a frontend endpoint, and that I currently am not able to emulate that on my own.

This is a major limitation. I hope we’ll be able to host our frontends anywhere we want, including iOS, Android, existing servers, etc.

---

<div class="post-metadata">

**Author:** ![hansl](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/hansl/32/134_2.png) [@hansl](https://forum.dfinity.org/u/hansl)\
**Post date:** [October 4, 2020, 1:29am UTC](https://forum.dfinity.org/t/frontend-hosted-elsewhere/1369/3 "2020-10-04T01:29:13Z")

</div>

You can definitely do that. The Agent package on npm can help you, but it won’t setup a window.ic like you would expect. That’s the bootstrap code which is hosted on ic0.app.

We don’t have good documentation, but let me see if I can make a simple example for you when I get in front of a computer later.

---

<div class="post-metadata">

**Author:** ![lastmjs](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/lastmjs/32/3406_2.png) [@lastmjs](https://forum.dfinity.org/u/lastmjs)\
**Post date:** [October 4, 2020, 1:40am UTC](https://forum.dfinity.org/t/frontend-hosted-elsewhere/1369/4 "2020-10-04T01:40:22Z")

</div>

I would appreciate that!

---

<div class="post-metadata">

**Author:** ![hansl](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/hansl/32/134_2.png) [@hansl](https://forum.dfinity.org/u/hansl)\
**Post date:** [October 5, 2020, 4:32am UTC](https://forum.dfinity.org/t/frontend-hosted-elsewhere/1369/5 "2020-10-05T04:32:25Z")

</div>

Here’s code (typescript) that would create the agent and send an update message to a “greet” function. It creates a private key everytime, and will loop through status requests to wait for a reply. To use the Actor factory we use in “normal” DFX you should call didc yourself to create a did.js from a did file.

I didn’t test that code, it’s mostly from our own bootstrap and agent code base.

I highly suggest that you use the Actor class, which can be found here (interface); [https://unpkg.com/@dfinity/agent@0.6.8/src/actor.d.ts](https://unpkg.com/@dfinity/agent@0.6.8/src/actor.d.ts) (see function `makeActorFactory`).

```auto
import {
  Agent,
  HttpAgent,
  generateKeyPair,
  makeAuthTransform,
  makeExpiryTransform,
  makeNonceTransform,
  Principal,
  RequestStatusResponseStatus
} from '@dfinity/agent';

const keyPair = generateKeyPair();
const principal = Principal.selfAuthenticating(keyPair.publicKey);

const agent = new HttpAgent({
  host: "http://localhost:8000/",
  principal,
});

agent.addTransform(makeNonceTransform());
agent.addTransform(makeExpiryTransform(5 * 60 * 1000));
agent.setAuthTransform(makeAuthTransform(keyPair));

async function makeCall(): Promise<Uint8Array> {
  let { requestId, response } = await agent.call(CANISTER_ID_GOES_HERE, { methodName: "greet", arg: CANDID_ENCODED_ARGUMENT_GOES_HERE });
  if (!response.ok) throw new Error('could not contact the replica. error: ' + response.statusText);

  while (true) {
    const status = await agent.requestStatus({ requestId });
    switch (status) {
      case RequestStatusResponseStatus.Replied: {
        return new Uint8Array(status.reply.arg || []);
      }

      case RequestStatusResponseStatus.Unknown:
      case RequestStatusResponseStatus.Received:
      case RequestStatusResponseStatus.Processing:
        continue;
      case RequestStatusResponseStatus.Rejected:
        throw new Error('call was rejected. reason: ' + status.reject_message);
      case RequestStatusResponseStatus.Done:
        throw new Error('call was done without a return value. this is an error');
    }
  }
}

}

```

Cheers!

---

<div class="post-metadata">

**Author:** ![lastmjs](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/lastmjs/32/3406_2.png) [@lastmjs](https://forum.dfinity.org/u/lastmjs)\
**Post date:** [October 7, 2020, 6:20am UTC](https://forum.dfinity.org/t/frontend-hosted-elsewhere/1369/6 "2020-10-07T06:20:03Z")

</div>

Thanks a lot for putting the time in!

---

<div class="post-metadata">

**Author:** ![amr](https://avatars.discourse-cdn.com/v4/letter/a/73ab20/32.png) [@amr](https://forum.dfinity.org/u/amr)\
**Post date:** [January 9, 2021, 2:37pm UTC](https://forum.dfinity.org/t/frontend-hosted-elsewhere/1369/7 "2021-01-09T14:37:11Z")

</div>

What does this error mean ?

Unhandled Rejection (Error): call was rejected. reason: IC0503: Canister 7kncf-oidaa-aaaaa-aaaaa-aaaaa-aaaaa-aaaaa-q trapped explicitly: IDL error: word read out of buffer

---

<div class="post-metadata">

**Author:** ![nomeata](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/nomeata/32/733_2.png) [@nomeata](https://forum.dfinity.org/u/nomeata)\
**Post date:** [January 11, 2021, 6:14pm UTC](https://forum.dfinity.org/t/frontend-hosted-elsewhere/1369/8 "2021-01-11T18:14:00Z")

</div>

This means that the message sent to the canister was not encoded in the Candid data format, or the encoding was wrong. What did you to get that?

---

<div class="post-metadata">

**Author:** ![amr](https://avatars.discourse-cdn.com/v4/letter/a/73ab20/32.png) [@amr](https://forum.dfinity.org/u/amr)\
**Post date:** [January 12, 2021, 7:02am UTC](https://forum.dfinity.org/t/frontend-hosted-elsewhere/1369/9 "2021-01-12T07:02:29Z")

</div>

i got it when I used this buf as an arg of the call

> Blockquote  
> var buf = Buffer.from(customer\_Candid, ‘utf8’);

then I found this way to call empty value

> Blockquote  
> let { requestId, response } = await agent.call(hello\_canister\_id, {  
> methodName: ‘greet’,  
> arg: “DIDL\0\0”, //BinaryBlob  
> });

I need help to encode sting for examble

---

<div class="post-metadata">

**Author:** ![palinda](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/palinda/32/4516_2.png) [@palinda](https://forum.dfinity.org/u/palinda)\
**Post date:** [February 2, 2022, 12:12pm UTC](https://forum.dfinity.org/t/frontend-hosted-elsewhere/1369/10 "2022-02-02T12:12:31Z")

</div>

I’m getting the same error. How can I encode wasm buffer into Candid data format in Nodejs?

---

<div class="post-metadata">

**Author:** ![stopak](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/stopak/32/9896_2.png) [@stopak](https://forum.dfinity.org/u/stopak)\
**Post date:** [February 2, 2022, 10:40pm UTC](https://forum.dfinity.org/t/frontend-hosted-elsewhere/1369/11 "2022-02-02T22:40:31Z")

</div>

Here is the code in js, I’m using to call canisters from node:

```auto
import fs from 'fs';
import fetch from 'node-fetch';
global.fetch = fetch;

import { Actor, HttpAgent } from '@dfinity/agent';
import { Ed25519KeyIdentity } from '@dfinity/identity';
import { idlFactory } from './idl/icpunks.did.js';
import { Principal } from '@dfinity/principal';

var keyData = fs.readFileSync('key.json', 'utf8');
var key = Ed25519KeyIdentity.fromJSON(keyData);
var proxy_principal = key.getPrincipal();

console.log("Using principal: " + proxy_principal.toString());

const host = "https://boundary.ic0.app/"; //ic
const agent = new HttpAgent({ identity: key, host: host });

const canister_id = "ca4b4-uyaaa-aaaal-aac7a-cai";

const actor = Actor.createActor(idlFactory, {
        agent: agent,
        canisterId: canister_id
 });

```

You can also just skip identity part, and make read calls 🙂

```auto
const { Actor, HttpAgent } = require('@dfinity/agent');
const ic_agent = new HttpAgent({ host: "https://boundary.ic0.app/" });

const actor = Actor.createActor(icpunks_idl, {
    agent: ic_agent,
    canisterId: cid,
});

```

---

<div class="post-metadata">

**Author:** ![rckprtr](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/rckprtr/32/809_2.png) [@rckprtr](https://forum.dfinity.org/u/rckprtr)\
**Post date:** [February 3, 2022, 5:41am UTC](https://forum.dfinity.org/t/frontend-hosted-elsewhere/1369/12 "2022-02-03T05:41:48Z")

</div>

Very similar pattern, I noticed ` "cross-fetch": "^3.1.4",` works if `node-fetch` is giving you issues.

---

<div class="post-metadata">

**Author:** ![samuelemedici](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/samuelemedici/32/7301_2.png) [@samuelemedici](https://forum.dfinity.org/u/samuelemedici)\
**Post date:** [September 13, 2022, 7:04am UTC](https://forum.dfinity.org/t/frontend-hosted-elsewhere/1369/13 "2022-09-13T07:04:48Z")

</div>

I’ve followed these steps but on NextJS 12.3 I have this error:

```auto
Uncaught (in promise) Error: Invalid character: "&"
    at decodeChar (base32.js?cc45:64:1)
    at decode (base32.js?cc45:83:1)
    at Principal.fromText (index.js?3619:44:25)
    at new CanisterActor (actor.js?3acd:111:23)
    at Actor.createActor (actor.js?3acd:125:1)

```

I have the frontend not hosted in a canister ( gonna be hosted in Vercel ), while the BE is in a canister hosted locally. I don’t know what I’m doing wrong.

---

<div class="post-metadata">

**Author:** ![anon74414410](https://avatars.discourse-cdn.com/v4/letter/a/85f322/32.png) [@anon74414410](https://forum.dfinity.org/u/anon74414410)\
**Post date:** [September 13, 2022, 7:53pm UTC](https://forum.dfinity.org/t/frontend-hosted-elsewhere/1369/14 "2022-09-13T19:53:58Z")

</div>

I’ll note that the correct `host` is currently [https://ic0.app](https://ic0.app) as of September 2022

---

<div class="post-metadata">

**Author:** ![samuelemedici](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/samuelemedici/32/7301_2.png) [@samuelemedici](https://forum.dfinity.org/u/samuelemedici)\
**Post date:** [September 14, 2022, 8:50pm UTC](https://forum.dfinity.org/t/frontend-hosted-elsewhere/1369/15 "2022-09-14T20:50:22Z")

</div>

I’ve changed the host as you suggested. But still I get the same error.  
I really cannot understand what steps to follow in order to deploy the Frontend and use only ICP as Backend.

---

<div class="post-metadata">

**Author:** ![anon74414410](https://avatars.discourse-cdn.com/v4/letter/a/85f322/32.png) [@anon74414410](https://forum.dfinity.org/u/anon74414410)\
**Post date:** [September 14, 2022, 8:56pm UTC](https://forum.dfinity.org/t/frontend-hosted-elsewhere/1369/16 "2022-09-14T20:56:01Z")

</div>

The error is definitely accurate. You are passing a string as a canister ID, probably in the `createActor` export of your declarations.

`"&"` will not be a part of a valid canister ID. Please check your inputs by debugging with a print statement or Chrome devtools

---

<div class="post-metadata">

**Author:** ![paulyoung](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/paulyoung/32/5251_2.png) [@paulyoung](https://forum.dfinity.org/u/paulyoung)\
**Post date:** [September 14, 2022, 10:12pm UTC](https://forum.dfinity.org/t/frontend-hosted-elsewhere/1369/18 "2022-09-14T22:12:19Z")

</div>

`const canisterId = "ryjl3-tyaaa-aaaaa-aaaba-cai&id=rrkah-fqaaa-aaaaa-aaaaq-cai";` is definitely the problem.