🍦Connect with Vanilla JS

Once you have your Moralis Server launched it's time to connect to it via the Moralis SDK. This guide will show you how you can do it in just a few easy steps.

Make sure to create your own server before beginning this guide - Create a Moralis Dapp

Check out the live code here: Working Code

Adding Moralis to Your Web Page using Javascript

1. Create an empty page

The first step is to create an empty page we call index.html and main.js in the same directory and import the moralis script alongside our main.js file. We include two buttons on the page - one for logging in and one for logging out.

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Vanilla Boilerplate</title>
    <script src="https://unpkg.com/moralis-v1/dist/moralis.js"></script>
  </head>

  <body>
    <h1>Moralis Hello World!</h1>

    <button id="btn-login">Moralis Metamask Login</button>
    <button id="btn-logout">Logout</button>

    <script type="text/javascript" src="./main.js"></script>
  </body>
</html>

The above example imports the latest version of Moralis. When running your code in production, It's always better to specify a version in this way:

https://unpkg.com/moralis-v1@<VERSION>/dist/moralis.js

For the latest release version, you can check the Releases on GitHub. For example:

<script src="https://unpkg.com/[email protected]/dist/moralis.js"></script>

2. Initialize the SDK

Initialize your server using Moralis.start() function

main.js
/* Moralis init code */
const serverUrl = "https://xxxxx/server";
const appId = "YOUR_APP_ID";
Moralis.start({ serverUrl, appId });

/* TODO: Add Moralis Authentication code */

In order to initialize the SDK, you need to fetch Server (Dapp) URL and APP ID from your Moralis Dashboard. Go to your Moralis Server Details:

3. Add Authentication

Now that the SDK is successfully connected we can use the power of Moralis. Let's login a user and instantly get all their tokens, transactions and NFTs from all chains in your Moralis Database.

main.js
/* Moralis init code */
const serverUrl = "https://xxxxx/server";
const appId = "YOUR_APP_ID";
Moralis.start({ serverUrl, appId });

/* Authentication code */
async function login() {
  let user = Moralis.User.current();
  if (!user) {
    user = await Moralis.authenticate({
      signingMessage: "Log in using Moralis",
    })
      .then(function (user) {
        console.log("logged in user:", user);
        console.log(user.get("ethAddress"));
      })
      .catch(function (error) {
        console.log(error);
      });
  }
}

async function logOut() {
  await Moralis.User.logOut();
  console.log("logged out");
}

document.getElementById("btn-login").onclick = login;
document.getElementById("btn-logout").onclick = logOut;

4. View the page from localhost

Run index.html on localhost as a web page. The easiest way is by using the live server extension Visual Studio Code. Just right click on index.html and select Open with Live Server.

5. Login with Metamask

Visit the webpage and click Login. Your Metamask will popup and ask you to sign in.

To connect other wallets other than MetaMask, check out: Web3 Authentication

6. See all User Assets in the Moralis Database

As soon as the user logs in Moralis fetches all the on-chain data about that user from all chains and puts it into the Moralis Database. To see the Moralis Database go to your server and click on Dashboard.

You will see the database of that server once you click Dashboard. Moralis fetches data from all blockchains where the address of the user has been active and you can see and query all tokens, NFTs and past transactions of the user all in one database.

Working Code

Move Assets

Try moving the assets in your MetaMask Wallet and observe how the Moralis Database will update the records in real-time.

Tip of the iceberg

As you can probably already see Moralis is a true superpower for blockchain developers. But this small demo is just the tip of the iceberg. Moralis provides endless tools and features for any blockchain use case. Most importantly, everything is cross-chain by default.

Feel free to explore the rest of the documentation in order to grasp the full power of Moralis.

Connecting via NPM

Install Moralis NPM Package

For larger projects use the npm module.

npm install moralis-v1

Then include it in the JS file as usual.

const Moralis = require("moralis-v1");

For React Projects: Please follow the Connect with React Guide

Last updated