How to Connect to Ethereum with Web3.js From JavaScript

In this video, we'll write our first Solidity smart contract

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

In the last video, we built a simple counter contract in Solidity, we deployed it to the blockchain, and called methods on it to update the state.

There's a lot more we have to learn about Solidity and smart contract programming, but I want to show how to make a connection all the way to our web browser. That is, I want to make a user interface for this contract.

I think it's helpful to see how an ethereum-based app is done end-to-end and then we'll go back and learn how to make more sophisticated apps.

To build a UI for our Ethereum app, the key idea is this: our Ethereum node has a JSON API and we will connect our browser to that API.

So the core architecture is that we have an HTML file, which loads JavaScript. And this JavaScript, instead of calling out to a say, "normal", "centralized" server, we'll call to our personally controlled Ethereum node instead.

Previous LessonHow to Call An Ethereum Smart Contract Code From JavascriptNext LessonHow to Interact with Smart Contracts on Ethereum Blockchain

    This lesson preview is part of the Intro to Programming Ethereum ĐApps course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

    This video is available to students only
    Unlock This Course

    Get unlimited access to Intro to Programming Ethereum ĐApps, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

    Thumbnail for the \newline course Intro to Programming Ethereum ĐApps