How I run my web app using Render

Cloud service that I use to run my weekend project: haiku.pro.

Image by Bethany Drouin from Pixabay

I am not affiliated with Render. I am using it because it is exactly what I need in my weekend project.

Table of Contents

This article will not dive into the implementation details of the web application. However, we will go through the high level design with emphasis on the usage of Render to run the web application. I might consider diving into the implementation details of some of the components involved in my future posts. Stay tuned ;)

Why I built my weekend project: haiku.pro

  • I like to read and write Haikus. I am attracted to the simplicity in reading them and the constraint in writing them. During the Covid period, I’ve started thinking of building a simple web application to write and share Haikus. In other words, this weekend project is yet another Twitter clone but for writing haikus.
  • Anything that I will learn from this project can be applied to any future projects that I will build. If done right, parts of what I build for haiku.pro can be reused for any future personal projects especially if they are of similar architecture. As you can see in previous blog posts: I am a fan of reusing boilerplate code with templates and I like to share reference architectures so developers can learn from it.

[Back to top]

Product requirements

  • Create an account and login with username and password.
  • Write and post haikus.
  • Follow other users. They should be able to see posted haikus of users they follow on the authenticated home page.
  • Like posted haikus.
  • Share a direct link to a haiku.

[Back to top]

High-level design / architecture

High-level design of haiku.pro

[Back to top]

Looking for cloud service alternatives

Here are the requirements from a Cloud Provider that I was looking for:

  • Setup a build and deployment pipeline with GitHub integration.
  • Custom domain and DNS configuration.
  • Setup services using a multi-tiered architecture.
  • User authentication.We don’t want to handle user data and authentication, leave it to services that specialise in it.
  • CDN and static file hosting.

I’m aiming for less infrastructure maintenance so I can focus on building the product.

[Back to top]

Why I chose Render

Render is a unified platform to build and run all your apps and websites with free SSL, a global CDN, private networks and auto deploys from Git.

After scanning their documentation, I realised that they have everything that I need (see list above) except for user authentication.

Their documentation is also easy to follow. I noticed there are few number of steps in their tutorials, usually around or less than 5~ steps. Which makes it a breeze to go through.

[Back to top]

auth0 for my login service

[Back to top]

haiku.pro’s setup in Render

Services

I am using Web Service and Private Service for haiku.pro. Setting this up in Render’s dashboard is straightforward. I haven’t tried creating a Background Worker or a Cron Job but I am planning to use them in the future.

Service options in render dashboard.

Creating a service allows you to connect to your GitHub account and choose the repository of the service that you’d like to run. After connecting to GitHub, it will show you the autofilled service Settings. You can modify it according to your needs. It can also detect your Dockerfile and adjust the default settings accordingly.

Service settings.

You can then choose your plan which ranges from $7 to $175 per month. Plans below are for services that need compute resources. However, if your service is hosting a static site then it is free of charge. I am currently hosting my static personal website ardy.me in Render for free.

Plan options.

Advanced settings for auto-deploy for every push to your repo, health check, secrets, environment variables and so on.

Advanced settings.

After successfully creating your service, it will be:

  • Publicly available from <your-service-name>.onrender.com if it’s a Web Service.
  • Privately available from <your-service-name>:<port-number> if it’s a Private Service. It will be accessible from within your other services or from the Shell tab in Render.

The service dashboard has these useful functionalities like logging, mounting a disk for storage, adding environment variables and shell interface for debugging your service. There is also an option to create Environment Groups, which are basically a group of environment variables that can be shared across services.

Service dashboard tabs.

Pull Requests tab allows you to preview your changes for your pull requests, it will create a new service instance so you can test your service. Sharing is for giving access to your team and Metrics tab shows you the CPU and memory usage.

In my project haiku.pro, I’m using a Web Service for my Web Frontend and Static Files, and a Private Service for my Web API Backend.

Databases

Your database comes with encryption at rest, automated backups, and expandable SSD storage.

Creating a new Database is even simpler than creating a new service with pricing plans similar to their services.

The guide here sums up how simple it is to set it up a database in Render.

[Back to top]

Domain name configuration

[Back to top]

Infrastructure as code

Another nice feature that I like about using their YAML spec is that it allows me to pass around environment variables. For example, I can specify in my YAML that it should pass the database credentials as environment variables to my Private Service from my Database. That way, I don’t have to worry about copying and pasting my database credentials to the an environment variable in the Render dashboard. More about Render’s IaC here.

[Back to top]

Horizontal scaling

[Back to top]

A few other nice features worth highlighting

  • Deploy hooks. Render provides a private hook URL that you can use to trigger a deploy.
  • Slack Notifications. Useful when you work with a team or if you want to implement alerting via Slack.

[Back to top]

High level design with Cloud Services

High level design with Cloud Services.

The Startup

Get smarter at building your thing. Join The Startup’s +724K followers.

Ardy Gallego Dedase

Written by

Software Engineer. I enjoy harnessing tech to add value to the world. Grew up in 🇵🇭, worked and studied in 🇸🇬, and currently living in 🇨🇦. ardy.me

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +724K followers.

Ardy Gallego Dedase

Written by

Software Engineer. I enjoy harnessing tech to add value to the world. Grew up in 🇵🇭, worked and studied in 🇸🇬, and currently living in 🇨🇦. ardy.me

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +724K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store