What are front end canisters?

i have heard this term front end canisters but i don’t know what it means and what is the difference between a back end canister and front end canister

Hi revoltez

You can write a frontend interface for an application you deploy on the Internet Computer using web frameworks like React, a frontend canister in your project contains this code, along with any images and static assets that need to be loaded in a visitor’s web browser.

A backend canister contains the code that will be executed on the Internet Computer itself, this is where your application persists data, for example. Your frontend code can make calls to your backend canister to query or update this data.

If you run dfx new my_project it’ll create a project with two canisters for you, the one called my_project_assets is the frontend canister, the one called my_project is the backend canister.

The tutorials include some good examples of how to do this, eg: Customize the front-end :: Internet Computer

3 Likes

thank you so much, this is brilliant its just like traditional code with canisters

2 Likes

I put together a very simple demo for a CRUD-style app written in only 500 lines of JavaScript and 100 lines of Motoko. Def worth checking out if you’re looking for something simple to get started with.

If you wanna see something more complex, then checkout this cool blog post:

2 Likes

One note - we currently have a limitation that your assets must be bundled into a single JavaScript file, totaling less than 2mb, and you can’t provide your own index.html.

This isn’t a hard technical constraint for a canister, but it is a feature that we intend to build out further once our other top launch priorities are addressed.

3 Likes

I REALLY look forward to being able to specify my own index.html, and to be able to have http paths resolve to canister functions. Without this, we can’t use http2/3 with JavaScript imports, can’t use dynamic imports, and can’t do things like host RSS feeds easily

2 Likes