Crate my_canister_frontend 

My Canister Frontend

Frontend asset processing library for Internet Computer Canister Dapps.

Usage

Single canister example:

use ic_cdk::{init, query};
use ic_http_certification::{HttpRequest, HttpResponse};
use include_dir::{include_dir, Dir};
use my_canister_frontend::setup_frontend;

static ASSETS: Dir = include_dir!("$CARGO_MANIFEST_DIR/../dapp-frontend/dist");

#[init]
fn init() {
	setup_frontend(&ASSETS);
}

#[query]
fn http_request(req: HttpRequest) -> HttpResponse {
	my_canister_frontend::http_request(req)
}

Features

• Implements internal AssetRouter for managing frontend assets
• Embeds assets provided a Dir via include_dir
• Automatic MIME type detection using mime_guess
• index.html auto-configured as fallback for /
• Certification using ic-asset-certification
• Security headers: 8 default security/privacy headers on all responses (HSTS, X-Frame-Options, Referrer-Policy, etc.)
• Asset validation: File type allowlist, 2 MB size limit, path traversal protection, duplicate detection
• Gzip compression: Automatic gzip for text-based assets (HTML, JS, CSS, JSON, SVG)
• Configurable: Use FrontendConfig to allow additional file types or adjust size limits
• Exposes with_asset_router and with_asset_router_mut for access to the asset router, see example below.
• Exposes asset_router_configs if you want to implement your own asset router, see this example.

Configuration

To allow additional file types or customize settings:

use ic_cdk::init;
use include_dir::{include_dir, Dir};
use my_canister_frontend::{setup_frontend_with_config, FrontendConfig};

static ASSETS: Dir = include_dir!("$CARGO_MANIFEST_DIR/../dapp-frontend/dist");

#[init]
fn init() {
    let config = FrontendConfig {
        extra_allowed_extensions: vec!["webmanifest".to_string()],
        ..Default::default()
    };
    setup_frontend_with_config(&ASSETS, &config).expect("Failed to setup frontend");
}

Usage with my_canister_dashboard

use ic_cdk::{init, query};
use ic_http_certification::{HttpRequest, HttpResponse};
use include_dir::{include_dir, Dir};
use my_canister_dashboard::setup_dashboard_assets;
use my_canister_frontend::setup_frontend;
use my_canister_frontend::asset_router::with_asset_router_mut;

static ASSETS: Dir = include_dir!("$CARGO_MANIFEST_DIR/../dapp-frontend/dist");

#[init]
fn init() {
	setup_frontend(&ASSETS);

    // Setup dashboard in internal asset router
    with_asset_router_mut(|router| {
        setup_dashboard_assets(
            router,
            Some(vec![
                "https://mycanister.app".to_string(),
            ]),
        );
    });
}

#[query]
fn http_request(req: HttpRequest) -> HttpResponse {
	my_canister_frontend::http_request(req)
}

License

MIT

Re-exports

pub use asset_router::FrontendConfig;

Modules

asset_router

Functions

asset_router_configsDeprecated

Deprecated: use my_canister_frontend::asset_router::asset_router_configs instead.

http_request

Serve certified frontend assets. Any other additional assets you may have added to the asset router, like for example dashboard assets, will also be served.

setup_frontend

Initialize and certify your Canister Dapp frontend assets.

setup_frontend_with_config

Initialize and certify your Canister Dapp frontend assets with custom configuration.