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.

info

While this topic uses Next.js for demonstration, you can use any frontend framework (React, Vue.js, Angular, Svelte, vanilla JavaScript, etc.) as long as it generates files for deployment. Simply adapt the build commands and configuration to match your chosen framework.

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.