Get started with the CLI
Set up and deploy your first Worker with Wrangler, the Cloudflare Developer Platform CLI.
This guide will instruct you through setting up and deploying your first Worker.
Prerequisites
- Sign up for a Cloudflare account.
- Install
npm
. - Install
Node.js
.
Node.js version manager
1. Create a new Worker project
C3 (create-cloudflare-cli
) is a command-line tool designed to help you set up and deploy new applications to Cloudflare.
Open a terminal window and run C3 to create your Worker project:
$ npm create cloudflare
$ yarn create cloudflare
This will prompt you to install the create-cloudflare
package, and lead you through setup.
For this guide:
- For the
In which directory do you want to create your application?
prompt, entermy-first-worker
. - For the
What type of application do you want to create?
prompt, choose"Hello World" Worker
. - For the
Do you want to use TypeScript?
prompt, chooseNo
. - For the
Do you want to use git for version control?
prompt, chooseYes
. - For the
Do you want to deploy your application?
prompt, chooseNo
.
Now, you have a new project set up. Move into that project folder.
$ cd my-first-worker
What files did C3 create?
In your project directory, C3 will have generated the following:
wrangler.toml
: Your Wrangler configuration file.index.js
(in/src
): A minimal'Hello World!'
Worker written in ES module syntax.package.json
: A minimal Node dependencies configuration file.package-lock.json
: Refer tonpm
documentation onpackage-lock.json
.node_modules
: Refer tonpm
documentationnode_modules
.
What if I already have a project in a git repository?
In addition to creating new projects from C3 templates, C3 also supports creating new projects from Git repositories. To create a new project from a Git repository, open your terminal and run:
$ npm create cloudflare@latest -- --template <SOURCE>
<SOURCE>
may be any of the following:
user/repo
(GitHub)git@github.com:user/repo
https://github.com/user/repo
user/repo/some-template
(subdirectories)user/repo#canary
(branches)user/repo#1234abcd
(commit hash)bitbucket:user/repo
(Bitbucket)gitlab:user/repo
(GitLab)
At a minimum, template folders must contain the following:
package.json
wrangler.toml
src/
containing a worker script referenced fromwrangler.toml
2. Develop with Wrangler CLI
The Workers command-line interface, Wrangler, allows you to create, test, and deploy your Workers projects. C3 will install Wrangler in projects by default.
After you have created your first Worker, run the wrangler dev
command in the project directory to start a local server for developing your Worker. This will allow you to preview your Worker locally during development.
$ npx wrangler dev
If you have not used Wrangler before, it will try to open your web browser to login with your Cloudflare account.
Go to http://localhost:8787 to view your Worker.Browser issues?
wrangler login
documentation.
3. Write code
With your new project generated and running, you can begin to write and edit your code.
Find the src/index.js
file. index.js
will be populated with the code below:
Original index.jsexport default { async fetch(request, env, ctx) { return new Response("Hello World!"); },
};
Code explanation
This code block consists of a few different parts.
Updated index.jsexport default { async fetch(request, env, ctx) { return new Response("Hello World!"); },
};
export default
is JavaScript syntax required for defining JavaScript modules. Your Worker has to have a default export of an object, with properties corresponding to the events your Worker should handle.
index.jsexport default { async fetch(request, env, ctx) { return new Response("Hello World!"); },
};
This fetch()
handler will be called when your Worker receives an HTTP request. You can define additional event handlers in the exported object to respond to different types of events. For example, add a scheduled()
handler to respond to Worker invocations via a Cron Trigger.
Additionally, the fetch
handler will always be passed three parameters: request
, env
and context
.
index.jsexport default { async fetch(request, env, ctx) { return new Response("Hello World!"); },
};
The Workers runtime expects fetch
handlers to return a Response
object or a Promise which resolves with a Response
object. In this example, you will return a new Response
with the string "Hello World!"
.
Replace the content in your current index.js
file with the content below, which changes the text output.
index.jsexport default { async fetch(request, env, ctx) { return new Response("Hello Worker!"); },
};
Then, save the file and reload the page. Your Worker’s output will have changed to the new text. If the output for your Worker does not change, make sure that:No visible changes?
index.js
.wrangler dev
running.
4. Deploy your project
Deploy your Worker via Wrangler to a *.workers.dev
subdomain or a Custom Domain.
$ npx wrangler deploy
If you have not configured any subdomain or domain, Wrangler will prompt you during the publish process to set one up.
Preview your Worker at <YOUR_WORKER>.<YOUR_SUBDOMAIN>.workers.dev
.Encountering errors?
*.workers.dev
subdomain for the first time, you may see 523
errors while DNS is propagating. These errors should resolve themselves after a minute or so.
Next steps
To do more:
- Review our Examples and Tutorials for inspiration.
- Set up bindings to allow your Worker to interact with other resources and unlock new functionality.
- Learn how to test and debug your Workers.
- Read about Workers limits and pricing.