Deploying on a server (Render)

Here, we briefly look into deploying a web application on the web using Render. Although this example outlines the use of Render, other options for deploying software are also accepted, including self-hosting content.

To work fluently with Render, we recommend also using GitHub or GitLab. These guidelines are written from the point of view of a GitHub user.

Register to Render.com

To use Render.com, you need to first register to the platform. Click the Get Started For Free button on the main page of Render.com. This opens up the address https://dashboard.render.com/register.

Register with your GitHub account -- this links your GitHub account to Render, and will allow easy deployment of code from GitHub. To proceed, you need to verify your email address. The verification email might take a while to arrive.

Once you verify your email address, you are shown the Render dashboard at https://dashboard.render.com/.

Creating a repository on GitHub

Open up GitHub and create a new repository. When you click the + icon in the navigation bar of GitHub, shown in Figure 1, you are shown a list of options. The list shows an option "New repository". Click on that.

This opens up a page for creating a new repository, which is at the address https://github.com/new, shown in Figure 2. Type in wsd-online-deployment-i as the repository name, and choose a Private repository.

Once you fill in the details, click the "Create repository" button at the bottom of the page. This leads you to a page with guidelines on how to work with the repository. In our case, it looks like the one shown in Figure 3.

Install git

Next, you need to install git. If you already have git, skip this part.

Follow the steps for your operating system outlined in Getting Started - Installing Git.

When done, create a SSH key for GitHub, following the guidelines at https://docs.github.com/en/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account.

Alternatively, you may use personal access tokens, discussed at https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token.

These guidelines are written from the point of view where the user has set up an SSH key for GitHub.

Creating a project in a folder

Next, create an empty directory. This is done using the mkdir command.

mkdir wsd-online-deployment-i
cd wsd-online-deployment-i
tree --dirsfirst
.

0 directories, 0 files

In that directory, create three files: (1) app.js, (2) deps.js, and (3) Dockerfile.

Add the following code to deps.js:

export { serve } from "https://deno.land/std@0.222.1/http/server.ts";

Then, add the following code to app.js:

import { serve } from "./deps.js";

const handleRequest = (request) => {
  return new Response("Hello world!");
};

serve(handleRequest, { port: 7777 });

And finally, add the following configuration to the Dockerfile:

FROM denoland/deno:alpine-1.42.2

EXPOSE 7777

WORKDIR /app

COPY deps.js .

RUN deno cache deps.js

COPY . .

CMD [ "run", "--allow-net", "--watch", "--unstable", "app.js" ]

Now, listing the files in the directory should look as follows.

tree --dirsfirst
.
├── app.js
├── deps.js
└── Dockerfile

0 directories, 3 files

Adding the project to GitHub

Still in the same folder, we next run a set of the commands outlined in the "...or create a new repository on the command line" part you were shown when the repository was created on GitHub (Figure 3).

Note that instead of adding a README.md file to the repository, we add the files that we just created. In addition, note that the username avihavai shown in the below example (and in Figure 3) needs to be replaced with your GitHub username.

git init
Initialised empty Git repository in /path-to-folder/wsd-online-deployment-i/.git/
git add .
git commit -m "first commit"
[master (root-commit) 1fa3205] first commit
// some details
 3 files changed, 8 insertions(+)
 create mode 100644 Dockerfile
 create mode 100644 app.js
 create mode 100644 deps.js
git branch -M main
git remote add origin git@github.com:avihavai/wsd-online-deployment-i.git
git push -u origin main
Counting objects: 5, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (4/4), done.
Writing objects: 100% (5/5), 483 bytes | 483.00 KiB/s, done.
Total 5 (delta 0), reused 0 (delta 0)
To github.com:avihavai/wsd-online-deployment-i.git
 * [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

Now, when we reload the page that showed the guidelines (the page we were shown in Figure 3), we see the files that we just sent to our GitHub repository. This is shown in Figure 4.

Adding a GitHub repository to Render

Next, we add a GitHub repository to Render. In the navigation bar of the Render dashboard, click the New + button and select Web Service. This is highlighted -- just before clicking the Web Service -- in Figure 5.

Clicking on the Web Service opens up a page that shows options for creating a new Web Service. The page looks like the one in Figure 6. On a wider screen, the options for connecting GitHub or GitLab accounts are on the right hand side.

Click the + Connect account link. This opens up a GitHub page that asks where we want to Install Render. Choose your username. This opens up another page that asks for the repository for which you wish to install Render. Choose "Only select repositories" and select the wsd-online-deployment-i repository that you created earlier.

Scroll to the bottom of the page and click the Install button. After this, GitHub asks for your GitHub password. Once you enter your password, you are directed back to the Render dashboard.

Now, in the list of repositories shown in the dashboard, under "Connect a repository", we see our repository. The repository has a button "Connect" next to it, as shown in Figure 8.

Deploying a Web Service on Render

Continuing from the previous step, click the Connect button. This opens up a page where you need to fill in details of your application. Select a name for the application -- for the present purposes, we've chosen artos-unique-wsd-deployment-i, but you need to come up with something different as that one's already taken (by us).

Choose a region for the deployment -- we've chosen Frankfurt (EU Central). The branch should be main. Leave the Root Directory empty, and choose Docker as the Environment. Finally, choose the Free instance type. The options should be similar to the ones in Figure 9, with the exception of the GitHub repository username and the name of the deploment.

When finished, click the Create Web Service button at the bottom of the page.

This starts a deployment process on Render. During the deployment process, Render retrieves the GitHub repository, builds the application following the steps outlined in the Dockerfile, runs the resulting Docker image, searches for available ports from the running image, and finally opens up a port that responds to HTTP requests to the world.

Once everything is up and running, the deployment page on Render should look similar to the one in Figure 10 below.

The site also shows an address where the application is running. In our case, the application is at https://artos-unique-wsd-deployment-i.onrender.com, but this depends on the unique name that you typed in during the deployment options.

When we access the page at https://artos-unique-wsd-deployment-i.onrender.com, we see the response from the application, as shown in Figure 11.

Note that, as we change the contents of the page in the following steps, what you presently see at the address differs from the above image.

Updating our application and redeploying

Next, let's update our application. Change the contents of the app.js to the following and save the file:

import { serve } from "./deps.js";

const handleRequest = (request) => {
  return new Response("Hello you!");
};

serve(handleRequest, { port: 7777 });

Add the change to GitHub. This is done by the three commands git add, git commit, and git push. For the first, we define the file (or the files) we wish to add to GitHub, while for the second, we define a message that outlines the changes that we made.

In practice (once app.js has been changed and saved), the steps look as follows.

git add app.js
git commit -m "Changed response"
[main ea1a20b] Changed response
// ...
 1 file changed, 1 insertion(+), 1 deletion(-)
git push
Counting objects: 3, done.
// ...
remote: Resolving deltas: 100% (1/1), completed with 1 local object.
To github.com:avihavai/wsd-online-deployment-i.git
   ...  main -> main

Now, when we wait for a moment and access the site at https://artos-unique-wsd-deployment-i.onrender.com, we observe that the content of the page has changed.

You are now ready to tackle the first online deployment exercise, outlined in Chapter 8.3. Deployment exercise.