Ignite CLI Tutorials: (Part: 2)

Create a Front-end app for your Blockchain created with Ignite CLI

As part of our ongoing series of Ignite tutorials, in this one we will create the front end(with Wallet) for our Blockchain. To set up your blockchain, please see our 1st tutorial here: Tutorial #1

Okay, so you have Ignite installed, and have scaffolded an Awesome Blockchain with the address prefix as “awesome” and you want to create a wallet, you have come to the right place!

Before we scaffold our front end application, perhaps it’s best to turn off our chain if it is running. To do so, you can press ‘q’ in the terminal window you entered the “ignite chain serve” command from the first window:

If you do so, you should see this:

This means your blockchain is no longer running. We can leave that window open if you like as it should be in your project directory’s folder.

If not, we can cd into our project directory with the following command if you place it in your $HOME directory.

#from the $HOME directory
cd awesome
#or
cd path/to/awesome #where path/to is wherever you placed the directory.

We can scaffold a vue or react front end, you can see these as options with the “ignite scaffold –help” command.

ignite scaffold 

You can see vue and react are subcommands of scaffold

We can scaffold a react app or vue app with either of these commands.

ignite scaffold react 
# or
ignite scaffold vue 

If it scaffolded correctly, you should see this:

If you open the react or vue folder for your react project, you can see the files and boiler plate code that has been automatically generated, saving you a lot of time.

cd vue
# then to list the contents, please enter the ls command:
ls 

We also need to clear the composables cache. We can achieve that with this command.

ignite generate composables --clear-cache

Next we will want to start our blockchain as we did in the first tutorial. Before we do that we should cd back into our project(awesome) directory.

#If you are in the Vue or React Directory we can move up one folder to the project’s directory with this command:
cd ..
#let’s start our Blockchain with the following command:
ignite chain serve

Note: you need to be in your project’s directory (awesome) which I suggest placing in your home directory or a virtual environment. It is the folder that has the config.yml file, otherwise the chain will not launch.

In the first tutorial, we have set our address prefix to “awesome”, however, when we set up our front end, we need to tell the front end our address. We can do that with this command:

export VITE_ADDRESS_PREFIX=awesome
#You might consider adding this to your .bashrc, .bash_profile, .zshrc #profile, whichever you are using. 

If you do not complete this step your wallet may have a “cosmos” prefix in Keplr.

Now with our blockchain running, let’s open another terminal window and proceed with installing npm and launching our front end application. (Note: you will need node js installed on your system to do this, it can be downloaded from this link: Download | Node.js

#from the home directory
cd awesome
cd vue # or react, your choice (for this tutorial I am using vue).
npm install

You may see some errors, those can be fixed with “npm audit fix –force”, however, as this is for testing purposes, I suggest seeing if it works without doing that step (you can always do it afterwards).
Now we are ready to launch the front end. We can do so with the following command:

npm run dev 

You should see this:

If you right click the http://localhost:5173/ & if your blockchain is running(very important!) you should see this in your browser.

Congratulations! You have successfully launched a front end application for your blockchain, take a moment to pat yourself on the back, but we are not done yet. Let’s send some tokens from Bob to Alice. To do that you will need to install Keplr. I have installed the Chrome Extension. You can find the link here: https://www.keplr.app/download

For setting up the Keplr wallet, you can import the mnemonic for bob, it is a bit tedious, but will allow you to access Bob’s wallet on your chain.

Once Keplr is installed and you have the Chrome extension activated, you can press the “Connect Wallet” button inside the browser application.

This step will allow you to activate the Keplr wallet functionality, and also show the balance for your(Bob’s) wallet on screen as well as send and receive tokens. If done correctly, you should be able to see the balance for your wallet like in the picture below.

The next step is to send Alice some coins. We can get Alice Wallet address from the Ignite chain serve screen. Note your Alice wallet address will be different from this one.

After inputting Alice’s address, I decided to send 77777”stake” coins of Bob’s 100mn. After hitting send, Keplr wallet extension will pop up and allow for you to authorize the transaction(by signing with your private key) and submit the transaction to your blockchain.

If done correctly, you should see the 77777 deducted from your balance like in the picture below.

Congratulations, you have successfully done your first Token transfer on your very own blockchain! I hope this tutorial has shown you the simplicity and power of using Ignite CLI for developing application specific Blockchains built using Cosmos SDK.

Please check out these other useful resources for help building the blockchains of the future!

Ignite CLI Docs:
https://docs.ignite.com/

Official Ignite GitHub:
https://github.com/ignite/cli

Our Official Discord Server:
https://discord.com/invite/ignite

Twitter:
https://twitter.com/ignite_com