Skip to main content

Deploy the frontend of your dapp on-chain

This topic provides a detailed guide on deploying a frontend application into the blockchain. It includes steps for configuring environment variables, building and packaging the application, updating the blockchain settings, and accessing the deployed application through a web interface.

Prerequisites​

  • A dapp should be ready for the deployment.
  • The dapp should be placed into the root of the frontend application file structure. An example can be found here.

Steps to deploy​

  1. Run the node to get the blockchainRid value, it can be found in the terminal of dapp logs.

    chr node start --wipe

  2. Set the .env file by updating NEXT_PUBLIC_BRID to the new blockchainRid value.

  3. Replace the empty Next.js configuration with the following:

    const nextConfig = {
      output: "export",
      images: { unoptimized: true },
      basePath: `/web_query/${process.env.NEXT_PUBLIC_BRID}/web_static`,
    };

  4. Build the frontend and package it using the command:

    pnpm build

  5. Add webStatic to your rell/chromia.yml file as shown below:

    blockchains:
      asset_management:
        webStatic: out # this attribute

  6. Update the blockchain to enable new queries by running:

    chr node update

  7. Navigate to the following URL to interact with your deployed webpage:

    http://localhost:7740/web_query/<blockchainRid>/web_static

To learn more about developing production-ready dapps, visit the Chromia course page.