eosio / eosio-web-ide

eosio-web-ide

EOSIO Quickstart Web IDE for decentralized applications

EOSIO Quickstart Web IDE lets developers start building full-stack EOSIO applications in a matter of minutes.

Powered by Gitpod.io and Docker, it provides developers with a personal single-node EOSIO blockchain for development and testing purposes without a need of going through advanced local environment setup. It also includes an example application with a smart contract and web frontend, connected to the blockchain. Developers can also use EOSIO tools like cleos and eosio.cdt straight out of the box. This project requires zero installation on the user's machine. All code is stored and managed on the developer's personal GitHub account, with the changes saved automatically.

We built this project with ease of use and simplicity in mind. It can be used by new developers trying out or learning EOSIO, as well as advanced developers and teams. It is especially useful in the environments where users don't have full control over the systems they work on (universities, banks, government organizations, etc.) or when they have lower-than-required computer specs to run EOSIO locally.

We hope you will find this project useful and welcome feedback on future improvements.

Setup

1. Fork this repo to your personal GitHub account so that you can save your work into your personal Github account.

2. Point your browser to the following URL https://gitpod.io/#https://github.com/your-github-account/eosio-web-ide to start the IDE. You will be automatically prompted to create a Gitpod account (all types of Gitpod accounts (including free) will work). You can also choose to provide multiple developers push access to your personal github fork of this repo to collaborate with them (one developer working on the smart contract (C++) while the other working on the front-end decentralized application (EOSJS), etc.). Each such developer sharing access to the forked repo will get their own copy of the EOSIO blockchain components to enable independent development.

You can test drive the system by accessing the IDE at https://gitpod.io/#https://github.com/EOSIO/eosio-web-ide (however you will not be able to save your work into the EOSIO/eosio-web-ide Github repository)

Instructions

The following instructions assume that the Web IDE was started successfully (see Setup).

Opening a terminal

To open a terminal, use the Terminal drop-down menu in the IDE user interface.

Building sample contract

The source code for the sample smartcontract is at contract/talk.cpp within the IDE. To compile the contract, run this in a terminal:

eosio-cpp contract/talk.cpp

This will produce talk.abi and talk.wasm.

Installing the contract

Run this in a terminal:

cleos create account eosio talk EOS6MRyAjQq8ud7hVNYcfnVPJqcVpscN5So8BhtHuGYqET5GDW5CV
cleos set code talk talk.wasm
cleos set abi talk talk.abi

Creating users and using the contract

Run this in a terminal:

cleos create account eosio bob EOS6MRyAjQq8ud7hVNYcfnVPJqcVpscN5So8BhtHuGYqET5GDW5CV
cleos create account eosio jane EOS6MRyAjQq8ud7hVNYcfnVPJqcVpscN5So8BhtHuGYqET5GDW5CV
cleos push action talk post '[1000, 0, bob, "This is a new post"]' -p bob
cleos push action talk post '[2000, 0, jane, "This is my first post"]' -p jane
cleos push action talk post '[1001, 2000, bob, "Replying to your post"]' -p bob

Listing the messages

Run this in a terminal:

cleos get table talk '' message

Viewing the front-end decentralized web app (EOSJS):

The source code for the React WebApp is at webapp/src/index.tsx within the IDE. To preview the WebApp run this in a terminal:

gp preview $(gp url 8000)

Building and running the unit test

The source code for the unit test is at the tests directory within the IDE. To build the tests, run this in the terminal:

./build-tests

This will produce the tester binary, which can be run from the terminal to start the actual unit test:

./tester

The unit test creates the talk_tests test suite and verifies that the following statements are executed without error:

1. Create user account talk.
2. Load the talk smart contract in the talk account sandbox.
3. Create user accounts john and jane.
4. Test the post action by performing the following:
   1. Push the post action from talk to john with message "post 1" identified as 1 and addressed to message 0 (sent by noone).
      This posts the message 1 from john to noone in the chat.
   2. Push the post action from talk to jane with message "post 2" identified as 2 and addressed to message 0 (sent by noone).
      This posts the message 2 from jane to noone in the chat.
   3. Push the post action from talk to john with message "post 3: reply" identified as 3 and addressed to message 2 (sent by jane).
      This posts the reply message 3 from john to jane in the chat.
5. Test failure of the post action if message is addressed to a non-existant message id.

