How to store your Web3 dApp secrets: Guide to environment variables

// Dependency directories
node_modules/
jspm_packages/

// dotenv environment variables files
.env
.env.test
.env.production

ENDPOINT_URL='https://nd-123-456-789.p2pify.com/API_KEY'
ADDRESS='0x95222290DD7278Aa3Ddd389Cc1E1d165CC4BAfe5'

require('dotenv').config();

const endpoint = process.env.ENDPOINT_URL;
const address = process.env.ADDRESS;

console.log(`Environment variables in use: \n ${endpoint} \n ${address}`);

// This is the server file.

const express = require('express')
const cors = require('cors')
const rateLimit = require('express-rate-limit')
require('dotenv').config()

const PORT = process.env.PORT || 3000

const app = express()

// Rate limiting, limit the number of requests a user can send within a specific amount of time.
// With this setup, the user can only make 100 request max every 10 minutes.
const limiter = rateLimit({
    WindowMs: 10 * 60 * 1000, // 10 minutes in ms.
    max: 100  // 100 request max.
})
app.use(limiter)
app.set('trust proxy', 1)

// Set static folder; this allows our server to pick up the HTML file in the src folder.
app.use(express.static('src'))

// Routes
// This route looks into the index.js file in the routes folder and picks up the '/' route.
app.use('/api', require('./routes'))

// Enable cors
app.use(cors())

app.listen(PORT, () => console.log(`Server running on port ${PORT}`))

const express = require('express')
const router = express.Router()
const needle = require('needle') // You could use 'node-fetch' too, but it might have some conflicts.

// Env variables, taken from the .env file.
const ETHERSCAN_API_BASE_URL = process.env.ETHERSCAN_API_BASE_URL
const ETHERSCAN_API_KEY_NAME = process.env.ETHERSCAN_API_KEY_NAME
const ETHERSCAN_API_KEY_VALUE = process.env.ETHERSCAN_API_KEY_VALUE

// Route from the server file.
router.get('/', async (req, res) => {
    try {

        // URLSearchParams allows us to build the URL
        const apiKey = new URLSearchParams({
            [ETHERSCAN_API_KEY_NAME]: ETHERSCAN_API_KEY_VALUE,
        })

        // Build the full API URL using URLSearchParams
        const fullUrl = `${ETHERSCAN_API_BASE_URL}&${apiKey}`

        // Send the request to the Etherscan API, and retrieve the JSON body response.
        const apiResponse = await needle('get', fullUrl)
        const data = apiResponse.body

        res.status(200).json(data)
    } catch (error) {
        res.status(500).json({
            error
        })
    }
})

module.exports = router

const limiter = rateLimit({
    WindowMs: 10 * 60 * 1000, // 10 minutes in ms.
    max: 100  // 100 request max.
})
app.use(limiter)

{"jsonrpc":"2.0","error":{"code":-32002,"message":"rejected due to project ID settings"}}
{"jsonrpc":"2.0","error":{"code":0,"message":"not authorized"},"id":null}

async function fetchBlock() {

    let displayBlock = document.getElementById("block-number")

    // Fetch the latest block number querying the Etherscan API
    const response = await fetch("/api")

    // Place the JSON response in a constant and log it
    const blockHex = await response.json()
    console.log(`The latest block in HEX is: ${blockHex.result}`)

    // Extract the HEX block value from the JSON
    const blockString = JSON.stringify(blockHex.result)
    //console.log(blockString)

    // Slice the HEX value to remove 0x
    const slicedBlock = blockString.slice(3, -1)
    //console.log(slicedBlock)

    // Convert and log the decimal block number
    const blockDecimal = parseInt(slicedBlock, 16)
    console.log(`The latest block number is: ${blockDecimal}`)
    displayBlock.innerHTML = blockDecimal
}

async function fetchBalance() {

    // Proxy server URL
		// localhost when ran locally, you will need to add your server URL once deployed.
    const url = 'http://localhost:4000/balance';

    // Initialize the HTML element where the balance will be displayed in the front end
    let displayBalance = document.getElementById("balance")

    // The Ethereum address to query picked up from the front end
    const address = document.getElementById("address").value
    console.log(`Address to query: ${address}`)

    // Send a POST request to the proxy server to query the balance
    fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ address })
    })
      .then(response => response.json())
      .then(data => {
        // Handle the response data
        console.log(`The balance is: ${data.balance} ETH`);

        // Slice the response to only show the first 6 numbers
        const slicedBalance = data.balance.slice(0, 7)

        // Display the balance in the front end
        displayBalance.innerHTML = `Balance: ${slicedBalance} ETH`
      })
      .catch(error => {
        // Handle any errors
        console.error(error);
      });
}

// CLI

// Connect to your Dotenv Vault project
npx dotenv-vault new INSERT_YOUR_VAULT_ID_HERE_OR_LEAVE_BLANK_TO_CREATE_NEW

// Log into your Dotenv Vault project
npx dotenv-vault login

// Open your Dotenv Vault project to introduce changes
npx dotenv-vault open

// Pull your Dotenv Vault project .env file to local storage
npx dotenv-vault pull

// CLI

// Pull the development .env file
npx dotenv-vault pull development

// Pull the staging .env file
npx dotenv-vault pull staging

// Pull the ci .env file
npx dotenv-vault pull ci

// Pull the production .env file
npx dotenv-vault pull production

// index.js
require('dotenv-vault-core').config();
const endpoint = process.env.ENDPOINT_URL;
const address = process.env.PUBLIC_KEY;
console.log('Environment variables in use:\n' + endpoint + '...\n' + addresss);