We recently launched our new Cloudflare Apps platform, and love to see the community it is building. In an effort to help people who run web services such as websites, APIs and more, we would like to help make your web services faster, safer and more reliable using our new Apps Platform by leveraging more than 115 data centers around the world. (Skip ahead to the fun part if you already know how Cloudflare Apps works)
How Cloudflare apps work
Here is a quick diagram of how Cloudflare apps work:
The “Origin” is the server that is providing your services, such as your website or API. The “Edge” represents a data center that is closest to your visitors. Cloudflare uses a routing method known as Anycast to ensure the end user, pictured on the far right, is routed through the best network path to our data center closest to them around the world.
Historically, to make changes or additions to your site at the edge, you needed to be a Cloudflare employee. Now with apps, anyone can quickly make changes to the pages rendered to their users via Javascript and CSS. Today, you can do amazing things like add a donation button using PayPal, or inject a video intelligently using JavaScript or CSS to position the objects wherever you like.
Awesome apps that you can already turn on today
A great way to explore our existing Apps would be to explore our Apps store. You can access it by visiting our App store.
You can review all of them by visiting your Cloudflare dashboard and accessing the apps section, which is a button on the far right hand corner of the dashboard.
Creating an app (AKA the fun part)
Cloudflare has a simple example app that is easy to use. Feel free to fork our app to have fun with it. You can find it on GitHub here.
To start, you will want to rely on the install.json file and perform the install execution run:
npm install
It’s also best practice to double check the Javascript to ensure there are no errors in the source:
npm run lint
From here, your files can be located in your source directory:
source/app.js
This is where the magic happens. Your app starts here.
source/app.css
Styles for your app.
media/**
A directory for icons, tile images, and screenshots.
The easiest way to test your app is to use our app creation dashboard.
From there, it’s as simple as directing the creator to the folder of your app in the app creator, and testing the app. You can modify the source/app.js file to modify the nature of the Javascript injected and source/app.css to select where those changes are implemented. Once you’re happy with your app, you simply click create app at the bottom left of the page and it will be reviewed based on the code created for your page.
Would you like to get community feedback for your app before submitting it for moderation? Share your work or work-in-progress with the Cloudflare Apps part of the community. We can’t wait to see what you build.
Cloudflare is very excited about the apps platform because it not only enables our users to do powerful new things with their internet properties, but also because gives our users the chance to create an app that will be available to more than 7 million websites around the world.
If you have any questions, feel free to join our new Cloudflare Community today to join in on the fun!