Deploying Deno App on Heroku Server

Today we gonna unravel one of import question regarding Deno Deployment, as we gonna learn how to deploy Deno application inside Heroku Server so without further ado let’s get started.

First we need to create a template Application on our device so create app.ts file in your directory where you want to create the file.

To setup our application we gonna require Oak third party for serving our application and Flags from Deno Module which will help to setup our Port.

// Importing Module
import {Application, Router} from 'https://deno.land/x/oak/mod.ts';
import * as flags from 'https://deno.land/std/flags/mod.ts';

After importing our module we can setup our flags to check our port as if we are using local host then our server will run on localhost:8000, or else when we deploy our application we can use normal URL to access our app.

// Setting up port
const {args, exit} = Deno;
const DEFAULT_PORT = 8000;
const argPort = flags.parse(args).port;
const port = argPort ? Number(argPort) : DEFAULT_PORT;
if (isNaN(port)){
console.log("This is not port number");
exit(1);
};

After setting our port we can now take help of Oak to provide application layer to our app. So we need to set our application and router.

// Initializing App and Router
const app = new Application();
const router = new Router();
// Set our router to handle request
router.get('/',(ctx) => {
ctx.response.body = 'This is main page';
})
.get('/home',(ctx)=>{
ctx.response.body = "This is home page";
})
// Passing router inside our application as middleware
app.use(router.routes());
app.use(router.allowedMethods());
// Setting our app to listen to port
await app.listen({port: port});

After setting our app.ts file its gonna look something like this

// Importing Module
import {Application, Router} from 'https://deno.land/x/oak/mod.ts';
import * as flags from 'https://deno.land/std/flags/mod.ts';
// Setting up port
const {args, exit} = Deno;
const DEFAULT_PORT = 8000;
const argPort = flags.parse(args).port;
const port = argPort ? Number(argPort) : DEFAULT_PORT;
if (isNaN(port)){
console.log("This is not port number");
exit(1);
};
// Initializing App and Router
const app = new Application();
const router = new Router();
// Set our router to handle request
router.get('/',(ctx) => {
ctx.response.body = 'This is main page';
})
.get('/home',(ctx)=>{
ctx.response.body = "This is home page";
})
// Passing router inside our application as middleware
app.use(router.routes());
app.use(router.allowedMethods());
// Setting our app to listen to port
await app.listen({port: port});

You can check that our app is working or not inside your device as type “deno run -A app.ts” inside your terminal try to open up your browser type the url as “localhost:8000”.

Now to server our App on heroku we also need to create a Procfile which will hold our Deno run command and all the flags along with Port.

web: deno run --allow-net=:${PORT} --cached-only app.ts --port=${PORT}

Now you can add commit your code using git follow these command

$ git init
$ git add .
$ git commit -m "Created a Deno app Deploying on Heroku"

Before deploy your code on Heroku You need to create a buildpack inside your Heroku account as Heroku still not support official Deno deployment to here is some trick to deploy it. Inside your terminal type

$ heroku create --buildpack https://github.com/chibat/heroku-buildpack-deno.git
$ git push heroku master
$ heroku open

Now you can see that your app is working Fine as you intended. You can clone our code from Github using the link 👇.

recoding-io / deno-on-heroku-server

This code will allow to Deploy Deno application on Heroku Server

Deploy Deno on Heroku

This is project created on deno and help to deploy code on deno.

Project Intro

Inside this project we are using Deno modules like

• Oak
• Flags

Code to Deploy on Heroku Server

• Before deploying you need to initialize Git Repo and Commit your code

$ heroku create --buildpack https://github.com/chibat/heroku-buildpack-deno.git
$ git push heroku master
$ heroku open

Full step by step tutorial

• Youtube

View on GitHub

While if you like to watch full tutorial you can check our 📹 👇.