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 (Explorer button).

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 Ethereum Studio 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 (app.js) 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 four distinct actions, exposed in the form of buttons, positioned next to the app folder name: New File, New Folder, Rename, and Delete.

Related to the DApp, the Preview button, located on the rightmost side of the screen, toggles a new panel containing the application rendering view.

The Preview will automatically read saved changes, rendering updated content results in real time.

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

Did this answer your question?