The web application, together with one or more smart contracts, is the other part that helps to form a DApp. The application files are available inside the app directory, in the Files hierarchy, presented at the left side menu.

The application is structured into three main files: app.html, app.css, and app.js.

The app.html is the HTML file which serves as the base of the application. It contains the base contents and also placeholders that are later processed by Superblocks Lab to include the JavaScript and CSS files.

The CSS file (app.css) determines how the application looks, by defining style preferences and visual details.

The JavaScript file is the core, where the application logic is written to. The JavaScript file has access to the deployed contracts ABI, address, and the target network. As a common practice, it also accesses the Ethereum JavaScript API via Web3.js, usually added in the HTML file.

Navigating through the files and editing them is the same as contracts. Expand the app folder by clicking the arrow next to it, then click any of the listed files to open it in a new editor window.

There are two distinct actions, exposed in the form of two buttons, positioned next to the app folder name: Show Preview and Mosaic View.

Show Preview opens up a new window containing the application rendering view.

The Mosaic View is a pre-determined setting that opens up all three app files together with the preview in a single, 4-way split screen. This set up enables quick live editing since the Show Preview will automatically read saved changes, rendering the content results in real time.

It is possible to disable injecting SuperBlocks Lab Web3 provider by checking the Disable accounts option in the Show Preview window, in which case, simulating the accounts are unavailable.

Did this answer your question?