Rendering HTML,CSS dan Static Files didalam Deno menggunakan View Engine Template

​

Assalamualaikum Warahmatullahi Wabarakatuh, dalam postingan ini adalah lanjutan dari tutorial Deno, sekarang bagaimana caranya kita akan merender html,css dan static file pada Deno ini? Rendering HTML atau CSS mungkin prosesnya agak rumit ya karena Deno masih dalam rilis awal dan tidak ada banyak plugin untuk digunakan untuk melayani file HTML atau CSS. Jadi masih hanya beberapa libraries yang mendukung dukungan render lengkap, salah satunya adalah view-engine. Bagaimana caranya ? maka dari itu simak pada postingan kali ini, mari kita bahas.

Pertama-tama, kita perlu membuat tiga file "app.ts", "index.ejs", "./static/style.css". Struktur file akan terlihat seperti ini.

Langkah selanjutnya yaitu kita akan koding di dalam file main.ts

Disini kita membutuhkan library untuk contoh ini kita akan mengimpor Oak yang menyediakan lapisan server (server layer) untuk aplikasi kita dan view-engine yang menyediakan tata letak untuk layouting web yang kita akan buat ini.

import { Application, Router,send } from "https://deno.land/x/oak/mod.ts";
import {viewEngine,engineFactory,
adapterFactory} from "https://deno.land/x/view_engine/mod.ts";

Dibaris satu kita membutuhkan Oak dimana untuk memanggil kelas "Application" yang menyediakan server aplikasi seperti halnya middleware dan listen to port. Sementara itu class "Router" akan memberikan route layer sehingga kita dapat membuat banyak router dan dengan mudah memisahkan URL seperti yang kita inginkan. " send " sangat berguna untuk menyediakan dan pemanggilan file statis yang ingin dibuat.

Setelah mengimpor kita perlu menginisialisasi Application dan Router kita dengan menggunakan kode ini

const app = new Application();
const router = new Router();

Setelah menginisialisasi, kita perlu mengkonfigurasi aplikasi kita untuk menggunakan view engine untuk postingan ini kita menggunakan  EJS template engine ke server HTML. Mungkin kalian juga dapat menggunakan mesin rendering lain seperti Denjuck or Handlebars jika kalian tertarik mencoba.

const ejsEngine = await engineFactory.getEjsEngine();
const oakAdapter = await adapterFactory.getOakAdapter();

Setelah kalian setting view engine boiler plates, kita perlu memberikan middleware untuk menyajikan folder statis di dalam browser web yang akan dibuat.

app.use(async (ctx,next) => {
    await send(ctx, ctx.request.url.pathname,{
    root: `${Deno.cwd()}/static`
     })
    next()
  });

Selanjutnya yaitu kita akan pass view engine sebagai middleware di aplikasi kita dengan kode berikut:

app.use(viewEngine(oakAdapter,ejsEngine));

Bagian utama dari boilerplate kita telah selesai sekarang kita dapat mengatur router untuk contoh ini kita hanya menggunakan satu route ke root URL.

router.get("/",(ctx)=>{
 ctx.render('index.ejs',{data: {msg:"World"}}
 });

//Menambahkan middleware membutuhkan route
app.use(router.routes());
app.use(router.allowedMethods());

File main.ts kami akhirnya selesai, kita hanya perlu menjalan aplikasi menggunakan kode berikut:

console.log('App is listening to port: 8000');
app.listen({port:8000});

Full codenya akan seperti ini.

import { Application, Router,send } from "https://deno.land/x/oak/mod.ts";
import {viewEngine,engineFactory,
adapterFactory} from "https://deno.land/x/view_engine/mod.ts";

const app = new Application();

const ejsEngine = await engineFactory.getEjsEngine();
const oakAdapter = await adapterFactory.getOakAdapter();

app.use(viewEngine(oakAdapter,ejsEngine));

const router = new Router();

    router.get("/", (ctx) => {
        ctx.render('index.ejs',{data : {msg: 'World'}});
        console.log('App is listening to port: 8000');
    });

app.use(router.routes());
app.use(router.allowedMethods());
app.use(async (ctx,next) => {
    await send(ctx, ctx.request.url.pathname,{
    root: `${Deno.cwd()}/static`
     })
    next()
  });
console.log('App is listening to port: 8000');
app.listen({port:8000});

lalu kita akan membuat file index.ejs , cukup simpel saja seperti ini

<html>
 <head>
  <link rel="stylesheet" href="/style.css">
  <title> HTML, CSS dan static file | Afrizals Blog </title> 
 </head>
 <body>
  <h1> Hello <%= data.msg %></h1> 
 </body>
</html>

Di EJS, objek yang dikirim dalam file app.ts kita dapat menampilkan objek tersebut  dengan menggunakan sintaks EJS <% = data.msg%>.

Untuk langkah terakhir, kita perlu membuat file style.css di dalam file statis dan kalian dapat membuat kode apa pun yang diinginkan.

body{
    background-color: aqua;
    color: black;
}

Lalu kita jalankan di terminal untuk mengeksekusi kode yang kita buat.

deno run --allow-net --allow-read main.ts

Buka browser dengan url http://localhost:8000/ , maka akan menampilkan seperti ini

Kita telah mengetahui cara render html, css pada Deno. Jika kalian ingin mempelajari Deno lebih lanjut kamu dapat mengklik link ini https://deno.land/ dan sampai jumpa di konten Deno berikutnya

Wassalamualaikum Warahmatullahi Wabarakatuh.

FYI

Jika terjadi error: No such file or directory (os error 2) , maka kalian perlu mendowngrade versi deno.
seperti pada laman  Deno.land view_engine bisa dijalankan di versi 1.0.2. Kita tunggu update selanjutnya.

Referensi:

Deno.land view_engine

​