Create an Ethereum Dapp with React and Docker

Images Google Sources

In this tutorial, we’ll create an Ethereum Dapp and will run its different components in a separate docker container.

You can clone the project using this GitHub link.

Thanks to the people who’s article and courses helped a lot:

Brandon Morelli For HTML and CSS ( Build a Weather Website )

Stephen Grider For Ethereum and Docker course on Udemy.

Before beginning lets understand what we’re going to build and how the structure of our Dapp will look like.

In the Dapp there will be three modules:

  1. ganache-cli
  2. Ethereum-Dapp and Server
  3. Client (React App)

The above 3 modules will run in individual docker containers.

D app

Why we’re building individual container for each service when they all can be build in one container?

Yeah, all can be build in one container and everything will be straight forward. Just for some fun, we’re using different containers.

Project Setup

Create a project folder and give it the name “docker-ethereum”.

Directory Structure

docker-ethereum- client- ethereum- server- .dockerignore- docker-compose.yml- Dockerfile- Dockerfile.ganache- package.json

package.json

Create a package.json and paste the below code:

We have finished installing the dependencies for the project.

To build any application our network should be ready. So, let’s first start with our ganache-cli as the network.

1. ganache-cli

It is a test network which comes with 10 accounts with 100 ethers each. It is best for development where you don’t have to wait for the transactions to mine.

Ganache is a personal blockchain for Ethereum development you can use to deploy contracts, develop your applications, and run tests.

In our application ganache-cli will run in a docker container.

Inside the project directory, create a Dockerfile.ganache .

In this Dockerfile, we’ll write all the instructions to set up and run the ganache-cli inside the container.

On line 2, to build this ganache-cli image, we’re taking node:alpine as a base image.

On line 5, we’re setting /app folder as the working directory of the image where all our instructions will run.

On line 8, we’re installing ganache-cli globally.

On line 12, we’re setting ganache-cli -h 0.0.0.0 as the default command of the image.

Ganache-cli’s default host is 127.0.0.1 but for docker instance it is 0.0.0.0

I have explained all the above instructions in detail in my last post. Please check it, if you find any difficulty here.

Our network is configured.

2. Ethereum Dapp and Server

Ethereum Dapp

Create a Ethereumfolder in the project directory.

Directory Structure

Ethereum- build- contracts  - Message.sol- compile.js- deploy.js- logic.js- receipt-ganache.json- web3.js

Inside the Ethereum directory:

contracts

Create a new folder contractsand a new file Message.sol in the contracts folder and paste the below code.

We’re creating a simple message contract. There will be 3 functions in this smart contract (1) constructor (2) setMessage (3) getMessage

In the Message smart contract when it will run for the first time, that time the constructorwill set the message as the initial message.

The setMessage function will set a new message.

The getMessage is a view function and it’ll return the value of the message variable which was set either by constructor or setMessage .

compile.js

Create a new file compile.js and paste the below code in it. This will compile the Message.solsmart contract and save the compiled contract in the build folder as Message.json .

web3.js

Create a web3.js file which will work as a bridge between the application and the ethereum network.

web3.js is a collection of libraries which allow you to interact with a local or remote Ethereum node, using an HTTP, WebSocket or IPC connection.

web3.js can be used in 2 ways, (1) server-side web3js: transaction signed on the server side (2) client-side web3js: transaction signed on the browser side. In this web3js invoked by third-party like Mist or Metamask. In the client-side web3js invoked in the html pages.

For this project, we’re using server-side web3js.

Copy and paste the below code to the web3.js

Take note of web3 provider http://ganache:8545 . Here, ganache is the name of the container in which ganache-cli is running.

deploy.js

Create a deploy.js file and paste the below code in it. It will take the compiled contract Message.json and deploy the contract to the network.

From the web3.js file, deploy.js import the web3 instance of ganache-cli and web3network as ganache .

logic.js

Create a new file logic.js and paste the below code in it. It consists of all the logic to interact with the deployed Message contract on the network.

There are 3 functions inside the logic.js

  1. getContractObject it will return the contract object/instance which was deployed on the network using deploy.js . This object will then call the smart contract.
  2. setMessage it requires 1 string argument and set this as a message to the message variable in the smart contract.
  3. getMessage will return the message set either by constructor or setMessage

