Tech

How to Build a Standalone dApp Infrastructure to Couple with the Elrond Blockchain - Part 2

Steve Talbot on 18th September, 2021

Find out how to Build a Standalone dApp Infrastructure to Couple with the Elrond Blockchain - Part 2

Quick navigation

  1. Setting Up a Serverless Connection for Your dApps
  2. The Benefits of Using a Serverless Connection
  3. Cloudflare Pages Setup
  4. Setting Up a Custom Domain

Setting Up a Serverless Connection for Your dApps

This article will cover how to set up a front-end serverless connection using the dynamic pages feature of Cloudflare to provide faster and on-time deployments directly pulled from your GitHub account(s).

The Benefits of Using a Serverless Connection

As you may already know, setting up a server to manage your front-end application(s) (React, Vue, etc.) can be problematic if you are pretty new in the field. Furthermore, managing the very same project directly from your server while doing updates to your dependencies on both your local machine and the hosting one can take up a lot of time, and you may end up with a conflict due to many different server-related issues.

Making a dynamic, serverless connection will not only help you set up your front-end application in a matter of minutes, but it will also keep all of your changes up-to-date in real-time without the hassle of uploading and deploying all of your files each time you make an update.

To sum up the benefits of a serverless connection:

  • Fast loading speeds
  • Easy integration for all of your frontend applications
  • Real-time deployments
  • DoS/DDoS protection
  • History of all previous updates*

*You can easily view or revert to a previous version if you have any problems/bugs in one of your latest updates.

There are plenty of services available that offer such a functionality (GitHub Pages, Netlify, etc.), but in this article, we will cover the setup using Cloudflare Pages due to its simplicity and, of course, — it is free of charge.

Cloudflare Pages Setup

The first thing you need is a CloudFlare account. You can sign up using the following link: https://dash.cloudflare.com/sign-up.

After you finish the registration, you will be redirected to your dashboard. On the right side of the page, you will see the ‘Pages’ link: Pages image

Click the link, and you will see the following page:

Page Display

The next step is to create a project. You will need to add your GitHub account and give access permission(s) to Cloudflare on the next page.

Github access permission

After granting all required permissions, the ‘Select a repository’ section will show all of your projects (including the private ones). Be very careful while selecting the project here, as you might end up deploying a personal project that you don’t want publicly visible.

Select Repository

After selecting the project, hit the ‘Begin setup’ button.

On this page, you will have to fill out all the information regarding the project and the build settings:

Project build information

  1. Name of the project. That will also be the slug for the temporary .dev link from Cloudflare.
  2. The description is self-explanatory. If ‘master’ is selected, any pushes to the master branch will trigger the auto-deployment.
  3. Once you select the application framework (e.g., React), it will prefill recommended settings to all remaining text fields.
  4. Here, enter the building command (e.g., “npm run build”). You may want to play with this if you get errors while deploying.
  5. The build output directory should be ‘build’ unless you have a different one set (built assets and HTML files).
  6. Here, enter the root directory of the project. That is where Cloudflare is going to run the build command. If your project is not in a subdirectory, you may want to leave this empty.

After completing these sections, click the ‘Save and deploy’ button and wait for the deployment to finish. This process usually takes around 2–3 minutes (but it may take longer depending on the project complexity).

If the build has no problems, you will get a ‘Success’ message.

Success Message

However, if the building process fails, you can check the ‘Build Log’ for errors and find out what is causing the issue(s).

Build Log

Setting Up a Custom Domain

It is possible to complete this process without a custom domain; however, it is best practice to have a custom domain pointed to the recently deployed project to avoid using a randomly generated URL from Cloudflare.

To set up a custom domain, you first have to point the domain to the Cloudflare nameservers. If you are not familiar with this process, please follow this tutorial by Cloudflare:

https://support.cloudflare.com/hc/en-us/articles/201720164-Creating-a-Cloudflare-account-and-adding-a-website

After completing the nameservers setup, you need to click the ‘Pages’ links again and open the latest build of the project. Next, you click on the ‘Custom Domains’ link:

Custom Domains

Once there, write down the previously set-up domain name that you will use for the deployments of your project.

All of the previously deployed versions will have their own “.dev” link that you can use to review and revert any changes if required.

Enjoy! :)

If you need technical assistance around this topic, please get in touch directly through our telegram group.

How to Build a Standalone dApp Infrastructure to Couple with the Elrond Blockchain - Part 1

Steve Talbot
CIO - Editing Director
Share Article
Related
Tech

Here you will find the BH Network marketplace MVP (minimum viable product) tutorial with the answers to the most frequently asked questions

Steve Talbot 19th August, 2021

Tech

Find out how to Build a Standalone dApp Infrastructure to Couple with the Elrond Blockchain - Part 1

Steve Talbot 1st September, 2021

Tech

We are glad to announce that our BHAT token has officially added its first footprint on the Elrond Network blockchain.

Steve Talbot 2nd April, 2022