Resetting the chain

To remove the existing chain and create another:

• Switch to the terminal running nodeos
• Press ctrl+c to stop it
• Run the following

rm -rf ~/eosio/chain
nodeos --config-dir ~/eosio/chain/config --data-dir ~/eosio/chain/data -e -p eosio --plugin eosio::chain_api_plugin --contracts-console

Note: if the web app is currently open, then it will cause errors like the following. You may ignore them:

FC Exception encountered while processing chain.get_table_rows

Contributing

Contributing Guide

Code of Conduct

License

MIT

Important

See LICENSE for copyright and license terms.

All repositories and other materials are provided subject to the terms of this IMPORTANT notice and you must familiarize yourself with its terms. The notice contains important information, limitations and restrictions relating to our software, publications, trademarks, third-party resources, and forward-looking statements. By accessing any of our repositories and other materials, you accept and agree to the terms of the notice.

eosio-web-ide's Issues

Docker image v0.1.1 bloated

The size of the eosio/eosio-web-ide image has jumped from 828.68 MB to 1012.95 MB from version v0.1.0 to v0.1.1
The main culprit appears to be this command

tar -xjf boost_1_72_0.tar.bz2  && cd boost_1_72_0  && ... && rm -rf boost_1_72_0.tar.bz2 boost_1_71_0

You are rming boost_1_71_0 instead of boost_1_72_0.

Also the eos install step has doubled in size, but that may just be the difference between eos 1.8.2 and 2.0.0

gitpod Error

If you go to https://gitpod.io/#https://github.com/EOSIO/eosio-web-ide or other account link you will get:

Sorry, something went wrong 😓
Error: Request createWorkspace failed with message: 5 NOT_FOUND: cannot resolve base image: not found.

Testing tracking ci.

Womp womp

Should we including this fix too , making query plan read call ? Its just a small change and possibly no impact , but I am little hesitant touching anything out of current issue context

Should we including this fix too , making query plan read call ? Its just a small change and possibly no impact , but I am little hesitant touching anything out of current issue context

Originally posted by @simplynaveen20 in Azure/azure-cosmosdb-java#360 (comment)

Compiler warnings when building talk.wasm