The ethereum module is complete.

Now, server needs to be set up which will call the ethereum module.

server

Create a server folder in the project directory.

Directory Structure

server- routes  - contract-API.js  - smart-contract-API.js- index.js

routes

Create a routes folder inside the server folder.

contract-API.js

Create a contract-API.js file and paste the below the code.

To compile and deploy the contract we have created APIs instead of manually compiling and deploying it on the network.

If you remember, our Message smart contract’s constructor requires an initial message. To keep it simple, by default we’re setting initial message as Hello World! . You can change it in the deploy router.

smart-contract-API.js

Create a smart-contract-API.js and paste the below code.

smart-contract-API.js routers will call setMessage and getMessage from logic.js

index.js

Create a index.js file in theserver folder and paste the below code.

This is the server for ethereum dapp.

At the top, we’re importing routes contract-API.js and smart-contract-API.js . The server is listening at the port 4000 .

The server module is complete here.

Let’s dockerize it.

Dockerfile

Create a Dockerfile in the root project directory and paste the below code.

The docker image will create according to Dockerfile.

  • node:alpine To create an image we require a base image which comes with some pre-requisite software. Our server and ethereum are dependent on node that’s why we are using node:alpine as a base image. alpine in short, is the minimum required libraries to run a node application.
  • WORKDIR /app setting /app directory of base image as the working directory.
  • Line 8 & 9 Installing the pre-requisite software for the ethereum dapp like python is required to install the web3 library.
  • COPY ./package.json . Copy package.jsonin /app directory
  • RUN npm install Install the dependencies mentioned in package.json
  • COPY . . Copy the complete root directory and paste in the /app directory
  • CMD ["npm","start"] set the default command

If you noticed we are copying the complete root directory which includes node_modules . This will make the image large and it makes no sense as we’re installing it from the copied package.json inside the image.

To ignore the files or folders while building the docker image just like the .gitignore in docker there is .dockerignore file.

.dockerignore

Create a .dockerignore file and paste the below code.

node_modules/
client/

It will ignore the node_modules and client directory which we’ll create in the next section. If we don’t ignore the client directory then it will copy the client application too.

Now, we can move to our last module React application the client .

3. Client (React Application)

For the react application, we’re using create-react-app tool for the Dapp.

Create React App is a tool (built by developers at Facebook) that gives you a massive head start when building React apps. It saves you from time-consuming setup and configuration. — treehouse

Installing Create React App

We need to install the create-react-appglobally. Open your Terminal or console and run:

npm install -g create-react-app

From the project directory, open the terminal or console to create the react app by name client and run the below command.

create-react-app client

Directory Structure

client - public  - favicon.ico  - index.html  - manifest.json- src  - App.css  - App.js  - App.test.js  - index.css  - index.js  - logo.svg  - message.js  - serviceWorker.js- .dockerignore- Dockerfile- package-lock.json- package.json- README.md

Once the client is created you will see a folder structure like above except message.js inside the src ,Dockerfile and .dockerignore.

For more information on react please follow the below links:

index.html

Open index.html from the public folder and change the title to Message App . Add the below link in the <head> tag. This is the fonts which are used in the application.

<link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>

App.css

Open the App.css from the src folder and paste the below css which is used in the application.

/*
Styles from this codepen:
https://codepen.io/official_naveen/pen/rgknI
*/
body {
width: 800px;
margin: 0 auto;
font-family: 'Open Sans', sans-serif;
}
.container {
width: 600px;
margin: 0 auto;
}
fieldset {
display: block;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-before: 0em;
-webkit-padding-start: 0em;
-webkit-padding-end: 0em;
-webkit-padding-after: 0em;
border: 0px;
border-image-
Publication date: 
04/15/2019 - 18:53
Disclaimer

The views and opinions expressed in this article are solely those of the authors and do not reflect the views of Bitcoin Insider. Every investment and trading move involves risk - this is especially true for cryptocurrencies given their volatility. We strongly advise our readers to conduct their own research when making a decision.