Home Creating and Deploying Daap on Ethereum (Part-1)
Post
Cancel

Creating and Deploying Daap on Ethereum (Part-1)

Technologies that we are going to use:

  • Database: The Ethereum’s Testnet Ropsten blockchain. Hosting: IPFS to get free hosting forever in a decentralized platform.
  • Frontend: React.js with webpack. Don’t worry I’ll explain the most important steps. You can use whatever framework you like or plain javascript.
  • Domain name: Godaddy. Here I could use some decentralized domain service like peername but it’s just faster and easier with godaddy or any other domain registrar.
  • Contract’s programing language: Solidity 0.4.11, right now the most famous language for developing Smart Contracts. Frontend contracts: web3.js to use those contracts in your web user interface.
  • Frameworks: Truffle to deploy, test and compile our contracts.
  • Development server: Node.js to use the app while developing locally along with testrpc.
  • Metamask: To use the final application like the end user would.

Setup the project

I’ll explain you what are we going to create so that you have a clear image of the end result. We are going to create a casino like application where users are able to bet money for a number between 1 and 10 and if they’re correct, they win a portion of all the ether money staked after 100 total bets.

It’s quite a complex app to start but you’ll love it because it’s original and funny to use. Now I must warn you that this is not a secure application because you can’t simply generate randomness with Solidity. You’ve to take try different random generation techniques on the blockchain and see what works.

Take this tutorial as an introduction to see the whole process of creating a Dapp from start to finish.

First, download the current version of node.js from their website nodejs.org if you don’t have nodejs already. Then, create a folder called casino-ethereum in your computer’s desktop. Inside, open the terminal or command line and execute the command: npm init -y

After that do:

1
npm i -D -g truffle

To install the Ethereum development framework Truffle in this project as a developing dependency (-D) and globally (-g).

Then execute:

1
2
npm init -y
truffle init

Those 2 commands will start the project by creating the essential files for dapp development.

After that, do:

1
npm i -D webpack react react-dom babel-core babel-loader babel-preset-react babel-preset-env css-loader style-loader json-loader web3@0.20.0

Those are all the tools that we need to create the front-end of the dapp. There are a lot of dependencies because we’ll be creating a web application with the lastest version of javascript and React.js.

Mainly we installed webpack, react, babel and web3.

Note that we are installing the version 0.20.0 of web3 with web3@0.20.0 because the latest version of web3, the 1.0 is still in beta and it’s unstable.

Then, install npm i -g http-server. This a lightweight server that you’ll use to host your web app locally as you develop on localhost:8080.

Now you have all the dependencies that you need to create this project with react and webpack.

After that, go to your project folder and create a webpack.config.js file. This is the file that will combine all of our javascripts and css to generate a single file called build.js with all the js code converted to be compatible with new and old browsers. So that we can use not-yet-released features of the lastest javacript.

Now write this code inside the file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const path = require('path')
module.exports = {
   entry: path.join(__dirname, 'src/js', 'index.js'), // Our frontend will be inside the src folder
   output: {
      path: path.join(__dirname, 'dist'),
      filename: 'build.js' // The final file will be created in dist/build.js
   },
   module: {
      rules: [{
         test: /\.css$/, // To load the css in react
         use: ['style-loader', 'css-loader'],
         include: /src/
      }, {
         test: /\.jsx?$/, // To load the js and jsx files
         loader: 'babel-loader',
         exclude: /node_modules/,
         query: {
            presets: ['es2015', 'react', 'stage-2']
         }
      }]
   }
}

After that, create the folder src/ in the project and inside that folder, create the folders js/ and css/ just to organize the source code.

Inside each folder create index.js and index.css . Finally create the folder dist/ at the outer level and inside index.html .

The structure will be the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
contracts/
-- Migrations.sol
migrations/
node_modules/
test/
src/
-- css/index.css
-- js/index.js
dist/
-- index.html
package.json
truffle-config.js
truffle.js
webpack.config.js

Now go to your index.html and write this code by hand:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
   <title>Casino Ethereum Dapp</title>
</head>
<body>
   <div id="root"></div>
   <script src="build.js"></script>
</body>
</html>

The main things about this code is that I’ve added the Open sans font to have better looking text, the <div id="root"></div> where the react code will be inserted and the <script src="build.js"></script> to include the build file generated by webpack.

Create the file contracts/Casino.sol , this is the main Solidity contract that we’ll be coding in the next section. After preparing all this we can start to create the app at last!

This post is licensed under CC BY 4.0 by the author.