Let’s built a server-side rendered application

Introduction

After years of working with front-end frameworks like Vue and React, I’ve come to a game-changing realization: you don’t really need a front-end framework to build a fantastic web application. With a well-crafted backend and solid coding practices, server-side rendering (SSR) can shine on its own. In this blog, I’ll dive deep into how to make this happen. Our goal during this session is to build a simple CRUD application with a solid authentication system where users can create blogs and share then with other users. We’ll be using Deno, a cutting-edge JavaScript runtime that’s a great alternative to Node.js, along with TypeScript and Handlebars for the front end and Supabase to store our data. Get ready to embark on this exciting journey to mastering SSR — let’s do this!

Setting up your back end

Before we start, make sure Deno is installed on your machine. I’ll be coding on a windows machine using visual studio code but a majority of my instructions can work on both windows and mac.

To install Deno type in this command in your command prompt.

irm https://deno.land/install.ps1 | iex        

For Mac:

curl -fsSL https://deno.land/install.sh | sh        

Once you have Deno installed, you can run Deno commands directly from your command prompt. With Deno up and running on your system, the next step is to open Visual Studio Code and create an “index.ts” file. This file will be the core of our application. Our main goal here is to use Express to create API routes and Supabase to store information. While I won’t cover the setup of your Supabase project in detail, you can easily find that information on their official website.

Now in your index.ts file write this code:

import express from 'npm:express'; 
import supabase from 'npm:@supabase/supabase-js';        

One of the most amazing things about Deno is that it doesn’t rely on a package manager, so there’s no need to install packages manually. Deno has access to its own packages as well as those you would typically get through NPM. By using the “npm:” prefix when importing modules, you can access packages that you’d usually have to install via npm. This seamless integration makes Deno both powerful and convenient.

Up next we’re going to create an instance of express and get that instance to listen to request from a certain port on your PC.

The listen function takes in two parameters, the first is whatever port you want the api to listen to, second is a callback function you want to call each time the when your app start listening on said port. Now before we run this we are going to install deno package called denon. From this point onward we will be using this package to run our deno application. It basically restarts our api every time a change has been make. It’s basically the nodemon equivalent for deno. Type this into your command prompt:

deno install -qAf --unstable https://deno.land/x/denon/denon.ts        

Now we’re going to test this out. Use the shortcut CTR + SHIFT + ~ to create a new terminal instance in vs code and run the command

denon run --allow-net --allow-read --allow-env index.ts        

Now you might be curious about the parameters i used here. Here’s an explanation about each of them:

— allow-net: This command allows Deno to make network request on your PC

— allow-read: This allows your code to read files on your machine

— allow-env: This allows your code to access environment variables

When you run the command you’ll see that your code is now listening on port 4000.

Now let’s create a simple route to test our api.

app.get('/', (req, res) => {
    res.json({'msg':'working'});
})        

Here we are making a get request that takes in a route as the first parameter and a callback function as the second. In the function we are returning data in the JSON format. If you were to open your browser and type in “localhost:4000”, you’ll see the json data being displayed on your screen.

Conclusion

It this session we learnt about how we can use deno instead of node to make a simple application. Now that we have set up a very basic API, in part two of this blog let’s start on our handlebars.