Building and deploying applications no longer has to mean managing servers, configuring infrastructure, or worrying about scaling from day one. Cloudflare Workers gives developers a faster way to run serverless code closer to users, making it useful for APIs, redirects, caching, authentication, and lightweight backend logic.<\/p>\n\n\n\n
In this step-by-step Cloudflare Workers tutorial, you will learn how to create your first Worker, run it locally, add API routes, use environment variables, connect KV storage, and deploy it with Wrangler CLI. Read the full blog to understand how Cloudflare Workers can help you build faster, simpler, and more scalable serverless applications.<\/p>\n\n\n\n
TL;DR<\/em><\/p>\n\n\n\n Cloudflare Workers are useful when you want fast backend execution without server setup. They are commonly used for:<\/p>\n\n\n\n Cloudflare Workers can connect with platform resources through bindings. Bindings allow Workers to interact with tools such as KV, D1, R2, Durable Objects, Queues, AI, and environment variables.<\/p>\n\n\n\n Before starting this Cloudflare Workers tutorial, you need:<\/p>\n\n\n\n Wrangler, the Cloudflare Developer Platform CLI, is used to create, test, and deploy Worker projects. Cloudflare recommends installing Wrangler locally inside each project.<\/p>\n\n\n\n Open your terminal and run the following command:<\/p>\n\n\n\n Cloudflare\u2019s official setup flow uses C3, also called create-cloudflare-cli, to create new Worker applications. During setup, choose the Hello World example, Worker only template, JavaScript, Git version control<\/a>, and no immediate deployment.<\/p>\n\n\n\n Move into the project folder:<\/p>\n\n\n\n The generated project usually includes:<\/p>\n\n\n\n The wrangler.jsonc file stores your Worker configuration. The src\/index.js file contains the main Worker code.<\/p>\n\n\n\n Open src\/index.js. You will see a basic Worker like this:<\/p>\n\n\n\n The fetch() handler runs whenever your Worker receives an HTTP request. Cloudflare expects the handler to return a Response object or a Promise that resolves to a Response object.<\/p>\n\n\n\n Here is what each part does:<\/p>\n\n\n\n Build job-ready full-stack development skills with HCL GUVI\u2019s <\/em>Full Stack Development Course<\/em><\/a>. Learn frontend development, backend development, APIs, deployment workflows, and real-world web application development through structured, hands-on training designed for aspiring full-stack developers.<\/em><\/p>\n\n\n\n Start the local development server:<\/p>\n\n\n\n Wrangler starts a local preview server. Cloudflare\u2019s guide uses http:\/\/localhost:8787 as the local Worker URL.<\/p>\n\n\n\n Open this URL in your browser:<\/p>\n\n\n\n You should see:<\/p>\n\n\n\n This confirms that your Cloudflare Worker is running locally.<\/p>\n\n\n\n Now replace the code inside src\/index.js with this example:<\/p>\n\n\n\n Now test these URLs:<\/p>\n\n\n\n The \/api\/status route returns a JSON<\/a> response. This is the simplest way to build a serverless API with Cloudflare Workers.<\/p>\n\n\n\n Response headers help improve API clarity, security, and caching. Update the home route like this:<\/p>\n\n\n\n The content-type header tells the browser how to read the response. The cache-control header tells caches how long the response can be stored.<\/p>\n\n\n\n Environment variables help store application configuration. Cloudflare supports environment variables through Wrangler configuration files and dashboard settings. Text and JSON values are available through the env parameter in the Worker\u2019s fetch handler.<\/p>\n\n\n\n Open wrangler.jsonc and add a vars section:<\/p>\n\n\n\n Now update src\/index.js:<\/p>\n\n\n\n Run the Worker again:<\/p>\n\n\n\n You should see the environment variable in the browser response.<\/p>\n\n\n\n Plain environment variables should not store sensitive information. Cloudflare recommends using secrets for passwords, API keys, and tokens because secret values are hidden after they are defined.<\/p>\n\n\n\n For local development, create a .dev.vars file:<\/p>\n\n\n\n Add this file to .gitignore:<\/p>\n\n\n\n Then access the secret in your Worker:<\/p>\n\n\n\n Never commit .dev.vars or .env files to Git.<\/p>\n\n\n\n Deploy your Worker with:<\/p>\n\n\n\n Cloudflare\u2019s official guide uses npx wrangler deploy to publish the Worker to a workers.dev subdomain or a custom domain.<\/p>\n\n\n\n After deployment, your Worker will be available at a URL similar to:<\/p>\n\n\n\n Test your deployed API<\/a>:<\/p>\n\n\n\n Production Workers should ideally run on a Worker route or custom domain instead of only a workers.dev URL. Cloudflare recommends custom domains when the Worker is your application\u2019s origin server.<\/p>\n\n\n\n You can configure a custom domain in wrangler.jsonc like this:<\/p>\n\n\n\n Cloudflare\u2019s custom domain configuration uses custom_domain: true under the routes array.<\/p>\n\n\n\n Deploy again:<\/p>\n\n\n\n Your Worker can now serve traffic from the custom domain.<\/p>\n\n\n\n Workers KV is Cloudflare\u2019s key-value storage system. It is useful for high-read data such as cached API responses, user preferences, and configuration values. Cloudflare describes Workers KV as global, low-latency key-value storage for dynamic APIs and websites.<\/p>\n\n\n\n Add a KV binding inside wrangler.jsonc:<\/p>\n\n\n\n Cloudflare now supports automatic provisioning for KV, R2, and D1 bindings when resource IDs are not added to the configuration file. Wrangler can create resources during development and deployment.<\/p>\n\n\n\n Example Worker using KV:<\/p>\n\n\n\n Test locally:<\/p>\n\n\n\n Then visit:<\/p>\n\n\n\n Open package.json and add helpful scripts:<\/p>\n\n\n\n Now you can run:<\/p>\n\n\n\n Wrangler commands can be added as package scripts for easier development and deployment.<\/p>\n\n\n\n Check that:<\/p>\n\n\n\n Check that:<\/p>\n\n\n\n Check that:<\/p>\n\n\n\n Check that:<\/p>\n\n\n\n Workers are best for focused request handling. Keep route logic clean and move reusable logic into separate files.<\/p>\n\n\n\n API keys, tokens, passwords, and private credentials should never sit inside source code or plain config files.<\/p>\n\n\n\n Use proper status codes such as 200, 400, 401, 404, and 500. Clear responses make debugging easier.<\/p>\n\n\n\n Use caching for public data. Avoid caching private user data unless the logic is safe and intentional.<\/p>\n\n\n\n Bindings provide a cleaner way to connect Workers with Cloudflare platform resources such as KV, R2, D1, Queues, and AI.<\/p>\n\n\n\n Run npx wrangler dev before every deployment. Local testing helps catch routing, syntax, and environment issues early.<\/p>\n\n\n\n Here is the final beginner-friendly Worker:<\/p>\n\n\n\n Cloudflare Workers are a practical way to build fast serverless APIs and lightweight backend logic without managing infrastructure. In this Cloudflare Workers tutorial, you created a Worker project, ran it locally, added routes, used environment variables, connected KV storage, and deployed the project with Wrangler.<\/p>\n\n\n\n This workflow gives you a strong foundation for building serverless APIs, edge middleware, redirects, caching layers, and full-stack applications on Cloudflare.<\/p>\n\n\n\n Cloudflare Workers are used to build serverless APIs, redirects, middleware, caching logic, authentication flows, scheduled tasks, and backend functions that run on Cloudflare\u2019s global network.<\/p>\n\n<\/div>\n<\/div>\n Yes. Beginners can start with a simple JavaScript Worker, test it locally with Wrangler, and deploy it with one command.<\/p>\n\n<\/div>\n<\/div>\n Wrangler is Cloudflare\u2019s command-line tool for creating, testing, configuring, and deploying Worker projects.<\/p>\n\n<\/div>\n<\/div>\n Yes. Workers can connect with Cloudflare D1, KV, R2, Durable Objects, Hyperdrive, and external APIs through supported bindings and integrations.<\/p>\n\n<\/div>\n<\/div>\n Cloudflare Workers has a free starting option, but limits and pricing can change. Always review the latest Cloudflare pricing page before production deployment.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":" Building and deploying applications no longer has to mean managing servers, configuring infrastructure, or worrying about scaling from day one. Cloudflare Workers gives developers a faster way to run serverless code closer to users, making it useful for APIs, redirects, caching, authentication, and lightweight backend logic. In this step-by-step Cloudflare Workers tutorial, you will learn […]<\/p>\n","protected":false},"author":60,"featured_media":122636,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[294],"tags":[],"views":"38","authorinfo":{"name":"Vaishali","url":"https:\/\/www.guvi.in\/blog\/author\/vaishali\/"},"thumbnailURL":"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2026\/07\/Cloudflare-Workers-300x116.webp","_links":{"self":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/121291"}],"collection":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/users\/60"}],"replies":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/comments?post=121291"}],"version-history":[{"count":4,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/121291\/revisions"}],"predecessor-version":[{"id":122637,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/121291\/revisions\/122637"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media\/122636"}],"wp:attachment":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media?parent=121291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/categories?post=121291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/tags?post=121291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
What Are Cloudflare Workers?<\/strong><\/h2>\n\n\n\n
\n
Prerequisites<\/strong><\/h2>\n\n\n\n
\n
Step-by-Step Guide to Build and Deploy Your First Cloudflare Worker<\/strong><\/h2>\n\n\n\n
Step 1: Create a New Cloudflare Worker Project<\/h3>\n\n\n\n
npm create cloudflare@latest -- my-first-worker\n<\/code><\/pre>\n\n\n\ncd my-first-worker\n<\/code><\/pre>\n\n\n\nmy-first-worker\/\n\u2502\n\u251c\u2500\u2500 src\/\n\u2502 \u2514\u2500\u2500 index.js\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 package-lock.json\n\u251c\u2500\u2500 wrangler.jsonc\n\u2514\u2500\u2500 node_modules\/\n<\/code><\/pre>\n\n\n\nStep 2: Understand the Default Worker Code<\/h3>\n\n\n\n
export default {\n async fetch(request, env, ctx) {\n return new Response(\"Hello World!\");\n },\n};\n<\/code><\/pre>\n\n\n\n\n
Step 3: Run the Worker Locally<\/h3>\n\n\n\n
npx wrangler dev\n<\/code><\/pre>\n\n\n\nhttp://localhost:8787\n<\/code><\/pre>\n\n\n\nHello World!\n<\/code><\/pre>\n\n\n\nStep 4: Create a Simple API Route<\/h3>\n\n\n\n
export default {\n async fetch(request, env, ctx) {\n const url = new URL(request.url);\n\n if (url.pathname === \"\/\") {\n return new Response(\"Welcome to my Cloudflare Worker!\");\n }\n\n if (url.pathname === \"\/api\/status\") {\n return Response.json({\n status: \"success\",\n message: \"Cloudflare Worker is running\",\n timestamp: new Date().toISOString(),\n });\n }\n\n return new Response(\"Page not found\", { status: 404 });\n },\n};\n<\/code><\/pre>\n\n\n\nhttp://localhost:8787\n\nhttp:\/\/localhost:8787\/api\/status\n<\/code><\/pre>\n\n\n\nStep 5: Add Response Headers<\/h3>\n\n\n\n
if (url.pathname === \"\/\") {\n return new Response(\"Welcome to my Cloudflare Worker!\", {\n headers: {\n \"content-type\": \"text\/plain\",\n \"cache-control\": \"public, max-age=60\",\n },\n });\n}\n<\/code><\/pre>\n\n\n\nStep 6: Add Environment Variables<\/h3>\n\n\n\n
{\n \"$schema\": \".\/node_modules\/wrangler\/config-schema.json\",\n \"name\": \"my-first-worker\",\n \"main\": \"src\/index.js\",\n \"compatibility_date\": \"2026-07-03\",\n \"vars\": {\n \"APP_NAME\": \"Cloudflare Worker Demo\"\n }\n}\n<\/code><\/pre>\n\n\n\nexport default {\n async fetch(request, env, ctx) {\n const url = new URL(request.url);\n\n if (url.pathname === \"\/\") {\n return new Response(`Welcome to ${env.APP_NAME}`);\n }\n\n return new Response(\"Page not found\", { status: 404 });\n },\n};\n<\/code><\/pre>\n\n\n\nnpx wrangler dev\n<\/code><\/pre>\n\n\n\nStep 7: Use Secrets for Sensitive Values<\/h3>\n\n\n\n
API_TOKEN=\"your-local-api-token\"\n<\/code><\/pre>\n\n\n\n.dev.vars\n.env\n<\/code><\/pre>\n\n\n\nexport default {\n async fetch(request, env, ctx) {\n return new Response(`Token exists: ${Boolean(env.API_TOKEN)}`);\n },\n};\n<\/code><\/pre>\n\n\n\nStep 8: Deploy the Cloudflare Worker<\/h3>\n\n\n\n
npx wrangler deploy\n<\/code><\/pre>\n\n\n\nhttps://my-first-worker.your-subdomain.workers.dev\n<\/code><\/pre>\n\n\n\nhttps://my-first-worker.your-subdomain.workers.dev\/api\/status\n<\/code><\/pre>\n\n\n\nStep 9: Connect a Custom Domain<\/h3>\n\n\n\n
{\n \"routes\": [\n {\n \"pattern\": \"api.example.com\",\n \"custom_domain\": true\n }\n ]\n}\n<\/code><\/pre>\n\n\n\nnpx wrangler deploy\n<\/code><\/pre>\n\n\n\nStep 10: Add KV Storage to Your Worker<\/h3>\n\n\n\n
{\n \"kv_namespaces\": [\n {\n \"binding\": \"MY_KV\"\n }\n ]\n}\n<\/code><\/pre>\n\n\n\nexport default {\n async fetch(request, env, ctx) {\n const url = new URL(request.url);\n\n if (url.pathname === \"\/save\") {\n await env.MY_KV.put(\"message\", \"Hello from KV\");\n return new Response(\"Saved to KV\");\n }\n\n if (url.pathname === \"\/read\") {\n const message = await env.MY_KV.get(\"message\");\n return new Response(message || \"No message found\");\n }\n\n return new Response(\"Try \/save or \/read\");\n },\n};\n<\/code><\/pre>\n\n\n\nnpx wrangler dev\n<\/code><\/pre>\n\n\n\nhttp://localhost:8787\/save\n\nhttp:\/\/localhost:8787\/read\n<\/code><\/pre>\n\n\n\nStep 11: Add Useful npm Scripts<\/h3>\n\n\n\n
{\n \"scripts\": {\n \"dev\": \"wrangler dev\",\n \"deploy\": \"wrangler deploy\"\n }\n}\n<\/code><\/pre>\n\n\n\nnpm run dev\n\nnpm run deploy\n<\/code><\/pre>\n\n\n\nStep 12: Debug<\/strong><\/a> Common Cloudflare Workers Issues<\/h3>\n\n\n\n
Worker Not Updating Locally<\/h4>\n\n\n\n
\n
Deployment Fails<\/h4>\n\n\n\n
\n
Environment Variable Not Found<\/h4>\n\n\n\n
\n
Custom Domain Not Working<\/h4>\n\n\n\n
\n
Cloudflare Workers Best Practices<\/h2>\n\n\n\n
1. Keep Worker Logic Small<\/h3>\n\n\n\n
2. Use Secrets for Sensitive Data<\/h3>\n\n\n\n
3. Add Clear API Responses<\/h3>\n\n\n\n
4. Cache Carefully<\/h3>\n\n\n\n
5. Use Bindings Instead of External REST Calls<\/h3>\n\n\n\n
6. Test Locally Before Deploying<\/h3>\n\n\n\n
Final Cloudflare Worker Code Example<\/h2>\n\n\n\n
export default {\n async fetch(request, env, ctx) {\n const url = new URL(request.url);\n\n if (url.pathname === \"\/\") {\n return new Response(`Welcome to ${env.APP_NAME || \"Cloudflare Workers\"}`, {\n headers: {\n \"content-type\": \"text\/plain\",\n },\n });\n }\n\n if (url.pathname === \"\/api\/status\") {\n return Response.json({\n status: \"success\",\n app: env.APP_NAME || \"Cloudflare Workers\",\n message: \"Your Worker API is live\",\n timestamp: new Date().toISOString(),\n });\n }\n\n if (url.pathname === \"\/save\") {\n await env.MY_KV.put(\"message\", \"Hello from Cloudflare KV\");\n return new Response(\"Message saved\");\n }\n\n if (url.pathname === \"\/read\") {\n const message = await env.MY_KV.get(\"message\");\n return new Response(message || \"No message found\");\n }\n\n return new Response(\"Route not found\", {\n status: 404,\n });\n },\n};\n<\/code><\/pre>\n\n\n\nConclusion<\/strong><\/h2>\n\n\n\n
FAQs<\/strong><\/h2>\n\n\n
What is Cloudflare Workers used for?<\/strong><\/h3>\n
Is Cloudflare Workers good for beginners?<\/strong><\/h3>\n
What is Wrangler in Cloudflare Workers?<\/strong><\/h3>\n
Can Cloudflare Workers connect to a database?<\/strong><\/h3>\n
Can I deploy Cloudflare Workers for free?<\/strong><\/h3>\n