In this article, I will walk you through the process of getting started with Cloudflare’s new worker service. It is a simple series of steps that should be completed in less than 10 minutes. By following these instructions, your hosting provider can direct traffic to your website via an IP address managed by Cloudflare Worker instead of using its own servers.,
Cloudflare is a free, global content delivery network (CDN) that improves website performance and security. Cloudflare Workers is one of the many features offered by Cloudflare and allows users to create their own worker. This article will help you get started with your new cloudflare worker.
Are you seeking for a way to launch a serverless app on a worldwide platform that runs as near to the end user as possible? Allow Cloudflare Workers to be the answer. Cloudflare Workers is a worldwide content delivery network that focuses on your web infrastructure’s performance and security.
In this article, you’ll learn how to use Cloudflare Workers to launch your first serverless application. Hold on on as you begin your Cloudflare Workers adventure!
Prerequisites
This seminar includes practical examples. To follow along, make sure you have the following items:
Cloudflare Workers Wrangler Installation and Configuration
You must first create a serverless application based on a serverless Framework before you can deploy it. How? You’ll need to install Wrangler first, which is a command-line tool for creating, uploading, and publishing serverless apps.
1. Launch VS Code from your desktop, then choose New Terminal from the Terminal menu. This brings up a terminal at the bottom of the VS Code window.
Using Terminal in Visual Studio Code
2. Then, in the global home directory, use the npm command to install I Cloudflare Wrangler modules (@cloudflare/wrangler) (-g). The -g option solves permissions problems that might occur during installation.
@cloudflare/wrangler npm install -g
Invoking the @cloudflare/wrangler npm install -g command should print out this response.
3. Run the command below to verify that Wrangler is fully installed. This command displays the Wrangler version installed on your computer.
Wrangler Version Installed Check
4. Now, to verify your Wrangler installation with Cloudflare Workers, execute the command below. In your browser, the command opens the Cloudflare login page.
5. Log on to your Cloudflare Workers account, and Cloudflare will provide you an API token that you can use to verify the wrangler connection to your Cloudflare account. consent.
When you run the Wrangler login command, you’ll be prompted to login to Cloudflare.
6. Finally, execute the command below to print your credentials, confirming that Cloudflare Workers has been correctly established.
The program outputs a message stating that you are logged in using a Global API key connected with your email, account name, and account ID, as seen below.
Keep track of the Account Name and Account ID since you’ll need them later to publish the project.
Confirming that Cloudflare Workers have been successfully configured
Cloudflare Workers Project Creation
Let’s create your new Cloudflare Workers project now that you’ve set up Cloudflare Workers. Starter templates in Cloudflare Workers include reusable code snippets to help developers get started working using Workers.
You’ll utilize the beginning template to create a JavaScript-based project on top of Cloudflare Workers for this demonstration.
Because it enables various deployment targets that you may configure in your webpack configuration, the worker template facilitates developing projects with webpack. Webpack makes adding and managing npm dependencies in your project a breeze.
1. Run the command below to create a new-worker folder that contains the crucial worker template project files that were taken from GitHub https://github.com/cloudflare/worker-template.
# New folder new-worker is created. # # Places the relevant project files in the new-worker folder after pulling the beginning template from GitHub. https://github.com/cloudflare/worker-template wrangler create new-worker # Change to the new-worker folder in the working directory cd new-worker
Inside the /new-worker folder, you can view the project’s file structure.
Listing the new-worker Folder’s files and subdirectories
2. Open the /new-worker/index.js file, which serves as the application’s module management entry point. Worker Runtime APIs are routines that run in the background of the browser to intercept and control how Cloudflare processes network requests from you.
The starting template generates the code below, which handles the fetch event and defaults to printing the Hello World! message as a response. The fetch event handles incoming client requests to your application.
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, execute the command below to verify that the index.js file’s return new Result function outputs the desired response.
Following the completion of your application, the command opens a new tab in your browser and presents the answer, as seen below.
Checking to see whether the preview feature works
HTML Page Rendering
Let’s develop an HTML template that replicates and shows as a web page instead of simply plain text now that we’ve covered the fundamentals of establishing a function.
1. In the working directory, create a new file with whatever name you choose, but for this example, the file will be called worker.js. Copy and paste the following code into the worker.js file.
The following code produces a worker that looks like a web page and writes “Hello there!” The notification “You’re linked to Cloudflare Workers” appears.
const worker = ` //html code to create the new webpage. <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8″ /> <meta http-equiv=”x-ua-compatible” content=”ie=edge” /> <meta name=”viewport” content=”width=device-width, initial-scale=1″ /> <title>Hello!</title> <link rel=”stylesheet” href=”https://unpkg.com/modern-css-reset/dist/reset.min.css” /> <style> // styling for the new web page. body { background: #eee; display: flex; align-items: center; justify-content: center; min-height: 100vh; font-family: sans-serif; } div.container { background: #fff; border-radius: 1rem; padding: 4rem; } </style> </head> <body> <div class=”container”> <h1> Hello there 👋! You’re connected to Cloudflare Workers </h1> </div> </body> </html> ` //This grants access to index.js file when the user calls the worker function. export default worker
2. Open the /new-worker/index.js file and replace the content with the following code.
The code below accesses the worker function from the worker.js file you built in step two from the index.js file.
import worker from ‘./worker’ // This imports the worker file, goes ahead to take the HTML you created earlier, // and make it your new response. addEventListener(‘fetch’, event => { event.respondWith(handleRequest(event.request)) //the addEventListener function listens for a fetch request from the worker //the event.respondWith() method allows you to provide a response to the fetch. }) async function handleRequest(request) { return new Response(worker, { headers: { ‘content-type’: ‘text/html’ }, // The async function recieves the new request and // returns new custom response of text/html type. }) }
3. Finally, reload your browser to notice that the body is now shown as an HTML page.
More significantly, the worker script (worker.js) responds with the information you expected, namely the Hello there! You’ve received a message from Cloudflare Workers.
HTML Page Rendering
Serverless Application Publication
Since you’ve confirmed that HTML Page Rendering works on your local machine, it’s finally time to deploy a serverless application. But first, you’ll configure the ~/new-worker/wrangler.toml file to define the application’s settings and parameters.
How to Use Cloudflare Pages to Deploy a Website
Cloudflare does not use container or virtual machine technologies, unlike other cloud computing services. V8: Isolates, a JavaScript engine designed for Google Chrome, is used instead by Cloudflare Workers.
1. Open the file /new-worker/wrangler.toml and make the following modifications to the content:
- Change the project type to Webpack from JavaScript. This modification enables the project to import and manage the deployment of newly-bundled Cloudflare Workers scripts and dependencies.
- Put the Account ID you noted in step 6 of the “Cloudflare Workers Wrangler Installation and Configuration CLI” section to the account_id placeholder.
- The latter two parameters (route and zone id) are only relevant to your project’s deployment. They inform Wrangler that you wish to deploy a serverless function to a certain zoneID and subdomain.
For the time being, keep these blank since you will not be using the zoneID functionality in your project.
account id = “81f630695fef040a80b2e2f8e4f5882d” workers dev = true route = “” zone id = “” name = “new-worker” type = “webpack” account id = “81f630695fef040a80b2e2f8e
2. Use the dev command, a built-in worker script in Wrangler, to see how your project will appear in production. The command creates a new tab in your browser and displays the response you specified in the /new-worker/worker.js file.
3. Now use the wrangler publish command to build, upload, and publish your function on workers.dev, the domain you established when you joined up for Cloudflare.
The following is the updated URL to access your application. Substitute project-name for the name of your project, and sub-domain for the subdomain you picked when you set up your Cloudflare account.
project-name.sub-domain.workers.dev new-worker.kevin-cfworker.workers.dev, for example
To visit your serverless application in the production environment, open the URL in your browser as shown below.
Below, you can see the page looks the same as it did locally in step three of the “HTML Page Rendering” section. If you see the Hello there 👋! You’re connected to Cloudflare Workers message on your browser, and then you’re all set!
In the Production Environment, Using the Serverless Application
You’ve constructed and deployed a serverless application to Cloudflare Workers in this tutorial. You’ve learnt how to adjust the application settings and answers to your liking during the development process.
Why not look at installing VPN tunneling with Cloudflare WARP client to safeguard end-user network traffic inside the network as a further step?
Getting Started with Cloudflare Warp is a related article.
The “cloudflare workers python” is a simple tutorial that walks you through the process of getting started with Cloudflare Workers. The tutorial also includes examples and explanations for how to use the tool.
Related Tags
- cloudflare workers examples
- cloudflare workers routes
- cloudflare workers github
- cloudflare workers fetch
- cloudflare workers cold start
