Skip to main content

Deploy your blind app to the Nillion Testnet

Your blind app is currently running locally against the nillion-devnet. Let's configure environment variables to point at the Nillion Testnet. That way anyone can play with your blind app once it's deployed.

Update your .env file and test locally​

Update your .env values to point at the Nillion Testnet

Note: for Next apps, change the prefix to NEXT_PUBLIC_

📋Copy ReactJs Testnet Configuration
REACT_APP_API_BASE_PATH=/nilchain-proxy
REACT_APP_NILLION_CLUSTER_ID=b13880d3-dde8-4a75-a171-8a1a9d985e6c
REACT_APP_NILLION_BOOTNODE_WEBSOCKET=/dns/node-1.testnet-photon.nillion-network.nilogy.xyz/tcp/14211/wss/p2p/12D3KooWCfFYAb77NCjEk711e9BVe2E6mrasPZTtAjJAPtVAdbye
REACT_APP_NILLION_NILCHAIN_CHAIN_ID=nillion-chain-testnet-1
REACT_APP_NILLION_NILCHAIN_JSON_RPC=http://65.109.222.111:26657
REACT_APP_NILLION_NILCHAIN_REST_API=https://testnet-nillion-api.lavenderfive.com
REACT_APP_NILLION_NILCHAIN_PRIVATE_KEY=YOUR_TESTNET_FUNDED_PRIVATE_KEY

The REACT_APP_NILLION_NILCHAIN_PRIVATE_KEY private key value above should correspond to an address you've funded with Testnet NIL.

Create a Nillion Wallet and get the private Key​

Follow the Creating a Nillion Wallet guide to create your Nillion wallet. Note that when you create your wallet, you need to use the "Sign up with Google" option rather than "Use recovery phrase" option because Keplr only exposes the private key of wallets created when you "Sign up with Google."

Here's how to get the REACT_APP_NILLION_NILCHAIN_PRIVATE_KEY value from a Nillion wallet created with a Google account:

Fund the Nillion Wallet address that corresponds to your private key​

Follow the Nillion Faucet Guide to learn how to get Testnet NIL to fund the Nillion wallet address that corresponds to your private key. This way your app can pay for operations.

Test the configuration locally against your blind app to make sure the full blind computation flow is working as expected.

Set Headers and set up proxy for nilchain​

The JavaScript Client makes use of browser web-workers. To make your app cross-origin isolated, you'll need to set COOP and COEP headers, completed for you in the cra-nillion webpack.config.js

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

Add headers and create a nilchain proxy in your webpack.config.js

module.exports = {
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    headers: {
      'Cross-Origin-Embedder-Policy': 'require-corp',
      'Cross-Origin-Opener-Policy': 'same-origin',
    },
    hot: true,
    client: {
      overlay: false,
    },
    historyApiFallback: true,
    proxy: [
      {
        context: ['/nilchain-proxy'],
        target: process.env.REACT_APP_NILLION_NILCHAIN_JSON_RPC,
        pathRewrite: { '^/nilchain-proxy': '' },
        changeOrigin: true,
        secure: false,
      },
    ],
  },
};

For more information, check out

Commit your project to Github​

Commit your repo to Github from your React/Next.js folder and tag your Github repo with nillion-nada so the rest of the Nillion community can find it.

Host your blind app with Vercel​

Deploy with Vercel

  1. Use the above deploy button + import your repository.

  2. Follow the https://vercel.com/docs/projects/environment-variables guide to add all Testnet environment variables. A shortcut is to copy and paste from .env and into their textbox.

  3. Set up the vercel.json file with headers and proxy rewrites

vercel.json
loading...
  1. Share your live link on Nillion's Github Discussions Show and Tell Forum

Keep Exploring​

🥳 Congratulations on completing the Nillion Developer Quickstart and deploying your blind app to the Nillion testnet. Keep exploring and building by