Cloudflare App Creator: 3 Steps To Create Windows OS Development Environment

Cloudflare Apps make it possible for website owners to install your tool or service. When you access the Cloudflare App Creator and publish an app, your users are any website owner on the free CDN. Your app will become software that can be installed on any of the 9 million websites on the Cloudflare network. If you use a Windows operating system and you’d like to develop and app for the CloudFlare network to use; read on to find out how to set up your Windows OS CloudFlare App development environment.

Cloudflare App Creator

The App Creator allows you to upload the files for your app. You, the developer, can see a preview of your app’s installation process as you work. Create, manage, test and publish apps for the Cloudflare Apps platform.

Windows Development Environment

Cloudflare provides a simple template project for you to use for a starting point to kick off your app development. To compile the project and create the app using a Windows operating system, first you’ll need to set up your development environment.

Cloudflare Apps Developer on Windows

As a Cloudflare App developer you can share your service, SaaS product, or tool by modifying requests and content of the user’s site. This can be extraordinarily powerful in enabling: JS / HTML / CSS injection, modifications of Cloudflare features such as DNS.

First off, you’ll need to set up your development environment, on your Windows operating system. Follow these three simple steps and get yourself ready to create Cloudflare Apps with a Windows computer or laptop.

1. Install Node.js

Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine from the OpenJS Foundation. Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside a web browser.

As an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications. Many connections can be handled concurrently. Upon each connection, the callback is fired, but if there is no work to be done, Node.js will sleep.

2. Install Yarn

Yarn is a package manager for your code. It allows people to use and share code (e.g. JavaScript) with other developers from around the world. Yarn does this quickly, securely and reliably so you don’t ever have to worry.

Yarn caches every package it downloads so it never needs to download it again. It also runs operations in parallel, to maximise resource utilisation and so that install times are faster than ever. Yarn uses checksums to verify the integrity of every installed package, before its code is executed.

Before you start using Yarn, you’ll first need to install it on your system. There are a growing number of different ways to install Yarn. The simplest method, for the purposes of this tutorial on setting up a Windows development environment for Cloudflare Apps, is to use Yarn’s Windows OS installer.

3. Install win-node-env

If you’ve tried to create Cloudflare Apps on Windows without this tutorial, you’ve probably encountered an error related to NODE_ENV, something like this:

'NODE_ENV' is not recognized as an internal or external command, operable program or batch file.

This is caused by an npm script in your project set up something like this:

"scripts": {

  "build": "NODE_ENV=production babel src --out-dir dist"

}

Setting NODE_ENV=production before command babel doesn’t work on Windows. You might use cross-env but that involves changing your npm scripts and getting Mac/*nix users onboard.

The simplest way to fix this is to install win-node-env. This creates executables like NODE_ENV.cmd that sets the NODE_ENV environment variable and runs the rest of the command. Once you have installed it and run your npm or yarn script commands, it should automatically make them work.

So now you just need to launch your Command Prompt (Start Button>CMD) and run the following command. This will install it globally on your Windows OS, so will work for all your Cloudflare development needs:

npm install -g win-node-env

Here’s a quick video to get you through it.

TOP TIP: Keep your Command Prompt session open to continue this tutorial and create your first Cloudflare App in Windows.

How to create Cloudflare App on Windows

Now that your Cloudflare Development Environment for Windows is all set up, you can go ahead with the example steps found in Cloudflare’s boilerplate project readme file.

The basics of the app build process are as follows:

• Download or clone this project from GitHub
• Extract the files to a location on your Windows OS
• Rename the folder and “name” field in “package.json” to the name of your app
• Navigate to the project folder location in Command Prompt (cd <project-folder-path>)
• Run the “yarn install” command and allow to complete
• Run the “yarn build” command and allow to complete

That’s it, you’ve created your first app ready to be tested in the Cloudflare App Creator. Finally, navigate to the App Creator and upload your project directory for testing and publishing.

Tutorial Conclusion

Hopefully this post about how to set up an environment for developing apps for Cloudflare using a Windows OS, will help you in your cloud based app development ambitions.

We’ve worked on several different app development projects for our clients; so if you hit any stumbling blocks along the way, just pop a question in the comments below.