Deno Deploy
Written by Marvel Ken-Anele
Last update: 4/17/2024
Deno Deploy, launched 24th March, 2021, serves as a worldwide platform for serverless JavaScript applications, ensuring that your JavaScript, TypeScript, and WebAssembly code operates on managed servers located near your users. This setup enables quick response times and low latency. Instead of virtual machines, applications are powered by the Deno runtime and run on efficient V8 engines, making the deployment process fast and lightweight.
A visual representation of Deno Deploy.
As of the time of writing, Deno Deploy offers two pricing models. The standard model for hosting your first-party projects, and the subdomain for hosting third-party API.
For users exploring the platform with low traffic, the Free Tier provides a cost-free option. This tier comes with basic features, making it an ideal starting point for those looking to familiarize themselves with the platform. It includes monthly limits of 1 million requests, 100GB of bandwidth, and allows up to 50 custom domains per organization.
Introducing the Pro plan at $20/month, designed to meet the demands of advanced projects, this tier offers subdomains, up to 50ms CPU time per request, and 5 million requests per month, accompanied by 250 GB of included data transfer. Perfect for multiple-user collaboration, this plan ensures large project management and development.
Designed for startups and small to medium-sized businesses experiencing growing usage demands, the Builder Tier is priced at $200 per month. It offers increased resource quotas with monthly limits of 20 million requests and 300GB of bandwidth. Users can scale their projects effectively with additional resources available at $2 per million requests and $0.50 per additional gigabyte of bandwidth.
Tailored for platforms requiring optimal security, support, and performance at an enterprise level, the Enterprise Tier offers a customized pricing model. This tier is designed for large-scale applications with specific and potentially higher resource requirements. Users interested in the Enterprise plan are encouraged to reach out to the service provider directly to discuss their unique needs and obtain a personalized quote.
Please feel free to visit the pricing page, and take advantage of the great features Deno Deploy offers.
The free tier of both the Standard and Sub-hosting model of the service imposes certain limitations on the support and service level offerings. Users on the free tier do not have access to email support, potentially limiting their ability to seek direct assistance for any issues or queries. Also, an Email Support SLA is not provided, indicating that users may not benefit from a guaranteed response time or resolution commitment when using the free tier.
Onboarding support, which is important for assisting users in the initial setup and orientation phase, is not included in the free tier. This means users would need to rely on documentation and community resources without the direct guidance and support typically offered during the onboarding process.
Deno Deploy upholds the following claims in its features:
Deno Deploy dashboard is the definition of simplicity, and it is easy to navigate.
This section provides an overview of all deployed projects.
Positioned under the project header, the search bar is a handy tool for quickly finding specific projects, which is especially useful when managing a large number of deployments.
The “New Playground” button is designed for online testing of deployments. This feature allows users to experiment with deploying applications in a test environment. It is discussed in detail later in the article.
The “New Project” button is used to initiate the creation of new projects. This is where users can set up and configure their applications and deploy them.
At the top right corner, there are links to access user profile settings, documentation, and a feedback mechanism. This provides users with quick access to their account information, official documentation, and a channel to provide feedback or report issues.
There are four different starting options available, each capable of leading to a successful deployment. It’s important to understand that each option holds its significance and steps to deploy. we will explore all the possible starter options available.
Deno Deploy provides various templates for different use cases and web frameworks that you can use as a starting point for your projects. You may want to deploy a starter web application with pre-built templates, using any of Deno’s supported web frameworks.
To do this, we will first log into the Deno Deploy Dashboard where we will be given the option to authenticate with Github.
Authorize Deno and automatically the Dashboard below comes up. Go ahead and select “New project” button.
For the sake of this article, we will be using Fresh. Fill in your chosen name or let the algorithm suggest one for you, and click Create&Deploy button.
This runs:
At this point we should have this dashboard displayed.
To view the deployed template, click on the repository at the top right corner of the Deno Deploy Dashboard, leading you to the associated Git repository. Create a folder of your choice on your computer, navigate into it, and clone the Git repository. Run the Deno project locally with the deno run tasks
command in your terminal.
The local server should start, usually at http://localhost:8000/. Open this address in your browser to witness the page’s functionality.
To assess the speed of Deno Deploy, let’s make some adjustments to the starter code displayed on our Deno Deploy site. Navigate to index.tsx
component, where we will replace the whole code below:
import { useSignal } from "@preact/signals";
import Counter from "../islands/Counter.tsx";
// Define the base64-encoded image as a constant
const logoBase64 = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQ..."; // Replace with your actual base64 data
export default function Home() {
const count = useSignal(3);
return (
<div class="px-4 py-8 mx-auto bg-royal-red">
<div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
{/* Use the base64-encoded image as the background */}
<div
class="my-6"
style={{
backgroundImage: `url(${logoBase64})`,
width: "128px",
height: "128px",
backgroundSize: "cover",
backgroundRepeat: "no-repeat",
}}
alt="the Fresh logo: a sliced lemon dripping with juice"
></div>
<h1 class="text-4xl font-bold">Welcome to Bejamas Deno Deploy Article</h1>
<p class="my-4">
Going Further we will Deploy this application
<code class="mx-2">./routes/index.tsx</code> file, and refresh.
</p>
<Counter count={count} />
</div>
</div>
);
}
After making these tweaks, we should have this:
We can then push the modified code to the Git repository. In our case it is marvelken/denotemplatedeploy1. Observe how fast Deno Deploy updates and reflects these changes in the deployed application. From my perspective, it is fast.
If you already have a Deno app, you can deploy it directly to Deno Deploy. Ensure that your app is compatible with the Deno Deploy environment. To do this, we can quickly create a simple app and push it to GitHub. Afterwards, we navigate to our Deno-Deploy dashboard, create a new project, and select a Git repository of your choice:
Now you can deploy easily. Wait for it completely integrate the repo completely:
When it’s done,
click any of the domains, and your application should be up and running.
A playground is a dynamic, browser-based editor that allows you to write and execute JavaScript code instantly. This interactive environment allows you to experiment, test, and refine your JavaScript code within the confines of your web browser.
Deno Deploy has a playground feature where you can experiment with Deno code and see the results instantly. It’s useful for testing and learning Deno features.
After authorization, select New Playground below.
Select the New Playground, and the page opens as below.
Make a simple edit to it, and click “Save & Deploy”.
Just like that, we have our application deployed.
If you prefer, you can start building your Deno application from scratch without using any templates or existing code.
The installation process is as follows:
Install the Deno runtime and deployctl
utility.
If you do not have Deno installed already, feel free to follow the detailed steps in this article.
Install deployctl
:
deno install --allow-net --unstable https://deno.com/deploy/deployctl.ts
Write and test a Deno program.
Create a simple Deno program, for example, a counter server. Save the following code in a file named server.ts
:
// counter.ts
import { Application, Router } from "https://deno.land/x/oak/mod.ts";
const app = new Application();
const router = new Router();
let count = 0;
router.get("/", (context) => {
context.response.body = `Counter: ${count}`;
});
router.get("/increment", (context) => {
count++;
context.response.body = `Counter incremented! Current count: ${count}`;
});
router.get("/decrement", (context) => {
count--;
context.response.body = `Counter decremented! Current count: ${count}`;
});
app.use(router.routes());
app.use(router.allowedMethods());
console.log("Server is running at http://localhost:8080/");
await app.listen({ port: 8080 });
Test your program locally by running:
deno run --allow-net app.ts
Open your browser and navigate to http://localhost:8080/.
Navigate to the Deno Deploy Dashboard. Create a new project, and you should find an option towards the bottom right of the page to “create a blank project.” Choose this option as we will need this project to complete our deployment process.
After creating the project, make sure to take note of the name that is generated for you. You will need this project name when deploying from the command line, in hpw case the name is dirty-dragonfly-18
. This project name serves as a unique identifier for your deployed application on Deno Deploy. Keep it handy for future deployment.
To use deployctl
to control your Deno Deploy account from the command line, you’ll need an access token. Follow the detailed steps below in order to get this token:
Replace your_access_token
with the actual access token you copied. If you are using Windows Command Prompt, use:
set DENO_DEPLOY_TOKEN=your_access_token
If you are using PowerShell, use:
$env:DENO_DEPLOY_TOKEN = 'your_access_token'
And if you are using Mac/Linux os:
export DENO_DEPLOY_TOKEN=your_access_token_here
Now, your Deno Deploy access token is set as an environment variable and can be used by deployctl
for deployment operations. Keep this token secure, and do not share it publicly.
At this point, you’ve set up your project and obtained an access token. You’re now prepared to deploy your application. In the directory where your server.ts
file is located, execute the following command:
deployctl deploy --project=your_project_name --prod server.ts
After a short period, your counter server will be deployed globally.
Deno Deploy enables users to upload their code, generating a globally deployed server with a provided URL. Leveraging the V8 engine, it executes code swiftly. Deno offers various APIs to enhance this workflow.
One such API is the Broadcast Channel. This feature facilitates secure communication between different browser tabs. Tabs with the same origin can securely exchange messages using this API. In Deno, the Broadcast Channel API extends this capability to communicate between instances rather than tabs.
Another valuable API is the TCP Connections. It allows for connections to databases like MongoDB, MySQL, or Redis over the internet, all within the V8 execution environment. Unlike some popular serverless services, Deno’s capabilities include support for this functionality.
Deno Supports NPM
Deno Deploy has now introduced native support for running npm modules through npm specifiers. This is great news for developers who want to host Node.js apps at the edge without the need for build steps. The ability to leverage npm modules directly can simplify the development and deployment process.
This enhancement allows developers to host Node.js apps at the edge using npm modules, eliminating the need for additional build steps. To illustrate this, let’s go ahead and deploy some functions using the playground:
import express from "npm:express@4";
const app = express();
// Register a route
app.get("/", (req, res) => {
res.send("Hello Bejamas!");
});
// Add a new route
app.get("/greeting", (req, res) => {
res.send("Greetings from Bejamas!");
});
// Run the server!
app.listen(3000);
The code snippet above demonstrates a simple Express app. It begins by importing the Express module from npm using the “express@4” specifier. The application is then set up with two routes: one for the root path (“/”) responding with “Hello Bejamas!” and another for “/greeting” responding with “Greetings from Bejamas!”. This is what we get when this /greeting
runs:
Deno Deploy is a solid solution for developers seeking a fast, secure, and easy-to-use platform for deploying serverless JavaScript applications. Its features, pricing flexibility, and support for various deployment scenarios make it a compelling choice in the serverless world. It is evolving, and with hopes it can approach perfection someday.