Back to homepage

Step-by-step Web3 DApp built with Solidity and Vue.js (part 3)

Published

This is the third part of this series in which I build a basic web3 application step-by-step. You can find the previous articles here: part 1, part 2

In the first part of this series I gave an overview of the project that I was going to build and created the smart contract. In the second part I created the front end and integrated it with the smart contract. In the last part I'm going to explain how to deploy the app to a production-like environment so other people can use it.

You can find this app online here, feel free to leave a message!

Deploy smart contract

As this is a very simple app, I don't want want t deploy it to the Ethereum main net. Deploying a smart contract requires some ETH to pay the gas fees and, I don't think it's worth it for a simple app like this. So instead of targeting Ethereum's main net, I'll deploy the smart contract to Rinkeby.

I'll use Alchemy to deploy it. In summary, to deploy the contract

  • create an app in Alchemy and get an HTTP endpoint
  • get some Rikeby ETH in a metamask account
  • add Rikeby to the Hardhat configuration file
  • create a deployment script and run it

You can find more details about each step in my guide to deploy contracts to Rinkeby

Once the contract is deployed, we'll have the contract address, which we'll need to include in the front end 😉

Deploy front end

To deploy the front end, I decided to use Netlify. It's super easy to use and it has a very generous free tier so it's become my go-to place to deploy websites.

Create an account using your GitHub oauth and click on Add New Site > Import an existing project. Authorize Netlify to access your GitHub/GitLab/BitBucket repost and then select the website repository.

As I explained in part 2 of this series, the application front end has a reference to the smart contract's address, and the address is loaded from an environment variable. We can define this variable on the site settings and indicate the address that we got after deploying the smart contract to the Rinkeby network.

Once the environment variable is configured, we can indicate the build command, in my case it's npm run build and the publish directory, which in my case is dist. If everything is correct the app will be deployed to a *.netlify.app domain 🎉

You can find this app live here

Conclusion

Although this application was very basic, by building it we've had to learn a lot of things: how to create a smart contract, how to compile and deploy it, how to interact with smart contracts from a front end application... It's the perfect project to get started with web3 and solidity.

After this, you can try to build more complex things, like mini games, bets or NFTs. I've alredy built a mini game to guess numbers, which requires users to place a small bet. I'll explain how to build it in a new series.

I hope you find this useful 🤙

TAGS

If you enjoyed this article consider sharing it on social media or buying me a coffee ✌️

Buy Me A Coffee