Connect with Vanilla JS

Search…

🍦

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
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <title>Vanilla Boilerplate</title>
5
    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
6
  </head>
7
​
8
  <body>
9
    <h1>Moralis Hello World!</h1>
10
​
11
    <button id="btn-login">Moralis Metamask Login</button>
12
    <button id="btn-logout">Logout</button>
13
​
14
    <script type="text/javascript" src="./main.js"></script>
15
  </body>
16
</html>
Copied!
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/[email protected]<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
1
/* Moralis init code */
2
const serverUrl = "https://xxxxx/server";
3
const appId = "YOUR_APP_ID";
4
Moralis.start({ serverUrl, appId });
5
​
6
/* TODO: Add Moralis Authentication code */
Copied!
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:
Click on Settings below the server name of your server.
Pick the server url and app id from the details page
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
1
/* Moralis init code */
2
const serverUrl = "https://xxxxx/server";
3
const appId = "YOUR_APP_ID";
4
Moralis.start({ serverUrl, appId });
5
​
6
/* Authentication code */
7
async function login() {
8
  let user = Moralis.User.current();
9
  if (!user) {
10
    user = await Moralis.authenticate({
11
      signingMessage: "Log in using Moralis",
12
    })
13
      .then(function (user) {
14
        console.log("logged in user:", user);
15
        console.log(user.get("ethAddress"));
16
      })
17
      .catch(function (error) {
18
        console.log(error);
19
      });
20
  }
21
}
22
​
23
async function logOut() {
24
  await Moralis.User.logOut();
25
  console.log("logged out");
26
}
27
​
28
document.getElementById("btn-login").onclick = login;
29
document.getElementById("btn-logout").onclick = logOut;
Copied!
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.
Serve your page on localhost
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​
Metamask popping up when user clicks Login.
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.
1
npm install moralis
Copied!
Then include it in the JS file as usual.
1
const Moralis = require("moralis");
Copied!
For React Projects: Please follow the Connect with React Guide