Connect the SDK
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.
This guide will show you the process using Vanilla Javascript. Moralis has dedicated boilerplates for React, Angular and other popular frameworks.

Adding Moralis to Your Web Page

Creating 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 web3 and moralis scripts 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://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
6
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>
7
</head>
8
​
9
<body>
10
<h1>Moralis Hello World!</h1>
11
​
12
<button id="btn-login">Moralis Metamask Login</button>
13
<button id="btn-logout">Logout</button>
14
​
15
<script type="text/javascript" src="./main.js"></script>
16
</body>
17
</html>
Copied!

main.js

1
/* TODO: Add Moralis init code */
Copied!

Initialize the SDK

In order to initialize the SDK you need to fetch Server URL and APP ID from your Moralis Dashboard. Go to your Moralis Dashboard and click on View Details next to the server name of your server.
Next you can 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!

Authentication Demo

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({ signingMessage: "Log in using Moralis" })
11
.then(function (user) {
12
console.log("logged in user:", user);
13
console.log(user.get("ethAddress"));
14
})
15
.catch(function (error) {
16
console(error);
17
});
18
}
19
}
20
​
21
async function logOut() {
22
await Moralis.User.logOut();
23
console.log("logged out");
24
}
25
​
26
document.getElementById("btn-login").onclick = login;
27
document.getElementById("btn-logout").onclick = logOut;
Copied!

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

Login with Metamask

Visit the webpage and click Login. Your Metamask will popup and ask you to sign in.
Metamask popping up when user clicks Login.

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 your server and click on Dashboard.
Click on Dashboard in order to see the database of your server.
You will see the database of that server once you click Dashboard. Moralis fetches data from all blockchain 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.
Moralis Database fetches all user data from all chains and updates it in real time in case users move their assets on chain.

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 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, every thing 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!

Browser

Then include it as usual.
1
const Moralis = require('moralis');
Copied!

NodeJs

For server-side applications or NodeJs command-line tools, include:
1
// In a node environment
2
const Moralis = require('moralis/node');
Copied!

​

​

Last modified 1mo ago