7.md

Implementing FrontEnd for Web3

We will implement a simple frontend for our Dapp.

In truffle 3 you have more freedom on which system you can use.

You can use any build system such as webpack, or whateer built system you normally use, and truffle on top of that.

You only need to have a truffleJS file. Pretty straightforward as you just need a few files that you get in NPM install.

With the truffle example project that integrates with webpack.

We are going to install with truffle init webpack.

It goes to the app.js folder and pull all necessary JS files.

In the file structure, we have the index.html, which puts everything in the app.js file.

We can also import CSS files with webpack, exactly like with JS files. We will install bootstrap for an example.

When we run development server, it will execute the metacoin example.

We will first start the testrpc, and run the development environment.

Now we need to make sure that we run:

truffle compile

truffle migrate

We run it with npm run dev.

Getting the files

Now we get the contract, test, and migrations folders to this folder to bring in our contracts we created.

Setting everything

let's install bootstrap

npm install --save bootstrap

npm install --save-dev sass-loader

npm install --save-dev postcss-loader

npm install --save-dev file-loader

npm install --save-dev url-loader

We want to add boostrap in appjs the following line:

import "bootstrap/dist/css/bootstrap.css"

And make sure that in the webpack.config.js, you have the following in the rules:

rules: [
      {
       test: /\.css$/,
       use: [ 'style-loader', 'css-loader' ]
      },
      { test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/, use: 'file-loader' },
      { test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000' }
    ],