How easy is full stack web development with Deno? 🦕- 1

Gideon Olayode — Thu, 10 Nov 2022 02:18:51 +0000

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.

Requirements

- Basic requirements for Deno development

Definitions & Statements

- Defining Deno and its conceptual properties.

Coding

- Hands-on coding activities using TypeScript.

Deployment

Utilising Deno's serverless git deployment. Deploy via GitHub.

Requirements

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!
New or Existing GitHub Account. Get a GitHub account here!
Deno installed on your personal computer. Install Deno here!

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

What is Deno ?

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 and 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. 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 on Twitter for major updates and informations.

Deno

@deno_land

be careful what you run on your computer... 💀 twitter.com/i/web/status/1…

16:28 PM - 28 Oct 2022

Fresh 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, can be fairly trivial to get a perfect Lighthouse page-speed score.

With Fresh Deno🍋, 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.

Developing a simple Community and Blog website using Fresh Deno framework.

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.
View image of default web app
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.

DEV Community: Gideon Olayode

How easy is full stack web development with Deno? 🦕- 1

Contents

Requirements

What is Deno ?

Developing a simple Community and Blog website using Fresh Deno framework.

Bootstrap a new project

Update the project directory structure