Zero downtime deployments to Render using CircleCI

Downtime during deployments can affect the performance of your work. Data can be lost, and trust in your application can be destroyed. Luckily, zero downtime deployments do not need to be complex or involve a big infrastructure.

This tutorial will teach you to establish a stable CI/CD pipeline with CircleCI and Render to automatically test and deploy a basic React application. Using nothing more than GitHub and a deploy hook, you can make sure that each push to your repository will undergo automated testing and be released to production in a safe and non-disruptive manner to your live site.

Whether it is personal projects you are working on or pushing changes to a client, this arrangement lets you rest assured your changes are clean, tested, and live without a hitch.

Prerequisites

• A GitHub account
• Git installed and configured
• A Render account
• A CircleCI account
• Basic knowledge of GitHub and React

Prepare your GitHub repository

Before deploying an app, you need to make sure that you have a repository with a working application. If you do not have one, you can fork or clone our pre-built React app to get started. This repository includes:

• A package.json file with defined dependencies and basic scripts
• A public/index.html file that acts as the entry point for the app
• A simple structure designed for easy deployment using Render and CircleCI

To ensure that you undergo this tutorial step-by-step, the repository will utilize two branches:

• starter-branch: This branch does not have any CircleCI configuration set up. It’s a clean starting point for setting up CI/CD.
• main: This branch contains the final working configuration with CircleCI and Render fully connected.

You are free to look at the code, modify it, or simply use it as it is. The repository is not complicated, and the configuration is minimalistic, as it is supposed to help you concentrate on the CI/CD process, not on the application itself. Like mentioned, to ensure you follow the tutorial step-by-step, it’s recommended that you start from the starter-branch.

You can clone the repository and switch to the correct branch like this:

git clone https://github.com/CIRCLECI-GWP/render-circleci-demo.git
cd render-circleci-demo
git checkout starter-branch

This gives you a local copy of the project on your machine, ready for editing and CI/CD configuration. After forking or cloning the repo to your GitHub account, you may continue with the steps of configuring automated deployment to Render with CircleCI.

What is Render?

Render is a contemporary cloud solution which enables you to conveniently deploy web-based services and applications. It provides an alternative to the classic infrastructure solutions, it combines the control of a platform such as AWS and the ease of use of a service such as Heroku.

Everything including static sites, full-stack applications, cron jobs, PostgreSQL databases and background workers can be hosted out of Render in the same environment.

Key features

1. Auto deployments using Git: With Render, you can automatically deploy your app whenever you push to your connected GitHub repo.

2. Zero downtime deployments: You can easily deploy updates without taking your app offline to ensure a smooth experience for readers

3. Free tier available: This is useful for prototyping small projects, with generous limits.

4. Built-in HTTPS and custom domains: You have Secure Sockets Layer (SSL) enabled by default and you can add your domain with ease.

5. Background workers and cron jobs: Run scheduled tasks or background processes alongside your main apps.

Advantages

1. You don’t need to work with a complex infrastructure before you can deploy to Render

2. It offers a developer-friendly dashboard with clear insights into builds, logs, and deployment history.

3. It’s also great for CI/CD integration as Render plays well with tools like CircleCI and other CI platforms for automated deployments.

4. It’s easy to scale your app vertically or horizontally as it grows on Render.

5. There is an active community and a lot of helpful docs on Render that can help make it easier to learn or troubleshoot.

Deploy the app to Render

Render is a straightforward platform that makes hosting your web applications much easier. And so, here are the steps to get started:

1. Go to Render.
2. If you have an account, go ahead to sign in. If you don’t have an account, click Get Started.
3. On the next page, you will see various options. Click GitHub to link your GitHub to Render and authorize the access when prompted. This makes it easy for you to access your repos through Render.
4. On the next page, click New at the top right to get started with setting up your repo.
5. Click Web Service from the list.

1. Configure your GitHub to give Render permission to access your repos if you haven’t already. After this step, you should be able to select your repo. Choose the repo we created earlier.
2. Configure your services with the following:
   • Build command: npm install
   • Start command: npm start

