How to deploy contract to BSC testnet and Github Pages from scratch

If you are just starting out on developing smart contract, you may start to wonder how do you deploy your contract to the network. Also, you may wonder how to have a frontend project that interact with your contract. It couldn’t be easier with Truffle React Box.

In this post, we are going to go through the steps from creating a new project to deploying both the contract to BSC testnet and frontend to Github Page.

You can find the code for this article here.

Step 1: Initialise Truffle React project

First, you will need Truffle in your machine.

// One of these commands will do
// Install truffle globally, add sudo if necessary
npm install -g truffle
// If you are having issue with npm, you can try yarn
yarn global add truffle

After Truffle is installed, you can create the project inside an empty directory. I will create mine inside a directory called simple-web3 .

// Inside an empty directory
truffle unbox react

You will get a project structure similar to the picture below. Let’s unpack them one by one.

client — The frontend code written in React. It is the same project structure created when you run create-react-app .We will run it on our local machine later.

contracts — Where all your contracts should be in. These are the contracts that will get deployed to BSC testnet later.

migrations — Files that helps you deploy your contracts to the network. We will see them in action when we run truffle migrate .

test — Directory that keeps all your test files.

truffle-config.js — Configuration for Truffle. We will define the network that we want to deploy to in here.

Step 2: Compile the contract

We can go ahead and compile the contracts by running

truffle compile

Notice this command adds a contracts directory inside client/src . Basically truffle compile compiles our Solidity contracts to JSON files, which will be used by the frontend code to interact with the contracts.

Step 3: Deploy to BSC Testnet

We need to download 2 more packages before we can proceed with our deployment

1. dotenv — Load environment variables from .env file, which stores our secret mnemonic.
2. truffle/hdwallet-provider — Used to sign transactions for addresses derived from a 12 or 24 word mnemonic.

Let’s install the packages by running:

yarn add dotenv @truffle/hdwallet-provider

Modify truffle-config.js to the following

Here we add 2 networks — testnet and bsc. Notice they have different URLs and network ID.

Create an .env file at root, and put your mnemonic(in case you do not know how to find it, you can look at here) in it, like so:

IMPORTANT: Never share your mnemonic like I am doing here! Your account is compromised when others know the mnemonic of your account. Also, notice that I have committed .env file to Git. In real life, you will not do that as it defeats the purpose of using it at the very beginning. I just want people have a working example with all the files when downloading the code.

Okay, time to deploy! Let’s run this in the terminal:

// We name the BSC testnet network as testnet, we can select it here
truffle migrate --network testnet

If you try to run it, you probably will hit some error. It is probably because we do not have BNB to make such deployment. Yes, every deployment requires money!

But since we’re using testnet, we can get 1 free BNB from here. Go ahead, don’t be shy.

Now run the same command again to deploy:

truffle migrate --network testnet

At the end, you should see

Summary
=======
> Total deployments:   2
> Final cost:          0.00260364 ETH

It also prints out some important information like the contract address, which you do not have copy down, as it is already filled inside client/src/contract JSON files. Take a look at SimpleStorage.json and search for networks

It consists of the network ID — 97 for BSC testnet, the contract address, and transaction hash.

Let’s try interacting with the contract from frontend. In the terminal, run:

cd client && npm run start

The app will run at localhost:3000, remember to add and switch to BSC Testnet on your Metamask. If you do not have BSC testnet added, you can check the tutorial here.

The information for BSC testnet is as followed:

Network Name: Smart Chain — Testnet
New RPC URL: https://data-seed-prebsc-1-s1.binance.org:8545/
ChainID: 97
Symbol: BNB
Block Explorer URL: https://testnet.bscscan.com

It should ask you to make a transaction, go ahead and confirm it. After the transaction is confirmed, you will see the value changed to 5

That’s it! You have successfully deployed the contract to BSC testnet and interact with it from your frontend.

Step 4: Deploy Frontend to Github Page

Okay, let’s deploy the frontend to Github Page next. Before we do that, let’s comment out Line 42 in App.js so it won’t keep asking us to pay gas fee to change the value.

Before we proceed, we need to create a repository on Github first. I have created mine at https://github.com/yoongti/simple-web3 and pushed the code to it.

Inside client/package.json , add predeploy and deploy scripts

predeploy will always run before deploy script automatically.

Run the following commands:

// cd to client directory
cd client
npm install gh-pages
npm run deploy

After it is successfully deployed, take a look at https://myname.github.io/myapp

Replace myname with your Github username, and myapp with the name of your repository. For mine, it is at https://yoongti.github.io/simple-web3/

And…. it is an empty page with error…

Well it is due to the fact that the project is built assuming it is hosted at server root, we can fix this by adding a homepage to package.json

Remember to replace yoongti with your Github username and simple-web3 with your repository name

"homepage": "https://yoongti.github.io/simple-web3/",

Run the deployment command again

npm run deploy

It takes a while for the change to be reflected after publishing.

That’s it! You have learned how to deploy contracts to BSC testnet. On top of it, you now also know how to deploy static page to Github Page.

Thanks for reading and have a nice day!