Cloudflare Wrangler is a
CLI tool designed for folks who are interested in using Cloudflare Workers. quote from Github Repository - https://github.com/cloudflare/wrangler
Cloudflare Workers is a service, where you can host javascript code, which will run when you open it's URL. There is no access to filesystem or direct connections to databases, but you can check examples in official docs to decide if you need that or not.
First of all - Repl.it is online IDE, that works in your browser, where you can try something without installing required software on local device. Every project runs inside docker container and has all most required packages ready-to-use, so you just write and run code. Also Repl has built-in version control.
On the other side, some packages doesn't has prebuilt binaries for some platforms, so sometimes even if you want - you can't try something because of that.
In this example, wrangler doesn't has binaries for ARM based linux and Windows 32-bit.
Okay, you have no ability to run that on your device, want to use without installation on local machine or just want to try.
We need install wrangler inside project. Official docs says that we can install it via NPM:
npm install -g @cloudflare/wrangler
If you try this, You will fail, because Repl.it doesn't provide root access inside containers and we're just a simple user.
Let's fix that:
- Look at left side: bit more left that project files, you will see typical icon of VCS and Settings. Cube between them is package manager tab, open it.
- Type
@cloudflare/wranglerinto search field - First result should be what we need (at Feb 2021 actual version was 1.13.0). Choose it
- We'll se info about package. If you don't see green button of adding this to project, just expand this section for some time. The button is right after package name (green circle with white plus)
- Go back to files section (typical file icon above VCS icon)
Look at right side. You should see there some output after wrangler installation, i.e. next:
node v12.16.1
Repl.it: Updating package configuration
--> npm init -y
Wrote to /home/runner/Cloudflare-Wrangler/package.json:
{
"name": "Cloudflare-Wrangler",
"version": "1.0.0",
"description": "Cloudflare Wrangler is a",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
--> npm install @cloudflare/wrangler
> @cloudflare/wrangler@1.13.0 postinstall /home/runner/Cloudflare-Wrangler/node_modules/@cloudflare/wrangler
> node ./install-wrangler.js
Downloading release https://workers.cloudflare.com/get-npm-wrangler-binary/1.13.0/x86_64-unknown-linux-musl
wrangler has been installed!
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN Cloudflare-Wrangler@1.0.0 No repository field.
+ @cloudflare/wrangler@1.13.0
added 34 packages from 21 contributors and audited 34 packages in 5.474s
2 packages are looking for funding
run `npm fund` for details
found 1 high severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
On top of this section you'll see two tabs: Console and Shell
Offtop: Console tab provide language interpreter when possible. At least it's correct for such languages as Javascript and Python, may be something other. In another languages there will be shell only. Also any Repl.it output will be shown here. Shell tab was added recently, there is always bash shell for your needs
Until we create project we need to make an allias for wrangler.
You can navigate filesystem through Shell tab to find it's binary, or use next alias:
alias wrangler="node /home/runner/cloudflare-workers-template/node_modules/@cloudflare/wrangler/run-wrangler.js"
Now set environment USER to "runner"
export USER=runner
Otherwise you'll get next error:
Installing cargo-generate v0.5.0...
Creating project called `hello-world`...
Error: could not determine the current user, please set $USER
Error: tried running command:
/home/runner/.cache/.wrangler/cargo-generate-0.5.0/cargo-generate generate --git https://github.com/cloudflare/worker-template --name hello-world --force
exited with exit code: 1
And now we can generate worker project
wrangler generate hello-world
And now we got final advice about requirements
Done! New project created /home/runner/cloudflare-workers-template/hello-world
You will need to update the following fields in the created wrangler.toml file before continuing:
You can find your account_id in the right sidebar of your account's Workers page, and zone_id in the right sidebar of a zone's overview tab at https://dash.cloudflare.com
When you log in to cloudflare, choose "Workers" on the right side. In the Worker section you will find Account ID on the right side too.
Zone ID is required only when you use custom domain. While you use service with default ..worker.dev Zone ID is not required.
Finaly you need to authenticate in wrangler via:
wrangler configwhich uses cloudflare API key, which need to be created at API tokens pagewrangler loginwhich will prompt login with email and password
After repl restart and applying alias again you can got next error:
/home/runner/cloudflare-workers-template/node_modules/@cloudflare/wrangler/node_modules/binary-install/src/binary.js:60
throw `You have not installed ${this.name ? this.name : "this package"}`;
^
You have not installed wrangler
(Use `node --trace-uncaught ...` to show where the exception was thrown)
You can fix that with
node /home/runner/cloudflare-workers-template/node_modules/@cloudflare/wrangler/install-wrangler.js
But I guess it's not comfortable to run it on each start. So we need to make one "hack". Repl.it allow to create the .replit file to define run behaviour.
run="bash ./prepare-and-run.sh"
And create this script with next content:
export WRANGLER="/home/runner/cloudflare-workers-template/node_modules/@cloudflare/wrangler"
node $WRANGLER/install-wrangler.js
cd hello-world && npm run dev
Notice that package.json in worker template doesn't include wrangler commands(there is only test and format scripts). Add what you need inside it:
"dev": "node $WRANGLER/run-wrangler.js dev",
"build": "node $WRANGLER/run-wrangler.js build",
"publish": "node $WRANGLER/run-wrangler.js publish",
That's all, you're ready :D Now just press Run button on top of Repl's UI. Repl will take run script from .replit and we'll got what we need.
When you decide to build and publish, you can just change prepare-and-run.sh file :)
P.S: If you think to make more worker projects inside of one repl, please use next content for prepare-and-run.sh
export WRANGLER="/home/runner/cloudflare-workers-template/node_modules/@cloudflare/wrangler"
export USER=runner
node $WRANGLER/install-wrangler.js
echo ""
echo "DON'T FORGET RO MAKE WRANGLER ALIAS:"
echo ""
echo "alias wrangler=\"node $WRANGLER/run-wrangler.js\""
bash
You need to do this, because all aliases, env variables and other things are only for "Console" tab session and not available from "Shell". Also don't forget to add dev/build/publish scripts into all other worker projects that you will create here. Notification about alias needed because alias command in scripts is ignored :c So you have to add it manualy and you'll get displayed command for that to copy-paste-run
P.P.S.: Also we don't need index.js in our repl(NOT in worker project), so we can manualy delete it via Shell tab with rm index.js :D