Web2 connects web3

Developers
1

Hi,
I‘m looking for an example where I can learn how I can connect a web2 html/javascript application hosted on a tradition webserver with a motoko backend canister.

3 Likes
2

There might be a more complete example someone can link, but you will likely have to have your Motoko backend canister at least answer HTTP requests. Here’s an example of that:

Hopefully this helps!

1 Like
3

This is a good one which I started with.

Frontend uses nextjs which can be deployed on Vercel.
Backend is written with motoko running in canister

1 Like
4

Here is a brand new (soon to be official) starter project for Vite + React + Motoko which includes live reloading for both the frontend and backend using the Motoko Dev Server. Although this template is a work in progress, it could be useful as a reference point for setting up a Vite frontend with a Motoko canister backend.

If you want to host the frontend on an external service such as Vercel or Netlify, you’ll want to configure the IC HTTP agent to use http://localhost:4943 for your local replica or https://ic0.app for the mainnet. Here’s a code example for reference, although it’s using an outdated version of dfx (which originally used port 8000 instead of 4943).

Hopefully these links will help get you started, and I’ll let you know if I come across anything else that could be useful.

4 Likes
5

Many thanks for all the answers. I‘ll give them a try.

1 Like
6

which includes live reloading for both the frontend and backend using the Motoko Dev Server.

wow that sounds awesome! will it be possible to turn this into a general starter to provide other bundlers & frameworks to chose from a cli?

7

That’s the eventual plan (especially to include starting points for Next.js and Create React App).

2 Likes
8

Is that template ready for production?

1 Like
9

We are currently merging parts of this starter project into the dfx new template. If you use this one, definitely let me know if you run into any issues and I’d be happy to help debug.

3 Likes
10

is svelte on the table as well :eyes:

11

Yep! It’s relatively simple to adjust the starter project to use any front-end framework supported by Vite.

We could also start maintaining a Svelte template if there’s enough interest.

5 Likes
12

We do have some Svelte examples, but I’m not sure how well-tested they are right now

1 Like