---
title: "Getting Started with Cloudflare Workers"
description: "Need a way to publish application that doesn't consume container or VM technology? Learn how to create and publish an application with Cloudflare Workers in this tutorial!"
canonical: "https://adamtheautomator.com/cloudflare-workers/"
---
# Getting Started with Cloudflare Workers
> Need a way to publish application that doesn't consume container or VM technology? Learn how to create and publish an application with Cloudflare Workers in this tutorial!
Source: https://adamtheautomator.com/cloudflare-workers/
---
ATA Learning
Tap to hide
[
ATA Learning
](/)
* [Home](/)
* [Tutorials](/tutorials/)
* [Instructors](/author/)
* [Advertising](/advertising/)
* [Recommended Resources](/resources/)
* [About Adam](/about-adam/)
Search for:
* [](https://twitter.com/adbertram)
* [](https://github.com/Adam-the-Automator)
* [](https://www.linkedin.com/company/adam-the-automator-llc)
* [](/feed/)
# Getting Started with Cloudflare Workers
[Kelvin Kipkorir](https://adamtheautomator.com/author/kelvin-kipkorir/)2 November 20216 min. read
Categories: [Cloud](/category/cloud/)
Tags:[CloudFlare](/tag/cloudflare/)
Table of Contents
* [Prerequisites](#prerequisites)
* [Installing and Configuring Cloudflare Workers Wrangler](#installing-and-configuring-cloudflare-workers-wrangler)
* [Generating a Cloudflare Workers Project](#generating-a-cloudflare-workers-project)
* [Rendering an HTML Page](#rendering-an-html-page)
* [Publishing a Serverless Application](#publishing-a-serverless-application)
Are you looking for a solution to deploy a serverless application on a global platform to run as close as possible to the end-user? Let Cloudflare Workers be that solution. Cloudflare Workers is a global content delivery network provider that focuses on the performance and security of your web infrastructure.
In this tutorial, you will learn how to deploy your first serverless application with Cloudflare Workers. Buckle up as you get started with the Cloudflare Workers experience!
## Prerequisites
This tutorial comprises hands-on demonstrations. Be sure you have the following in place to follow along:
* [Visual Studio Code](https://code.visualstudio.com/download) (VS Code) and this tutorial uses version 1.61.0.
* [Node Package Manager](https://nodejs.org/en/download/package-manager/) installed and this tutorial uses version 16.8.0.
* [Cloudflare Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/get-started/) installed and configured, this tutorial uses 1.17.1-rc.
* A [Cloudflare Workers](https://dash.cloudflare.com/sign-up/workers) account – Note the sub-domain you set upon creating your account.
## **Installing and Configuring Cloudflare Workers Wrangler**
Before you can deploy a serverless application, you need to build one based on a [serverless Framework](https://www.cloudflare.com/learning/serverless/glossary/serverless-and-cloudflare-workers/). How? First, you’ll need to install Wrangler, a command-line tool that manages the building, uploading, and publishing of serverless applications.
1\. Open VS Code from your Desktop, then click on the **Terminal** menu → **New Terminal**, below. Doing so opens a terminal at the bottom part of VS Code’s window.
Accessing Terminal in VS Code
2\. Next, run the `npm` command below to install (`i`) Cloudflare Wrangler modules (`@cloudflare/wrangler`) in the global home directory (`-g`). The `-g` option eliminates permissions issues that may arise while performing installations.
```powershell
npm i @cloudflare/wrangler -g
```
Invoking the `npm i @cloudflare/wrangler -g` command should print out this response.
3\. Run the command below to confirm you’ve completely installed Wrangler. This command prints out the version of Wrangler installed in your machine.
```powershell
wrangler --version
```
Checking Wrangler Version Installed
4\. Now, run the command below to authenticate your Wrangler installation to Cloudflare Workers. The command opens the Cloudflare login page in your browser.
```powershell
wrangler login
```
5\. Log in to your Cloudflare Workers account, and Cloudflare will provide you with an API token to authenticate the `wrangler` connection to your Cloudflare account. consent.
Running the `Wrangler login` Command prompts you with a Cloudflare Login Page for authentication
6\. Finally, run the command below to print out your credentials, which confirms you’ve successfully configured Cloudflare Workers.
```javascript
wrangler whoami
```
Below, you can see the command prints out a message, which says you are logged in with a Global API key associated with your email, account name, and account ID.
Note the **Account Name** and **Account ID**, as you’ll use them as credentials later on to publish the project.
Confirming Cloudflare Workers is Configured Successfully
## **Generating a Cloudflare Workers Project**
Now that you’ve set up Cloudflare Workers let’s generate your new Cloudflare Workers project. Cloudflare Workers has [Starter templates](https://developers.cloudflare.com/workers/get-started/quickstarts) that contain reusable code snippets built for developers to get started with when building with Workers.
For this demo, you will use the starter template, which allows you to build a JavaScript-based project on top of Cloudflare Workers.
> _The worker template supports building projects with [webpack](https://developers.cloudflare.com/workers/wrangler/migration/eject-webpack/) since it offers multiple deployment targets that you can set in your webpack configuration. Webpack simplifies the process of adding and managing npm dependencies in your project._
1\. Run the command below to create a folder called `new-worker`, which stores the important worker template’s project files pulled from GitHub `https://github.com/cloudflare/worker-template`.
```bash
# Creates a new folder called new-worker
# Pulls the starter template from GitHub,
# and places the important project files in the new-worker folder.
wrangler generate new-worker https://github.com/cloudflare/worker-template
# Change working directory to the new-worker folder
cd new-worker
```
Below, you can see the project’s file structure inside the _~/new-worker_ folder.
Listing Files and Sub-directories of the new-worker Folder
2\. Open the _~/new-worker/index.js_ file, which acts as an entry point to manage the application’s modules. Inside the file are [Worker Runtime APIs](https://developers.cloudflare.com/workers/runtime-apis), which are functions running in the browser background to intercept and control how Cloudflare handles network requests from you.
The code below is generated by the starter template, which handles the [fetch event](https://developers.cloudflare.com/workers/runtime-apis/fetch-event) then prints the `Hello World!` message by default as a response. The fetch event is the incoming requests from a client to your application,
```javascript
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
// this script tells FetchEvent worker how to respond to any incoming fetch request.
// the Worker script then returns a response to the user.
})
async function handleRequest(request)
// this function takes an event and context object as input and returns a string.
// the async function takes request provided as the parameter.
// The Worker then receives HTTP requests and responds automatically.
{
// Prints a plain text that says Hello World!
return new Response('Hello World!', {
headers: { 'content-type': 'text/plain' },
})
}
```
3\. Finally, run the command below to test that the `return new Response` function in the _index.js_ file prints out the expected response.
```bash
wrangler preview
```
After building your application, the command automatically opens up a new tab on your browser, as shown below, and displays the response.
Testing if the `preview` Function Works
## **Rendering an HTML Page**
Now that the basics of creating a function are out of the way let’s create an HTML template that mimics and displays as a web page instead of just plain text.
1\. Create a new file with a name you prefer in the working directory, but for this example, the file is named _worker.js. C_opy/paste the code below to the _worker.js_ file.
The code below creates a worker that mimics a web page that prints the “Hello there 👋! You’re connected to Cloudflare Workers” message.
```javascript
const worker = `
//html code to create the new webpage.
Hello!
Hello there 👋! You're connected to Cloudflare Workers