Using Fresh in Deno for Web Development

In this article, we will dive into the world of Deno web development by exploring Fresh, a minimalistic web framework for Deno. Deno is a runtime for JavaScript and TypeScript built on the V8 JavaScript engine and Rust language. It is designed to be secure, fast, and built with modern web development in mind. Fresh is a lightweight framework that helps developers create server-rendered applications with ease.

Prerequisites

Before diving into Fresh, make sure you have the following tools installed:

1. Deno: A secure runtime for JavaScript and TypeScript.

2. Deno Deploy: A global serverless platform for deploying Deno applications.

Getting Started with Fresh

To get started with Fresh, create a new directory for your project and navigate to it:

mkdir fresh-app && cd fresh-app

Create a deps.ts file in the root of your project, which will hold all the dependencies for your application. This is an excellent practice in Deno applications, as it allows you to manage and update dependencies more efficiently.

// deps.ts
export { Application } from "https://deno.land/x/fresh/mod.ts";

Now, create a main.ts file in the root directory, which will be the entry point for your application:

// main.ts
import { Application } from "./deps.ts";

const app = new Application();

app.use(async (ctx) => {
  ctx.response.body = "Hello, Fresh!";
});

await app.listen({ port: 8000 });
console.log("Server is running on http://localhost:8000");

In the code above, we import Application from our deps.ts file, create a new instance of it, and define a simple middleware that sends “Hello, Fresh!” as the response body. Finally, we start our server on port 8000.

To run the application, execute the following command in your terminal:

deno run --allow-net main.ts

Now, if you visit http://localhost:8000 in your browser, you should see the “Hello, Fresh!” message.

Routing with Fresh

Fresh has a built-in router that allows you to create routes for your application easily. Let’s create a new routes.ts file in the root directory and define some routes:

// routes.ts
import { Router } from "https://deno.land/x/fresh/mod.ts";

const router = new Router();

router.get("/", (ctx) => {
  ctx.response.body = "Welcome to the Fresh application!";
});

router.get("/about", (ctx) => {
  ctx.response.body = "This is the about page.";
});

export default router;

In your main.ts file, import the router and use it as middleware:

// main.ts
import { Application } from "./deps.ts";
import router from "./routes.ts";

const app = new Application();

app.use(router.routes());
app.use(router.allowedMethods());

await app.listen({ port: 8000 });
console.log("Server is running on http://localhost:8000");

Now, when you visit http://localhost:8000 and http://localhost:8000/about, you will see the respective messages.

Server-Side Rendering with Fresh

Fresh makes server-side rendering easy. Let’s create a simple template engine for rendering HTML pages. Create a new render.ts file:

// render.ts
export function render(view: string, data: Record<string, any> = {}): string {
  return view.replace(/\{\{(\w+)\}\}/g, (_, key) => data[key] || "");
}

Now, update your routes.ts file to use the render function:

// routes.ts
import { Router } from "https://deno.land/x/fresh/mod.ts";
import { render } from "./render.ts";

const router = new Router();

router.get("/", (ctx) => {
  const html = `
    <h1>Welcome to the Fresh application!</h1>
    <p>{{message}}</p>
  `;

  ctx.response.body = render(html, { message: "This is a dynamic message" });
});

router.get("/about", (ctx) => {
  const html = `
    <h1>About</h1>
    <p>This is the about page.</p>
  `;

  ctx.response.body = render(html);
});

export default router;

Now, when you visit the routes, you will see the HTML pages rendered with dynamic content.

Conclusion

In this article, we’ve explored Fresh, a minimalistic web framework for Deno, and learned how to create a simple server-rendered application with routing and templating. Fresh is an excellentchoice for developers who want a lightweight and easy-to-use tool for building server-rendered applications in Deno.

As you continue to explore Fresh and Deno, you may want to look into other features and tools, such as:

• Middleware for handling static files and serving assets
• Handling form data and file uploads
• Authentication and authorization
• Integrating with databases and ORMs
• Deploying your Deno applications using Deno Deploy or other platforms