Skip to main content

Hello NEAR ๐Ÿ‘‹

Hi! Let us guide you in starting and interacting with your first decentralized app (dApp) in NEAR: Hello NEAR.

Hello NEAR is a friendly dApp composed by two main components:

  1. A smart contract that stores and retrieves a greeting message
  2. A simple web-based frontend that displays the greeting and enables to change it.

Try Hello NEAR in Your Browserโ€‹

A new browser window will open automatically with the code, give it a minute and the frontend will pop-up (make sure the pop-up window is not blocked).

๐ŸŒ JavaScript๐Ÿฆ€ Rust๐Ÿš€ AssemblyScript
Open in GitpodOpen in GitpodOpen in Gitpod

Try Hello NEAR Locallyโ€‹

If you already have node installed, simply run:

  npx create-near-app@latest

Use the interactive menu to set up your first project folder.

Once the folder is ready, check the README! It will show you how to build your contract, deploy it, and start the frontend.

Interacting With Hello NEARโ€‹

Once the app starts you will see the screen below. Now go ahead and sign in with your NEAR account. If you don't have one, you will be able to create one in the moment.

img Frontend of Hello NEAR

Once logged in, change the greeting and see how our Hello NEAR app greets you!

Structure of a dAppโ€‹

Now that you understand what the dApp does, let us take a closer look to its structure:

  1. The frontend code lives in the /frontend folder.
  2. The smart contract code is in the /contract folder.
  3. The compiled smart contract can be found in /out/main.wasm.
  4. The account's name in which the contract was deployed is in /neardev/dev-account.

Contractโ€‹

The contract presents 2 methods: set_greeting and get_greeting. The first one stores a String in the contract's parameter message, while the second one retrieves it. By default, the contract returns the message "Hello".

contract/src/contract.ts
loading...

Frontendโ€‹

The frontend is composed by a single HTML file (frontend/index.html). This file defines the components displayed in the screen.

The website's logic lives in frontend/index.js, which communicates with the contract through frontend/near-interface.js. You will notice in /frontend/index.js the following code:

frontend/index.js
loading...

It indicates our app, when it starts, to check if the user is already logged in and execute either signedInFlow() or signedOutFlow().

Testingโ€‹

When writing smart contracts it is very important to test all methods exhaustively. This project has both unit and integration tests. Before digging in their code, go ahead and execute them using the command npm run test.

Unit testโ€‹

Unit tests check individual functions in the smart contract. They are written in the same language than the smart contract. If your contract is in Rust you will find the tests at the bottom of each .rs file.

contract/src/lib.rs
loading...

Integration testโ€‹

Integration tests can be written in both Javascript and Rust. They work by deploying the contract in a sandbox and executing methods on it. In this way, integration tests simulate interactions from users in a realistic scenario. You will find the integration tests for hello-near in integration-tests/.

integration-tests/src/main.ava.ts
loading...

Moving Forwardโ€‹

That's it for our first quickstart tutorial. You have now seen a fully functional contract with a minimal user interface and testing. Go ahead and check our examples or proceed straight to the Develop section to know how to write your own contract.

If you have any questions, do not hesitate in joining us on Discord. We regularly host Office Hours, in which you can join our voice channel and ask questions.

Happy coding!