How easy is full stack web development with Deno? 🦕- 1
Tags: deno, fullstack, webdev, tutorial
Published: 2022-11-10 02:18:51

It is quite certain that you have been hearing a lot about **Deno**, and possibly you still don't know what **Deno** is or how it functions. It is good you have made your way here, because in this article, I will endeavour to teach you all you need to know about **Deno**, also, you will learn how to create and deploy a full-stack website application on **Deno** in minutes.

## Contents
{% spoiler Requirements %} - [Basic requirements for **Deno** development](#requirements) {% endspoiler %}
{% spoiler Definitions & Statements %} - [Defining **Deno** and its conceptual properties](#definitions). {% endspoiler %}
{% spoiler Coding %} - [Hands-on coding activities using TypeScript](#codings). {% endspoiler %}
{% spoiler Deployment %} Utilising **Deno's** serverless git deployment. Deploy via GitHub.{% endspoiler %}

## Requirements <a name="requirements"></a>
In order to archive the stated goal of creating and deploying a full-stack website application using **Deno**, you are required to have the following:

- Little or an Intuitive knowledge of JavaScript or TypeScript. [Learn more about TypeScript here!](url)

- New or Existing GitHub Account. [Get a GitHub account here!](url)

- **Deno** installed on your personal computer. [Install **Deno** here!](https://deno.land/)

With factual acquisition of the above requirements, I trust we are ready to realise and obtain the full power of **Deno**.

## What is **Deno** ? <a name="definitions"></a>
The existence of **Deno** has brought about a state of contemplation for most Web Developers using **NodeJs**, whether or not they switch stacks or utilise either stacks in their development processes. It cannot be denied that one of the major reasons why **NodeJs** has been so successful is the large number of packages that can be downloaded and utilised in a project. If you are considering switching to **Deno**, you may be wondering if you would have to give up all the NPM packages you know and love.

The short answer is: no. While you may not be able to utilise some NPM packages in **Deno** if they rely on **NodeJs APIs** (especially if the specific APIs are not supported in **Deno's** **NodeJs** compatibility layer), many NPM packages can be utilised in **Deno** through CDNs like [esm.sh](https://esm.sh/) and [skypack.dev](https://www.skypack.dev/). Both these CDNs provide NPM packages as ES Modules that can be subsequently consumed in a **Deno** script even if the author of the package did not design it to target **Deno** specifically.

**Deno** is a simple, modern and secure runtime for JavaScript, TypeScript, and WebAssembly that uses V8 and is built in Rust. It is secure by default, and is a drastic improvement on NodeJs, having major constant improvements 👀. [Read more about the differences and similarities between **Deno** and **NodeJs**](url). This means that **Deno** provides the latest and greatest in web technologies in a globally scalable way, It possesses a lot of new features that are even yet to be discovered. Daily, we have software engineers and developers building benefiting innovations on **Deno**🦕. You should consider to checkout and follow [@deno_land](https://twitter.com/deno_land) on Twitter for major updates and informations.
{% embed https://twitter.com/deno_land/status/1586032184019648512 %}

[**Fresh**](https://fresh.deno.dev/) is considered "The next-gen web framework", built for speed, reliability, and simplicity on **Deno**. It is an edge-first web framework that delivers zero JavaScript to the client by default with no build step. It is optimised for speed and, when hosted on the edge with [Deno Deploy](https://deno.com/deploy), can be fairly trivial to get a perfect Lighthouse page-speed score.

With [**Fresh Deno**](https://fresh.deno.dev/)🍋, you literally have every tool required for your web development and deployment processes. It offers fast & improved production development and deployment, website SEO(website traffic), webpage navigation/routing, custom webpage middleware handlers, both front-end and back-end implementations, and so on with no configuration necessary. **Deno** has an endless list of befitting offers to your development process.

Having knowing a few of many **Deno** capabilities, I will proceed to develop a simple **Community and Blog** website, of which its users can communicate seamlessly in respective communities, create and share contents, you will also learn how to push and deploy a code repository using GitHub with [**Deno Deploy**](https://deno.com/deploy).

## Developing a simple Community and Blog website using Fresh Deno framework. <a name="codings"></a>
To begin development, confirm that you have **Deno** installed properly by launching your terminal or command line interface and run the following command:

`deno --version`

If this prints the **Deno** version to the console the installation was successful. Voila!, we can proceed to get started!.

### Bootstrap a new project

- Simply run `deno run -A -r https://fresh.deno.dev simple-commblog-webapp`.

- Select yes for Tailwind and VSCode (Recommended).

- Change directory into the new project, run `cd simple-commblog-webapp`, then run `deno task start` to start and view the default web app on a web browser.
{% details View image of default web app %} <img src="https://deno.com/build-a-blog-with-fresh/default-fresh-app.png" /> {% enddetails %}
Good work!

### Update the project directory structure
The **Fresh Deno** init script scaffolds a comprehensive web app directory. So let us make a few modifications to it to fit the purposes of a community and blog.
```
simple-commblog-webapp/
├── .vscode
├── components
├── islands
├── routes
├── static
├── deno.json
├── dev.ts
├── fresh.gen.ts
├── import_map.json
├── main.ts
├── README.md
└── twins.config.ts
```

Continue reading on next post, [How easy is full stack web development with Deno? 🦕- 2]().