Hey guys, so we got started with Deno, and created a Deno API. But what if we want Deno to server actual files?
Today we'll be looking into Deno as a server option.
Deno Server
In Node, you probably have heard of Express. This was the middle layer to render files. In Deno, we have something similar called Oak.
First we are going start by importing the modules we need.
import {Application} from 'https://deno.land/x/oak@v6.0.0/mod.ts';
import {
viewEngine,
engineFactory,
adapterFactory
} from 'https://deno.land/x/view_engine@v1.3.0/mod.ts';
Now we must define our adapters.
const ejsEngine = engineFactory.getEjsEngine();
const oakAdapter = adapterFactory.getOakAdapter();
We are choosing the ejs template but we can also use handlebars or denjucks.
Then we define our oakAdapter.
Now, we are going to start our application:
const app = new Application();
app.use(viewEngine(oakAdapter, ejsEngine));
Here we define a new Deno application and tell it to use the defined view engine.
We aren't using routes for this example, but will just return a one time view:
app.use(async (ctx, next) => {
ctx.render('index.ejs', {data: {msg: 'Tips'}});
});
See the data attribute? We are going to pass a variable to our view, which ejs can render for us.
Now, all we have to do is spool up our app on port 8000.
await app.listen({port: 8000});
EJS Template
As for our ejs file, We are using a plain bootstrap starter:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<title>Deno Server</title>
</head>
<body>
<h1>Daily Dev <%= data.msg %></h1>
</body>
</html>
Now are are ready too run our server by executing:
deno run --allow-net --allow-read server.ts
Now open a browser and locate: http://localhost:8000 and see our site!
Find this project on GitHub.
Thank you for reading, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter