How To Set Up Cloudflare AMP Optimizer Worker

Estimated reading time: 11 minutes

If you do not know how to set up the Cloudflare Worker for the Cloudflare AMP Optimizer by the AMP Project team or if you’re stuck on something then we have you covered. Our AMP content – provided by the Official AMP Plugin – is using the AMP Optimizer integration with Cloudflare Workers. You can read more about the AMP Optimizer on Cloudflare Workers here.

Since the information on how to do this is all over the place and can be daunting, we’ll give you step-by-step instructions on how to set up Cloudflare AMP Optimizer for Windows. We will provide detailed instructions along with external links to the provided instructions. Those links may also include details on how to set it up with other machines like Linux. Without further adieu, let’s get started.

Also, at the bottom of this page (Overview), we will list all of the links we used to set this up in case you would like to do some deep diving yourself.

This is a step-by-step reference to what we did to publish our worker to Cloudflare. All of the links provided in this article are from reliable sources, such as Microsoft, Cloudflare, and the AMP Project. The information we have provided below is an example for your reference; the following steps are what we did to complete the Cloudflare AMP Optimizer project. Also, you can read more about our website disclaimer here. This is not a sponsored post nor are we affiliated with any of the links we have provided in this article.

WordPress Users:

If any of you are utilizing this worker for your WordPress site you will need to wait until some fixes are implemented. The worker will lock you out of your admin area presenting a cookie error. The worker will also invalidate your AMP pages. Once those are fixed, I will make sure to update this!

1. Windows PowerShell (Admin)

The first step you will want to do is make sure you have the proper authority to make executions, otherwise, you will get an error due to lack of permissions. You also need to have administrator privileges for this to work. The default Execution Policy for Windows is Undefined, which results in Restricted, so set your Execution Policy to RemoteSigned. You can read all about the Execution Policies and how to change yours here. How you do this is pretty straightforward:

Open Windows PowerShell or Windows Command Prompt (CMD) by hitting the Windows key + x on your keyboard or right-click your Windows icon in your taskbar. Then choose Windows PowerShell (Admin) or CMD (Admin).

2. Execution Policy

Then, you will want to update your LocalMachine Execution Policy by typing:

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope LocalMachine

This will set your Local Machine Execution Policy to RemoteSigned. You can always change it back later following the Remove Execution Policy instructions. Doing this to the LocalMachine or CurrentUser will make changes to your registry until you change it back.

Then, to make sure it worked, type:

Get-ExecutionPolicy -List

You should see this as a result:

You may also have to set the scope for CurrentUser as well on your machine if you have permission issues using the following command:

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

Now that your Execution Policy is set up, we can move to installing an nvm.

3. Installing a Node Version Manager

Before you can set up Wrangler correctly, you need to have npm installed using a Node Version Manager. If you use Visual Studio Code then I would recommend installing nvs (Node Version Switcher). You can find all of those instructions in the nvs: Node Version Switcher repo. You will also want to install the Node.js Extension Pack for Visual Studio Code.

However, installing nvm is much simpler, so I will cover that in this article. You can also check out more instructions if needed via the Set up NodeJS on native Windows document.

First, you will want to download the nvm-setup.zip file then open that up and install the nvm-setup.exe. Finish going through the installation wizard and let’s move on!

You can either install the latest nvm by typing the following command in your PowerShell or CMD. This release may have some issues:

nvm install latest

Or you can choose an LTS version by typing the following command in your PowerShell or CMD and hit enter:

nvm list available

Then, choose the LTS version you want to use by typing the following command in your PowerShell or CMD and hit enter:

nvm install <version>

Make sure you replace <version> with the LTS version. For example:

nvm install 14.17.0

Now, select the version you installed by typing the following command in your PowerShell or CMD and hit enter:

nvm use <version>

Again, make sure you replace <version> with the LTS version you installed. For example:

nvm use 14.17.0

Now you can check out what version of npm you have by typing the following command in Windows PowerShell or CMD and hit enter:

npm --version

You now have the Execution Policy and npm installed! You can move on to installing Wrangler.

4. Installing Wrangler

You will now learn how to install Wrangler CLI! You can review any of the steps for getting started installing Wrangler here. The first thing you are going to do from here is type in the following command in your Windows PowerShell or CMD:

npm install -g @cloudflare/wrangler

Then, confirm Wrangler is installed by typing in the following command in your Windows PowerShell or CMD and hit enter:

wrangler --version

5. Configuration

Now comes the part of configuration. Type in the following command via Windows PowerShell or CMD and hit enter:

wrangler login

Type y then hit enter to open the page in your browser. You will then need to log into your Cloudflare account and click on Authorize Wrangler. It will send an API token to Wrangler so that you will be able to deploy scripts to Cloudflare.

6. Installing Cloudflare AMP Optimizer Template

Next, you want to install the Cloudflare AMP Optimizer GitHub template. You can always head to the usage section of the Cloudflare AMP Optimizer GitHub repo and follow/review those instructions.

First, type in the following command in your Windows PowerShell or CMD and hit enter to use that GitHub repository as a template:

npx @cloudflare/wrangler generate my-worker https://github.com/ampproject/cloudflare-amp-optimizer

Windows will now install that Cloudflare Worker repo and your CMD or PowerShell will give you your email and Account ID associated with your Cloudflare account to place in the wrangler.toml file. You can then copy the Windows directory link your CMD or PowerShell has provided for the project location and paste it into your file explorer or you can just follow the location from C>Windows>etc. This is the location of your project. The below image is where you would need to paste that directory.

You can open your project with Visual Studio Code to configure the config.json and wrangler.toml file. I will give you an example of how both of my files looked:

config.json File:

{
    "enableKVCache": true,
    "enableCloudflareImageOptimization": false,
    "optimizer": {
      "maxHeroImageCount": 5
    }
}

• The AMP Project team highly recommends enabling KV Cache. Set this to true and then configure your KV Namespace via the wrangler.toml file.
• The Cloudflare Image Optimization will only apply to Business or higher plans.

wrangler.toml File:

name = "t4g-amp-optimizer"
account_id = "YOUR_ID"
route = "https://www.your-route-domain.com/*"
zone_id = "YOUR_ID"
workers_dev = true
type = "webpack"
webpack_config = "node_modules/@ampproject/cloudflare-optimizer-scripts/webpack.config.js"

[env.dev]
name = "t4g-amp-optimizer-dev"
vars = { MODE = "dev" }
kv_namespaces = [
         { binding = "KV", id = "YOUR_ID", preview_id = "YOUR_PREVIEW_ID" },
]

[env.beta]
name = "t4g-amp-optimizer-beta"
vars = { MODE = "beta" }
kv_namespaces = [
         { binding = "KV", id = "YOUR_ID", preview_id = "YOUR_PREVIEW_ID" },
]

[env.prod]
name = "t4g-amp-optimizer-prod"
vars = { MODE = "prod" }
route = "https://www.your-route-domain.com/*"
kv_namespaces = [
         { binding = "KV", id = "YOUR_ID",  preview_id = "YOUR_PREVIEW_ID" }
]

• The name you choose will be the name of your worker.
• You can find your Account ID and Zone ID via the Overview tab of your Cloudflare Dashboard. It will be located on the sidebar to the right of your screen under API.
• The route needs to be your URL along with the asterisk (*) at the end to cover every page. If you have /?amp=1 or /?amp as your query parameter then you cannot use those in the route. If you have /amp/ directly after your URL then you could do the asterisk after /amp/. For example, https://www.example-site.com/amp/*. Otherwise, stick with your URL and the worker will sniff out your AMP pages.
• Workers_dev needs to be set to true.
• The type and webpack_config need to be the same as our above example.

Creating your KV Namespace:

To enable the recommended KV cache you need to create a KV Namespace along with an environment. The binding must be named KV for each environment. To do this – and for Windows to find your wrangler.toml file – you will first need to go to your worker folder by typing the following command or something similar to your PowerShell or CMD and hit enter:

cd your-worker-folder-name

Replace your-worker-folder-name with your project folder. For example, if it is called my-worker then type:

cd my-worker

If your worker was saved in a different folder or drive then you would just need to call it. For example, cd C:\Workers\my-worker.

Then, type the following command and hit enter to get your ID:

wrangler kv:namespace create "KV" --env=prod

Then type the following command and hit enter to get your preview ID:

wrangler kv:namespace create "KV" --env=prod --preview

Wrangler created a KV namespace ID and preview ID for the environment called. This will also be listed in your Cloudflare Dashboard>Workers>Manage Workers>KV. Copy the kv_namespaces your CMD or PowerShell listed and paste it into your wrangler.toml file. The example of the wrangler.toml file we listed above is how we have it in our published project, which you can use as a reference.

Do this same exact thing for the beta and dev environments. So you would delete prod and replace it with beta and so on.

7. Publish Your Worker!

Now, you need to publish your worker. If you closed out of CMD or PowerShell before this step then you need to point to your project directory again by utilizing that cd my-worker command. For me, it would be cd C:\Workers\my-worker as that is where I saved it. Otherwise, the following command will fail as Windows has no idea what you want to publish. Maker sure you set a route for the prod environment otherwise Type in the following and hit enter:

wrangler publish --env=prod

You could also use the same command that the AMP Project team has provided but that will not publish your prod Environment. Instead, you will have to manually add the Environment Variables and KV Namespace Bindings via the Worker’s Settings, otherwise, you will run into a bunch of errors, such as KV not defined:

npm run prod # calls wrangler publish --env=prod

That’s it! Your worker is now published and running as it should. You can check it out in your Cloudflare Dashboard>Workers>Manage Workers. If you have any questions or want to share how it worked for you then we would love to hear from you.

Overview

1. First, you changed your Execution Policy. You can learn all about it here – about Execution Policies.
2. Installing a Node Version Manager. Our steps provided instructions on how to install nvm. There are others out there, such as nvs or Volta. All of those instructions can be found on Microsoft’s Set up NodeJS on Native Windows.
3. If you are using Visual Studio Code then it is recommended that you install the Node.js Extension Pack for VS Code.
4. After installing npm with the nvm, nvs, or volta, you now can install Wrangler as well as log in to your Cloudflare account. All of those detailed instructions are found here – Workers Getting Started Guide.
5. Once Wrangler is installed, you are logged in, and have your Account ID, you can now get started on configuring the Cloudflare AMP Optimizer. All of those instructions can be found here – Cloudflare AMP Optimizer.
6. Creating your KV Namespace via CMD or Windows PowerShell can be found here – KV Getting Started. Before you can create a KV Namespace you need to remember that the binding must be named KV and you need to have your CMD or Windows PowerShell point to your worker folder directory by typing the command cd your-project-name as explained in “Creating Your KV Namespace” listed above for step 6.
7. You can now publish your worker utilizing the two commands listed in step 7 above! They are also listed in the Cloudflare AMP Optimizer GitHub repo via Usage and Workers Getting Started Guide via Publish your project.

More helpful links:

• nvs Command Reference
• Wrangler Commands
• Cloudflare AMP Optimizer Code Demo
• Cloudflare AMP Optimizer Live Demo

Tug-Talks

I love everything there is about gaming. That is just about what I always do because that is my true passion. When you don’t find me indulging myself in gaming content, you can find me coding or somewhere outside where all you can hear and see is nature.

www.tips4gamers.com