🍦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.
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
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.
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.
Then include it in the JS file as usual.
For React Projects: Please follow the Connect with React Guide
Last updated