Deno Tutorial for Beginners: Build Your First Web App with Practical Steps

by

Are you interested in modern JavaScript runtime environments? Deno is a secure runtime for JavaScript and TypeScript, created by Ryan Dahl, the original creator of Node.js. This tutorial will guide beginners through building their first web application using Deno with practical, easy-to-follow steps.

What is Deno?

Deno is a runtime environment designed to execute JavaScript and TypeScript outside of web browsers. It emphasizes security, simplicity, and modern JavaScript features. Unlike Node.js, Deno has built-in TypeScript support, a secure sandbox by default, and a streamlined module system.

Prerequisites

  • Basic knowledge of JavaScript or TypeScript
  • Computer with internet access
  • Terminal or command prompt
  • Text editor (such as VS Code)

Installing Deno

Follow these steps to install Deno on your system:

  • Open your terminal or command prompt.
  • Run the installation command suitable for your OS:

For Windows, macOS, or Linux:

“`bash curl -fsSL https://deno.land/x/install/install.sh | sh “`

Alternatively, for Windows, you can use Chocolatey:

“`bash choco install deno “`

Verify the installation:

“`bash deno –version “`

Creating Your First Deno Web Server

Let’s build a simple web server that responds with “Hello, Deno!” to any request.

Create a new file named server.ts in your project directory:

“`typescript import { serve } from “https://deno.land/[email protected]/http/server.ts”; const handler = (req: Request): Response => { return new Response(“Hello, Deno!”, { status: 200 }); }; console.log(“Server running on http://localhost:8000”); await serve(handler, { addr: “:8000” }); “`

Running Your Web App

In your terminal, navigate to the directory containing server.ts and run:

“`bash deno run –allow-net server.ts “`

You should see the message “Server running on http://localhost:8000”. Open your browser and go to that URL to see your web app in action.

Adding Practical Features

Enhance your app by adding more features:

  • Serving HTML Files: Read HTML files and serve them as responses.
  • Handling Routes: Create different responses based on URL paths.
  • Using Environment Variables: Manage configuration securely.

Example: Serving an HTML Page

Update your server.ts to serve an HTML page:

“`typescript import { serve } from “https://deno.land/[email protected]/http/server.ts”; const htmlContent = ` Deno Web App

Welcome to Deno!

This is your first web app built with Deno.

`; const handler = (req: Request): Response => { return new Response(htmlContent, { headers: { “content-type”: “text/html” }, }); }; console.log(“Server running on http://localhost:8000”); await serve(handler, { addr: “:8000” }); “`

Next Steps

Once you’ve mastered the basics, explore more advanced topics:

  • Connecting to databases
  • Implementing REST APIs
  • Adding middleware and routing frameworks
  • Deploying your app to cloud platforms

Building with Deno opens up many possibilities for modern web development. Keep experimenting and learning!