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:
Click the link, and you will see the following page:
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.
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.
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:
- Name of the project. That will also be the slug for the temporary .dev link from Cloudflare.
- The description is self-explanatory. If ‘master’ is selected, any pushes to the master branch will trigger the auto-deployment.
- Once you select the application framework (e.g., React), it will prefill recommended settings to all remaining text fields.
- Here, enter the building command (e.g., “npm run build”). You may want to play with this if you get errors while deploying.
- The build output directory should be ‘build’ unless you have a different one set (built assets and HTML files).
- 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.
However, if the building process fails, you can check the ‘Build Log’ for errors and find out what is causing the issue(s).
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:
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:
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.
If you need technical assistance around this topic, please get in touch directly through our telegram group.