Learn how to Use Firebase as a Proxy API for Web3 – Moralis Web3

Do you know you may simply use Firebase as a proxy API for Web3 when working with Moralis? If this sounds attention-grabbing, observe alongside as we display the best way to create Firebase cloud features as proxy APIs to your Moralis Web3 API calls. Utilizing proxy APIs on this approach means that you can maintain your API keys securely on Firebase backend servers. Consequently, all of your app’s non-public keys stay unsusceptible to assaults in your client-side utility. Moreover, it means that you can course of API calls on the backend and solely return the knowledge that your customers request! 

As an example the API performance and the best way to use a Firebase cloud operate as a proxy API for Web3, we are going to create a easy React dapp the place customers can question USD costs of tokens primarily based on their contract addresses. In flip, you’ll discover ways to use Moralis’ “getTokenPrice” endpoint to create a Firebase cloud operate that fetches the on-chain information from the Ethereum community. So, if this pursuits you, observe alongside as we present you the best way to simply use Firebase as a proxy API for Web3! 

Furthermore, in case you have additional curiosity in Moralis’ Web3 APIs, you may, for instance, try the NFT API. This instrument means that you can construct NFT-related tasks effectively and successfully. If NFT growth excites you, we suggest trying out this text on the best way to construct a Solana NFT explorer! 

However, be a part of Moralis to unlock the facility of blockchain to construct smarter with APIs bridging the Web2 and Web3 hole. Creating an account is free and solely takes a number of seconds, so you don’t have anything to lose! 

What’s Firebase? 

Firebase is an utility growth platform enabling you to construct, develop, enhance and keep video games and apps your customers will love. The platform is backed by and constructed on Google’s infrastructure, and hundreds of thousands of companies make the most of Firebase worldwide.

Firebase gives instruments and options that cowl a good portion of the providers builders usually must construct themselves. These instruments and options embody databases, configurations, authentication, analytics, file storage, push messaging, and many others. Moreover, these providers are hosted within the cloud, and Firebase gives nice scaling alternatives with nearly no effort from builders. As such, with the platform, it’s doable to keep away from ”reinventing the wheel”, so to talk, and give attention to making a extra compelling dapp expertise. 

So, what precisely does it imply that the providers are ”hosted within the cloud?”. On this context, it means that Firebase’s merchandise have backend elements totally operated and maintained by Google. Furthermore, client-side SDKs provided by Firebase work together with these backend providers, and you do not want to arrange any middleware between your tasks and the providers.

To summarize, Firebase makes dapp and sport growth extra accessible by offering an intensive toolkit and varied providers, facilitating a extra seamless developer expertise. Consequently, when utilizing Firebase, it’s doable to keep away from redundant duties, and you’ll give attention to creating increased worth to your clients. 

With a greater understanding of Firebase, we are going to take the previous sections to delve deeper into the method of utilizing Firebase as a proxy API for Web3! 

Utilizing Firebase as a Proxy API for Web3

With a extra profound understanding of Firebase, it’s time for the central a part of the tutorial, the place we are going to illustrate the best way to create Firebase cloud features as proxy APIs to your Moralis Web3 API calls. 

Utilizing Firebase as a proxy API for Web3 means that you can securely retailer your Moralis API key on Firebase’s backend servers, all whereas offering the chance to course of all of your Web3 API responses on the backend. In flip, you achieve the chance to easily move the mandatory information queried by the customers to your app’s consumer aspect. 

To display the best way to use Firebase to arrange a proxy API for Web3, this tutorial will cowl the mandatory steps in constructing a React dapp that permits customers to question the present token value in US {dollars} primarily based on a contract tackle. Furthermore, that is what the UI (consumer interface) of the dapp appears like: 

On this instance, we make the most of Moralis’ ”getTokenPrice” endpoint to create a cloud operate that simply fetches the wanted on-chain information instantly from the Ethereum community. That mentioned, Moralis options an abundance of various endpoints for NFTs, blocks, transactions, balances, and many others. Consequently, it doesn’t restrict you to solely querying a token value primarily based on an tackle. If you happen to observe alongside, you’ll study that you need to use the identical elementary rules of this information for different endpoints. 