Why npm and not yarn? In this tutorial, we use npm due to the fact that they are already installed with node.js and they do not require additional setup. It avoids extra steps like installing yarn, and works reliably across CI environments like CircleCI and platforms like Render.

You’re free to use yarn if it’s what your project needs. To do this, you can adapt the below:

• Build command: yarn install
• Start command: yarn start

After following any of the options above, click “Deploy Web Service” at the bottom of the screen.

After the first deployment, you will need to take note of your Deploy Hook URL. You can find this URL in your render service > Settings > Deploy Hooks (you will have to scroll down to find Deploy Hooks). Copy the URL and keep it safe, we’ll use it when integrating with CircleCI.

Add CircleCI configuration

After creating the repo with all of the files in place, you’ll have to create a .circleci folder to add your config.yml file. Here’s what your config file should look like:

version: 2.1

jobs:
  build-and-deploy:
    docker:
      - image: cimg/node:18.16
    steps:
      - checkout
      - run: npm install
      - run: npm test
      - run:
          name: Deploy to Render
          command: |
            curl -X POST https://api.render.com/deploy/srv-xxxxxxxxxxxx?key=your_deploy_hook_key

workflows:
  version: 2
  deploy_on_push:
    jobs:
      - build-and-deploy

This configuration replaces https://api.render.com/deploy/srv-xxxxxxxxxxxx?key=your_deploy_hook_key with your actual Deploy Render Hook URL that you had saved earlier. Then commit and push changes to GitHub.

git add .
git commit -am "Add CircleCI config for Render deploy"
git push

In the above: -git add . stages all the changes in your project directory -git commit -am "...” commits new changes with a message that you staged. With: -a, files left with modified end states are automatically added, and -m allows the use of commit messages on a single line. -git push uploads your commit to GitHub

Set up CircleCI

Now that you have a valid config file, you can link everything together with CircleCI. This allows CircleCI to watch your repo and automatically run the pipeline every time you push changes. Here is a quick guide on what you should do:

1. Visit CircleCI.
2. Sign into your account or Log in with GitHub.
3. After logging in, click on “Projects” on the sidebar and then “Create Project”.
4. Name the project render-circleci-demo and then follow the prompts, select the render-circleci-demo repo, and finish the setup.

After adding your repo, CircleCI should now be able to run the pipeline on your next commit.

Test the workflow

For the last step, you’ll need to confirm that everything you have done works perfectly. To do this, you can make a small change or update in the app and watch it flow through CircleCI and into production on Render.

Go to your public/index.html file in GitHub and then make a change to the content inside the <div>. For example, you can change the text from “Hello from Render!” to something else like “Update from Render.” Then commit and push your changes to GitHub:

git add .
git commit -am "Test deployment trigger"
git push

This should trigger the CircleCI workflow and run npm install and npm test.

If the tests pass, CircleCI makes a POST request to your Render deploy hook and Render deploys the new version of your app.

We are using npm in this tutorial since it comes with Node.js, and can be successfully used in a CI/CD pipeline, such as CircleCI or Render, without additional configuration. However, in case your project operates on the use of yarn, then in such an event, here is how to modify the build instructions in accordance to the use of yarn:

In your .circleci/config.yml file, change this:

- run: npm install
- run: npm test

To this:

- run: yarn install
- run: yarn test

When you are migrating to yarn, make sure that yarn.lock is in your repo, so CI will know which dependency manager to use.

Upon deployment, go to your Render app and check whether the update is working. You should have an officially commissioned zero-downtime CI/CD pipeline.

Conclusion

Zero downtime deployments are not restricted to big teams or complicated infrastructures. CircleCI and Render make it easy to build a polished, predictable CI/CD pipeline that automates testing and deployment with very little setup. With a mere deploy hook and neat CircleCI workflow, you will get the guarantee that each commit is validated and securely deployed to production without disturbing your users.

This arrangement is not only time-saving but also creates an assurance in your development procedure. Zero downtime deployments are a professional move, whether you are working on solo projects or gearing up to scale and now, you have the right tools to do it right.