Toward Web3

Deploy Your First Smart-Contract

Introduction

In this article, we go through the pet shop tutorial. This tutorial introduces the usage of truffle: a tool that can be used to compile and deploy smart contracts. Furthermore, we will develop a small DApp that allows us to “adopt dogs”. The goal here is to simplify the official tutorial and get you going in no time. To do this, we will rely heavily on Docker.

Although the first part is not technical: we will see how the different components are connected. The second part will be more hands: a step-by-step guide to deploying and using your DApp. Finally, for those in hurry, we will be starting with a small TL;DR that regroups the commands of the two main components.

TL;DR

If you just want a truffle environement with VIM installed use this command
$ docker run -it --net=host amine2029/truffle

  1. Start Ganache-cli:
    $ docker run -it --net=host amine2029/ganache-cli
  2. Start Truffle environment with pet shop installed:
    $ docker run -it --net=host amine2029/truffle_pet_shop
  3. To deploy the smart contract:
    $ truffle deploy
  4. To launch the website:
    $ npm run dev

Overview

Figure 1 shows the connections between the different components. At the heart of the figure, we can see the (emulated) blockchain. In this tutorial, we will use a privately emulated one using the ganache-cli tool. It is to this blockchain that we will deploy our smart contract “Adopt.sol”.

Once the smart contract is deployed to the blockchain the website “pet shop” can access the blockchain to get the info about the state of each “pet”. To adopt a “pet” we will be needing to sign transactions with our account (using the private key) this is where Metamask is useful as it is the only component that has access to the private key. (In this specific example Ganache-cli generates the keys for us, but this is not the case in a real environment).

Let’s run our pet shop!

The website can be run in 5 steps:

Run an Emulated blockchain

To run an emulated blockchain with use Ganache-cli. You can run one using this command:
$ docker run -it --net=host amine2029/ganache-cli

Other components that communicate with the blockchain (truffle, the website, or metamask) will use the endpoint: 127.0.0.1:8545. It is important to ensure that all these components are configured to use this end point.

The emulated blockchain will create many accounts with an initial amount of token to be used for our experiment. The private key of the first account is: 0x4adfce72c17a5bfc068dc020562e6283795b9464a2468e456f9014893868f56e

The docker option “--net=host” is important as it allows the docker to access the network of the host. You can check that there is an actual port open on your system by running: $ netstat -a | grep 8545.

Deploy and Run the Website Server

We will be using the same environment to deploy the smart contract and run the server. This environment can be obtained by running “truffle unbox pet-shop”. Otherwise, you can obtain it by running this docker:
$ docker run -it — net=host amine2029/truffle_pet_shop

Then to deploy the smart contract to ganache-cli run:
$ truffle deploy

To launch the website run:
$ npm run dev

The website will be available at http://localhost:3000/

Configure Metamask

Metamask is a browser extension that represents your wallet (contains private and public keys of your wallet).

For our test you can just create a new account (no need to import):

Agree to the terms, set a password, and ask to be reminded later to set up your backup phrase. Once done you should see the main page of metamask:

Now, we need to switch the network that we will be using to the one emulated by ganache-cli. Click on the top right “Ethereum Mainnet”, then click on show/hide test networks.

Once you activate the “Show test network” option, you will be able to see our RPC endpoint at the bottom localhost:8545. Select it!

Now it is time to import one of the accounts created by ganache-cli using a private key. Click on the account logo on the top right, then on “import account”. If you run ganache-cli using the command specified above use 0x4adfce72c17a5bfc068dc020562e6283795b9464a2468e456f9014893868f56e as a private key.

Once done you should see your account balance containing 1000 “ETH”:

Adopt a Pet!

When you open the link of the running website, you should see:

You should also be asked to connect to metamask (use your imported account):

Now, Let’s adopt a pet by clicking on one of the adopt buttons below the pets. You will then be asked to confirm the transaction in a metamask window. Scroll to the bottom and confirm it.

That is it. You can adopt more pets as you like!

Conclusion

Hope you enjoyed this tutorial. Feel free to drop a comment and don’t forget to like/follow ;)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Amine

Amine

9 Followers

Big fan of technology with a recent interest in finance following the rise of cryptocurrencies.