The following IDE warnings are received in the GitPod "Problems" window when building talk.wasm/.abi (screenshot since I couldn't get gitpod to copy/paste the output of the Problems tab):

These warnings should be cleaned up since this is a demo.

I also see this output in the Terminal window:

gitpod /workspace/eosio-web-ide $ eosio-cpp contract/talk.cpp
Warning, empty ricardian clause file
Warning, empty ricardian clause file
Warning, action <post> does not have a ricardian contract

Hey,

Hey,
Could you add Zcash shielded tx count ?

Originally posted by @jorisd in Blockchair/Blockchair.Support#497

how to switch the eosio.cdt version

There is no tab on version switching in user page, and where is it

Gitpod webpage unresponsive when trying to close the "Preview" pane

System config
OS: macOS 10.15.5
Browser: Chrome 86.0.4240.183 (not using Gitpod extension)

Steps to trigger the problem:

1. Follow each step in the "Instructions" section of README.md. After running gp preview $(gp url 8000), the Preview pane is opened and display the frontend webpage.

2. Try to close this panel by clicking "Close" on the context menu.

3. The webpage for Gitpod becomes unresponsive. I need to close this weppage and restart the Gitpod workspace to make it work again.

Other notes

• I'm new to Gitpod and eosio-web-ide. So I'm not sure if this problem is caused by Gitpod itself or some config here.
• If other user gets the same problem, one workaround is to use external browser for the frontend webpage (in "Open Ports" tab -> "8000", select "Open Browser").

Instructions on how to use with Docker

I don't want to use gitpod. I've invested considerable time and effort to tailor my local VS Code development experience according to my preferences. I run Windows 10 Pro and have Docker installed, how can I use this tool to deploy eosio within Docker?

I

Remove warnings when starting eosio-web-ide

I get the following warnings in the first GitPod workspace window when starting eosio-web-ide project. @tbfleming mentioned that this is due to a lack of debugging symbols and source maps may cure the issue.

WARNING in ./node_modules/eosjs/dist/eosjs-api-interfaces.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find source file '../src/eosjs-api-interfaces.ts': Error: Can't resolve '../src/eosjs-api-interfaces.ts' in '/workspace/eosio-web-ide/webapp/node_modules/eosjs/dist'
 @ ./node_modules/eosjs/dist/index.js 5:20-53
 @ ./src/index.tsx

WARNING in ./node_modules/eosjs/dist/eosjs-api.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find source file '../src/eosjs-api.ts': Error: Can't resolve '../src/eosjs-api.ts' in '/workspace/eosio-web-ide/webapp/node_modules/eosjs/dist'
 @ ./node_modules/eosjs/dist/index.js 3:18-40
 @ ./src/index.tsx

WARNING in ./node_modules/eosjs/dist/eosjs-jsonrpc.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find source file '../src/eosjs-jsonrpc.ts': Error: Can't resolve '../src/eosjs-jsonrpc.ts' in '/workspace/eosio-web-ide/webapp/node_modules/eosjs/dist'
 @ ./node_modules/eosjs/dist/index.js 7:22-48
 @ ./src/index.tsx

WARNING in ./node_modules/eosjs/dist/eosjs-jssig.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find source file '../src/eosjs-jssig.ts': Error: Can't resolve '../src/eosjs-jssig.ts' in '/workspace/eosio-web-ide/webapp/node_modules/eosjs/dist'
 @ ./src/index.tsx 8:22-55

WARNING in ./node_modules/eosjs/dist/eosjs-numeric.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find source file '../src/eosjs-numeric.ts': Error: Can't resolve '../src/eosjs-numeric.ts' in '/workspace/eosio-web-ide/webapp/node_modules/eosjs/dist'
 @ ./node_modules/eosjs/dist/eosjs-jssig.js 53:22-48
 @ ./src/index.tsx

WARNING in ./node_modules/eosjs/dist/eosjs-rpc-interfaces.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find source file '../src/eosjs-rpc-interfaces.ts': Error: Can't resolve '../src/eosjs-rpc-interfaces.ts' in '/workspace/eosio-web-ide/webapp/node_modules/eosjs/dist'
 @ ./node_modules/eosjs/dist/index.js 11:20-53
 @ ./src/index.tsx

WARNING in ./node_modules/eosjs/dist/eosjs-rpcerror.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find source file '../src/eosjs-rpcerror.ts': Error: Can't resolve '../src/eosjs-rpcerror.ts' in '/workspace/eosio-web-ide/webapp/node_modules/eosjs/dist'
 @ ./node_modules/eosjs/dist/index.js 13:23-50
 @ ./src/index.tsx

WARNING in ./node_modules/eosjs/dist/eosjs-serialize.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find source file '../src/eosjs-serialize.ts': Error: Can't resolve '../src/eosjs-serialize.ts' in '/workspace/eosio-web-ide/webapp/node_modules/eosjs/dist'
 @ ./node_modules/eosjs/dist/index.js 15:16-44
 @ ./src/index.tsx

WARNING in ./node_modules/eosjs/dist/index.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find source file '../src/index.ts': Error: Can't resolve '../src/index.ts' in '/workspace/eosio-web-ide/webapp/node_modules/eosjs/dist'
 @ ./src/index.tsx 7:16-32
ℹ ｢wdm｣: Compiled with warnings.

Not working with updated GitPod

GItPod has made big updates "recently". For example they switched from Theia to vscode. There are likely some changes that need to be made to accommodate those changes.

The example is no longer working. I get this error when starting it:

 HISTFILE=/workspace/.gitpod/cmd-1 history -r; {
cleos wallet unlock --password </password
} && {
nodeos --config-dir ~/eosio/chain/config --data-dir ~/eosio/chain/data -e -p eosio --plugin eosio::chain_api_plugin --contracts-console
}
 {tpod /workspace/eosio-web-ide $  HISTFILE=/workspace/.gitpod/cmd-1 history -r; 
> cleos wallet unlock --password </password
> } && {
osio --plugin eosio::chain_api_plugin --contracts-consoleosio/chain/data -e -p eo
> }
"/usr/bin/keosd" launched
password: Error 3110002: Missing Wallet API Plugin
Ensure that you have eosio::wallet_api_plugin added to your node's configuration!
Otherwise specify your wallet location with --wallet-url argument!
Error Details:
Wallet is not available
gitpod /workspace/eosio-web-ide $ 

version control of eosio tools

Is there a way to specify the version of eosio tools? At least can we specify the latest version of tools?