How to Deploy a dApp/App Built with Spheron UI

Prerequisites

Before we begin, make sure you have the following prerequisites:

• A Spheron UI project with your smart contracts and UI components already developed.

• A compatible development environment, such as Node.js and npm, installed on your machine.

• A testnet or mainnet network provider, such as Infura, with the necessary credentials and endpoints.

Step 1: Configure the Deployment Environment

1. Install the required dependencies by running the following command in your project directory:

npm install truffle @truffle/hdwallet-provider dotenv

1. Create a .env file in your project directory and add the following environment variables:

MNEMONIC=<your mnemonic phrase>
INFURA_API_KEY=<your Infura API key>

Replace <your mnemonic phrase> with the mnemonic phrase for your Ethereum wallet, and <your Infura API key> with your Infura API key.

1. Create a truffle-config.js file in your project directory and configure it with the following content:

const HDWalletProvider = require('@truffle/hdwallet-provider');
require('dotenv').config();

module.exports = {
  networks: {
    development: {
      host: '127.0.0.1',
      port: 8545,
      network_id: '*',
    },
    testnet: {
      provider: () =>
        new HDWalletProvider(
          process.env.MNEMONIC,
          `https://rinkeby.infura.io/v3/${process.env.INFURA_API_KEY}`
        ),
      network_id: 4,
      gas: 5500000,
      gasPrice: 10000000000, // 10 gwei
      confirmations: 2,
      timeoutBlocks: 200,
      skipDryRun: true,
    },
    mainnet: {
      provider: () =>
        new HDWalletProvider(
          process.env.MNEMONIC,
          `https://mainnet.infura.io/v3/${process.env.INFURA_API_KEY}`
        ),
      network_id: 1,
      gas: 5500000,
      gasPrice: 5000000000, // 5 gwei
      confirmations: 2,
      timeoutBlocks: 200,
      skipDryRun: true,
    },
  },
};

Make sure to update the rinkeby.infura.io and mainnet.infura.io URLs with the appropriate endpoints for your chosen network.

Step 2: Deploy the Smart Contracts

1. Compile your smart contracts by running the following command in your project directory:

npx truffle compile

1. Migrate the smart contracts to the desired network by running one of the following commands:

For testnet deployment:

npx truffle migrate --network testnet

For mainnet deployment:

npx truffle migrate --network mainnet

This will deploy your smart contracts to the specified network using the configured deployment settings.

Step 3: Connect the UI to the Deployed Contracts

1. Update your UI configuration to include the network-specific contract addresses. This can typically be done in a configuration file or a separate JavaScript file.

const contractAddresses = {
  development: '<development_contract_address>',
  testnet: '<testnet_contract_address>',
  mainnet: '<mainnet_contract_address>',
};

const network = process.env.NETWORK || 'development';
const contractAddress = contractAddresses[network];

Replace <development_contract_address>, <testnet_contract_address>, and <mainnet_contract_address> with the actual contract addresses obtained after deploying the smart contracts.

1. Update your UI code to use the contractAddress variable when interacting with the deployed contracts.

const contract = new web3.eth.Contract(ContractABI, contractAddress);

Replace ContractABI with the ABI (Application Binary Interface) of your smart contract.

1. Build and deploy your UI to a web server or hosting platform of your choice, ensuring that it points to the correct network and contract address.

Additional Considerations and Best Practices

• Always thoroughly test your dApp/App on a testnet before deploying to the mainnet to ensure its functionality and security.

• Consider using a multi-signature wallet for deploying and managing your smart contracts to enhance security and prevent unauthorized modifications.

• Implement proper error handling and logging mechanisms in your smart contracts and UI code to facilitate debugging and monitoring during deployment and usage.

• Regularly update and maintain your dependencies, including Spheron UI, to benefit from the latest features and security patches.

Congratulations! You have successfully deployed a dApp/App built with Spheron UI to a testnet or mainnet. Follow the steps outlined in this guide for future deployments and consider the additional considerations and best practices to ensure a smooth and secure deployment process.