Mastering Web3 with Waves Module #1

Published in

Mastering Web3 with Waves

8 min readJul 5, 2019

Module #1 Preparation: Required Tools and Tutorials

1.1 How to: simple Node.JS application. Localhost;
1.2 How to: simple React.JS application;
1.3 How to: Git, GitHub, and Heroku;
1.4 How to: Waves Keeper;
1.5 The First Challenge (a boilerplate project)

In this lesson we’ll learn how to start a simple web (html) application using NodeJS package — express.js.
We’ll use Sublime code editor.

1.1 How to: simple Node.JS application. Localhost

Step 0: create a new folder — mweb3waves, open sublime editor in this folder.

Step 1: create a new HTML file — index.html in mweb3waves folder.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Mastering Web3 with Waves boilerplte</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <h1 class="display-3 text-center text-info">Hello Waves!</h1>
  </body>
</html>

Step 2: install node js software as is described in this website

Step 3: open terminal/command line tool and check the version of installed node.js and its package management tool npm

Step 4: create a package.json file. This file contains all node.js packages which will be used in our application.

{
    "name": "mweb3-demo-waves",
    "version": "0.1.0",
    "dependencies": {
        "express": "^4.16.4"
    }
}

Step 5: let’s install this express.js package! Open terminal and run “npm install” in mweb3waves folder

As you can see the new folder — node_modules contains the source code of all our dependedependenciesges and modules).

Step 6: so, we’re ready to create our first simple server “one-page” application. Create server.js file. Our server has only one functionality — to send the index.html file to the browser when the user has opened the website page.

const express = require('express');const app = express();app.get('/', (req, res) => {
	res.sendFile('index.html', { root : __dirname});
});let port = process.env.PORT || 5000;
app.listen(port, () => {
	console.log(__dirname);
	console.log("Listening Port " + port);
});

Step 7: let’s run our server node.js application with command “node server.js”

We can open it now in the browser with http://localhost:5000/ url.

1.2URLw to: simple React.JS application

Our single page application is cool, but, at the same time, it’s a bit worthless. Let’s add some user interaction logic here!

While JavaScript — is a language used to turn “static HTML” pages to dynamic pages with diverse application cases and interactive UI-components (User Interface). ReactJS is a very powerfull Java Script framework for building of rich interactive single page web applications (SPA).

In the previous lesson of this “preparation” module we’ve considered: how our server application could be assembled from packages using “npm” package manager and package config file — “package.json”. Similar logic works also with client-side (browser) Java Script code.

Step 0: let’s create the initial structure. Create files: { webpack.config.js, .babelrc, main.js, app.js } and folders: { src, components }

Step 1: To build UI components right we should add some new packages to the “package.json” and run “npm install”…

{
    "name": "mweb3-demo-waves",
    "version": "0.1.0",
    "scripts": {
        "build": "webpack",
        "watch": "webpack --watch"
    },
    "dependencies": {
        "@babel/preset-env": "^7.1.0",
        "@babel/preset-react": "^7.0.0",
        "babel": "^6.23.0",
        "babel-core": "^6.26.3",
        "react": "^16.5.2",
        "react-dom": "^16.5.2",
        "express": "^4.16.4"
    },
    "devDependencies": {
        "@babel/core": "^7.1.2",
        "@babel/runtime-corejs2": "^7.0.0",
        "babel-loader": "^8.0.4",
        "babel-preset-es2015": "^6.24.1",
        "cross-env": "^5.2.0",
        "webpack": "^4.17.2",
        "webpack-cli": "^3.1.0"
    }
}

Step 2: Let’s create a UI component and components assembly logic.

webpack.config.js

module.exports = {
	entry: [
		'./src/main.js'
	],
	output: {
		filename: 'build.js'
	},
	module: {
		rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }
		]
	}
};

.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Step 3: Let’s add some logic to the application.

app.js

import ReactDOM from "react-dom";
import React from 'react';class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    render() {
        return (
            <div className="container">
    		    <input className="btn btn-primary" type="submit" value="Alert" onClick={() => {alert("Alert button onClick");}}/>
    	    </div>
        )
    }
}const app = document.getElementById('app');
if(app){
    ReactDOM.render(<App/>, app);
}

main.js

import './components/app';

Step 4: Let’s build javascript modules together by command — “npm run build”.

We can see a new auto-generated folder “dist” and new file “build.js” — the result of code assembly.