Moreover, due to Moralis, it is possible for you to to create this proxy API for Web3 very quickly! Furthermore, should you as an alternative want to watch a video outlining the entire course of, try the clip under from Moralis’ YouTube channel:

Nevertheless, earlier than displaying you the best way to arrange a proxy API for Web3, it’s essential to deal with a number of conditions, which we are going to cowl within the following part! 

Conditions – Setting Up Moralis and Firebase

Earlier than leaping into the central components of this tutorial, it’s essential to arrange accounts for Moralis and Firebase, together with a Firebase mission. As such, we are going to rapidly cowl these conditions, beginning with establishing your individual Moralis account! 

Making a Moralis account is straightforward, and to get began, click on on the ”Begin for Free” button on the high proper of Moralis’ web site: 

From there, it’s essential to enter an e-mail tackle, create a brand new password, verify the ”I settle for…” button, and hit ”Signal Up”. What’s extra, it is best to know that making a Moralis account is totally free! 

With a Moralis account at your disposal, it’s essential to join with Firebase and create a brand new account. As such, progress by navigating Firebase’s web site and clicking on the ”Get began” button: 

This lets you sign up utilizing an already current Google account or create one from scratch. As soon as signed in, you moreover must create a brand new mission by urgent ”Create a mission”:

From there, observe Firebase’s directions and choose choices relying in your growth wants. Nevertheless, when you create the mission, you’ll want to change the billing plan from ”Spark” to ”Blaze”, which is required to make sure that the cloud features will work as meant. However, to take action, click on on ”Improve” on the backside left and choose ”Blaze”:

It is a ”pay-as-you-go” plan; nonetheless, Google will solely begin charging when you attain an intensive variety of requests. So, for this tutorial, testing the applying will most certainly be free.

Nonetheless, this covers the mandatory conditions. It’s time to present you the best way to use Firebase as a proxy API for Web3!

Cloning the React Dapp – Create a Proxy API for Web3

With the conditions finalized, the primary a part of this ”Firebase as a Proxy API for Web3” tutorial revolves round cloning the React app repository to your native listing. So, it’s essential to first open an IDE (built-in growth setting) and create a brand new folder. We are going to use VSC (Visible Studio Code) and title the folder ”FIREBASEMORALIS”.

From there, go forward and fetch the repository URL from GitHub. You can see the hyperlink to the repo under: 

Proxy API for Web3 Documentation – https://github.com/IAmJaysWay/FirebaseProxyFrontend/tree/essential 

When you open the GitHub repository, you may fetch the repo URL by clicking on the inexperienced ”Code” button and copying the repository URL: 

Subsequent up, navigate again to your IDE and open a brand new terminal. If you’re utilizing VSC, click on on ”Terminal” on the high, adopted by ”New Terminal”:

From there, enter the command under utilizing the repository URL and hit enter. Furthermore, ensure you are within the location of the folder that you simply beforehand created: 

git clone “REPOSITORY_URL”

When you hit enter, it ought to autonomously clone the mission to your native listing, and it is best to discover the ”frontend” folder in your IDE. That’s basically it! It’s best to now have the whole code for the React utility, which we are going to use to showcase the API performance! Furthermore, the next part will present you the best way to initialize Firebase and create a cloud operate.

Initializing Firebase and Creating the Cloud Operate to Create a Proxy API for Web3

This part will present you the best way to initialize Firebase. To take action, enter the next command into the terminal in VSC: 

For Mac:

sudo npm i -g firebase-tools

For Home windows:

npm i -g firebase-tools

When you run the command, it’ll immediate you for a password. As quickly as you enter the password, it’ll initialize Firebase. Then, as soon as all of the installations finalize, you may go forward and log in to Firebase with the next command: 

firebase login

