A Comprehensive Guide to Managing Environment Configurations in JoyID-based CKB Applications

Introduction

As a developer of JoyID-based CKB applications, managing environment configurations can be a time-consuming and error-prone task. With different environments (e.g., development, staging, production) requiring different configurations, it can be difficult to keep track of all the variables and settings. In this guide, we will provide a comprehensive solution to this problem by introducing a config.js file that can manage different configurations for different environments.

Although this guide is based on Create React App, I believe other frameworks should be similar, and only minor modifications may be needed to adapt to them. Let’s start it!

Guide

Step 1: Create a config.js file

The first step is to create a config.js file in the root directory of your JoyID-based CKB application. This file will contain all the environment-specific configurations and variables. We’ll edit it in step 3.

your_app/
β”œβ”€β”€ build/
β”œβ”€β”€ node_modules/
β”œβ”€β”€ public/
β”œβ”€β”€ src/
β”œβ”€β”€ config.js
β”œβ”€β”€ package.json
β”œβ”€β”€ README.md
└── …

Step 2: Define environment variables

Next, define environment variables for each environment you want to support (e.g., development, staging, production). You can define these variables using the process.env object in Node.js, or by using a package like dotenv:

your_app/
β”œβ”€β”€ build/
β”œβ”€β”€ node_modules/
β”œβ”€β”€ public/
β”œβ”€β”€ src/
β”œβ”€β”€ config.js
β”œβ”€β”€ .env.development
β”œβ”€β”€ package.json
β”œβ”€β”€ README.md
└── …

Then edit the env file:
image

Step 3: Define configuration objects

Edit the config.js file, for each environment, define a configuration object that contains all the configuration variables and settings for that environment. Here is my config.js file:

import { predefined } from "@ckb-lumos/config-manager";

const prodConfig = {
    CKB: {
        CKB_RPC_URL: "https://mainnet.ckb.dev/rpc",
        CKB_INDEXER_URL: "https://mainnet.ckb.dev/indexer",
        CKB_EXPLORER_URL: "https://explorer.nervos.org/",
        PREFIX: "ckb",
        SCRIPTS: predefined.LINA.SCRIPTS,
    },
    JOYID: {
        SCRIPT: {
            CODE_HASH: "0xd00c84f0ec8fd441c38bc3f87a371f547190f2fcff88e642bc5bf54b9e318323",
            HASH_TYPE: "type",
            TX_HASH: "0xf05188e5f3a6767fc4687faf45ba5f1a6e25d3ada6129dae8722cb282f262493",
            INDEX: "0x0",
            DEP_TYPE: "depGroup"
        },
        APP_CONFIG: {
            // your app name
            name: "JoyGift",
            // your app logo
            logo: "https://joygiftdev.netlify.app/logo192.svg",
            // 
            network: "mainnet",
            //
            // JoyID app url, optional
            joyidAppURL: "https://app.joy.id",
            // JoyID server url, optional
            joyidServerURL: "https://api.joy.id",
        }

    }
};

const devConfig = {
    CKB: {
        CKB_RPC_URL: "https://testnet.ckb.dev/rpc",
        CKB_INDEXER_URL: "https://testnet.ckb.dev/indexer",
        CKB_EXPLORER_URL: "https://pudge.explorer.nervos.org/",
        PREFIX: "ckt",
        SCRIPTS: predefined.AGGRON4.SCRIPTS,
    },
    JOYID: {
        SCRIPT: {
            CODE_HASH: "0xd23761b364210735c19c60561d213fb3beae2fd6172743719eff6920e020baac",
            HASH_TYPE: "type",
            TX_HASH: "0x4dcf3f3b09efac8995d6cbee87c5345e812d310094651e0c3d9a730f32dc9263",
            INDEX: "0x0",
            DEP_TYPE: "depGroup"
        },
        APP_CONFIG: {
            // your app name
            name: "JoyGift",
            // your app logo
            logo: "https://joygiftdev.xxx/logo192.svg",
            // 
            network: "testnet",
            //
            // JoyID app url, optional
            joyidAppURL: "https://testnet.joyid.dev",
            // JoyID server url, optional
            joyidServerURL: "https://api.joyid.dev",
        }

    }

};

const env = process.env.REACT_APP_ENV;

let appConfig;

if (env === "production") {
    appConfig = prodConfig;
} else if (env === "dev" || env === "staging") {
    appConfig = devConfig;
} else {
    appConfig = devConfig;
}

export default appConfig;

Step 4: Export the configuration object for the current environment

Finally, export the configuration object for the current environment based on the value of the REACT_APP_ENV environment variable. This can be done using a conditional statement that checks the value of REACT_APP_ENV and sets the appConfig variable accordingly.

Step 5: Use the configuration object in your application

Now that you have defined the environment-specific configuration objects, you can use them in your application code. For example, you can import the appConfig object into your React components and use the variables and settings as needed.

// Index.js
import appConfig from './config';
import { initConfig } from '@joyid/ckb';

initConfig(appConfig.JOYID.APP_CONFIG);

If your application needs to send on-chain transactions and query on-chain information, such as querying the balance of a CKB address, etc., you will need lumos. Before using lumos, and some initialization is required. The following function can do the job:

import {
    initializeConfig,
    createConfig
} from '@ckb-lumos/config-manager'
import appConfig from './config';

function initLumos() {
    initializeConfig(
        createConfig({
            PREFIX: appConfig.CKB.PREFIX,
            SCRIPTS: {
                ...appConfig.CKB.SCRIPTS,
                JOYID: {
                    ...appConfig.JOYID.SCRIPT,
                    pubkey: '',
                    keyType: 'main_key',
                    alg: '-7'
                },
            },
        })
    )
}

Conclusion

By using a config.js file to manage environment configurations, you can simplify the process of deploying and testing your JoyID-based CKB applications. With this approach, you can define all the environment-specific variables and settings in one place, and easily switch between different environments as needed. I hope this guide has been helpful, and welcome any feedback or suggestions for improvement.

Let’s build on CKB, go go go.

7 Likes