Step 5: Now, we should integrate assembled build.js logic into main HTML-page.

Step 6: Run server and open http://localhost:5000/, click the button. Enjoy!

Our first ReactJS+NodeJS web application is ready!

1.3 How to: Git, GitHub, and Heroku

In this lesson, we’ll practice the “must have” tool for developers — Git.

Git is a distributed version control system for tracking changes in source code during software development. It is designed for coordinating work among programmers, but it can be used to track changes in any set of files.

Let’s create a repository for our boilerplate web app! We’ll use GitHub — most popular online service for Git repositories.

Step 0: Install git and check git version

Step 1: Create a repo on GitHub

Step 2: Rename folder and clone this repo

mv mweb3waves/ mweb3waves_/git clone https://github.com/AlekseiPupyshev/mweb3waves.git

and move project files/folders into this repo root.

mv mweb3waves_/dist/ mweb3waves/dist/;
mv mweb3waves_/node_modules/ mweb3waves/node_modules/;
mv mweb3waves_/src/ mweb3waves/src/;
mv mweb3waves_/index.html mweb3waves/index.html; 
mv mweb3waves_/package.json mweb3waves/package.json;
mv mweb3waves_/package-lock.json mweb3waves/package-lock.json;
mv mweb3waves_/server.js mweb3waves/server.js;
mv mweb3waves_/webpack.config.js mweb3waves/webpack.config.js;
mv mweb3waves_/.babelrc mweb3waves/.babelrc;

(! — this approach isn’t the best practice of .git usage with remote origins. Mastering with git or other tools is a bit out of the scope of our mastering Web3 online course. However, please be free to use best practices for your personal projects or code-challenges.)

Step 3: Create a .gitignore file in the root of the repo folder

package-lock.json
node_modules/

Step 4: Add files to git diff tracker and push commit to the remote GitHub server

git add -A;
git commit -m 'add project files';
git push origin master;

The GitHub repo is ready!

How to Heroku

Localhost is nice, but to be able to share your web applications with new users or friends we have to deploy it somewhere in the cloud.

Heroku — is a container-based cloud Platform as a Service (PaaS). Developers use Heroku to deploy, manage, and scale modern apps. It’s free for up to 5 simple projects. Let’s use it!

Step 1: Register and open dashboards create a new project. Select “import from GitHub”.

Step 2: Click deploy from the master branch. Click on “View”.

Done!

1.4 How to: Waves Keeper

The final lesson of this preparation module is “How to integrate Waves Keeper?”.

Keeper is a browser extension which allows users to manage their accounts (keys) and interact securely and seamlessly with Waves-enabled web services and dApps.

Step 0: Install Waves Keeper and create or import an account

Follow the instruction here.

Step 1: Add code changes to the app.js file. We’ll call Waves Keeper for Auth when user press the auth buttonthe .

import ReactDOM from "react-dom";
import React from 'react';class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
        this.authFunc = this.authFunc.bind(this);
    }
    authFunc() {
        const authData = { data: "Auth on my site" };
        if (WavesKeeper) {
            WavesKeeper.auth( authData )
            .then(auth => {
                console.log( auth ); //displaying the result on the console
                /*...processing data */
            }).catch(error => {
                console.error( error ); // displaying the result on the console
                /*...processing errors */
            })
        } else {
            alert("To Auth WavesKeeper should be installed.");
        }
    }
    render() {
        return (
            <div className="container">
    		    <input className="btn btn-primary" type="submit" value="Auth" onClick={this.authFunc}/>
    	    </div>
        )
    }
}const app = document.getElementById('app');
if(app){
    ReactDOM.render(<App/>, app);
}

Then rebuild the client side javascript code:

npm run build

Let’s run and open it on http://localhost:5000/. Open “Development Tools: Console” and you can see returned object from Keeper.

node server.js

Step 2: Add changes to the git tracker, commit and push changes to the remote GitHub repo. Open Heroku and click “Deploy” from master branch again. Open web application.

git add -A;
git commit -m 'Waves Keeper Auth integrated';
git push origin master;

Step 3: Add heroku domain to the trusted resources in Keeper privacy settings to prevent “rejected”-errors

Done!

Congratulations!

This is your first online challenge on this course:

“According to previous lessons please create a “boilerplate” web application, push it on the github, deploy it on heroku and share links to github repo, heroku.
Submit the printed results from browser’s console.
Good luck!”