If you’re not logged in, this command will robotically open your internet browser, permitting you to sign up. As soon as logged in, it’s time to initialize the mission you arrange when protecting the conditions. As such, enter this command into the terminal: 

firebase init

Once you run the command above, you’ll discover that it’s essential to make a number of choices. First up, you’ll want to select Firebase performance, and you’ll choose ”Capabilities: …” as the choice by navigating together with your arrow keys, hitting house, and at last hitting enter: 

Subsequent, you’ll want to select an current mission, permitting you to decide on the mission you created when establishing Firebase throughout the ”Prerequisite” stage:

You may then set the language to JavaScript: 

Following this, you wouldn’t have to permit ”ESLint” and might select to put in the mandatory dependencies instantly: 

This could initialize all the pieces in your IDE, and it is best to now have the ”features folder” obtainable in VSC: 

You may navigate to this file by inputting the next command into the terminal: 

cd features

From there, set up Moralis by inputting this command: 

npm i moralis

Subsequent, open the ”features/index.js” file and substitute all of the code with the next contents: 

const features = require("firebase-functions");
const Moralis = require("moralis").default;
const { EvmChain } = require("@moralisweb3/evm-utils");

exports.getPrice = features.https.onRequest(async (req, res) => {
    
    await Moralis.begin(
        {
            apiKey: "Moralis API KEY"
        }
    );

    
    const tackle = req.question.tackle;


    const response = await Moralis.EvmApi.token.getTokenPrice({
        tackle: tackle,
        chain: EvmChain.ETHEREUM
    });

    const usd = response.uncooked.usdPrice;

    res.json({usd});

});

All that is still now could be changing ”Moralis API KEY” on the ninth line together with your API key. You may fetch the important thing by logging into Moralis, clicking on ”Account”, deciding on the ”Keys” tab, and copying the Web3 API key:

Deploying the Cloud Operate

Now that you’ve finalized the cloud operate, it’s time to deploy the Firebase operate. You are able to do so by inputting the next command into the terminal:

firebase deploy --only features

This could begin deploying your operate onto the Firebase mission you created earlier. It’d take a while; nonetheless, fear not; the operate will deploy momentarily. As soon as the deployment course of finalizes, it is best to be capable of discover the features on the Firebase platform: 

That’s it for deploying the operate! Nevertheless, you may additionally wish to be certain that all the pieces works as meant. As such, navigate again to your IDE and bounce into the ”frontend” folder utilizing these instructions: 

cd..

cd frontend

Subsequent up, set up all essential dependencies by inputting the next into the terminal: 

npm i 

Lastly, begin the applying with this enter: 

npm run begin

This could launch the applying, permitting you to enter an Ethereum token tackle and obtain a USD value in return! 

Now that’s it for this tutorial! If you happen to skilled bother throughout the information, please take a more in-depth have a look at the video from earlier than or be a part of Moralis’ Discord channel, the place our group engineers will be capable of assist with most of your considerations! 

Abstract – Utilizing Firebase as a Proxy API for Web3

This text illustrated the best way to use Firebase as a proxy API for Web3. In doing so, we rapidly created a React dapp the place customers might enter a token tackle and question the worth. This dapp makes use of a Firebase cloud operate as a proxy API for all of the Moralis Web3 API calls. By this course of, it’s doable to retailer your non-public Web3 API key securely on a Firebase server. Because of this, it’s much less prone to assaults on the consumer aspect. 

If you happen to discovered this text useful, try extra Moralis content material on the Web3 weblog. For instance, try our information on Moralis’ BNB Chain boilerplate. That boilerplate means that you can construct BNB Chain dapps very quickly! Furthermore, in case you are focused on creating dapps for different networks, try our information outlining the method of constructing dapps basically: ”Learn how to Construct a Web3 App”. 

So, if you wish to use Firebase as a proxy API for Web3 or discover the quickest strategy to construct a Web3 app, join with Moralis proper now! Creating an account is free and solely takes a few seconds!