Learn Cloudflare, Flux and Jekyll

Cloudflare Workers let you write JavaScript Service Workers that run directly in Cloudflare's 200+ edge locations around the world.

With a Cloudflare Worker, you can modify your site's HTTP requests and responses, make parallel requests, and even reply directly from the edge.

Cloudflare Workers are written against a similar API to the W3C Service Workers standard. However, while Service Workers run inside the end user's browser, Cloudflare Workers run on Cloudflare's servers. This means that Cloudflare Workers can implement trusted code (which the client cannot tamper with), and will work no matter what browser the user is running.

In this course, Kristian Freeman will teach you how to build and deploy a Serverless API with Cloudflare Workers. By learning how to build your own serverless JSON APIs, you can effectively manage a highly-available backend for your projects, without needing to learn DevOps or manage services.

Cloudflare secures and ensures the reliability of your external-facing resources such as websites, APIs, and applications. It protects your internal resources such as behind-the-firewall applications, teams, and devices. And it is your platform for developing globally-scalable applications.

cloudflare

Build a Serverless API with Cloudflare Workers

Cloudflare Workers is a serverless application platform that enables you to create and deploy functions to Cloudflare's Edge Network.

Unlike other serverless providers that only have regional data centers, Cloudflare's Edge Network consists of hundreds of servers all over the world.

Cloudflare Workers is a powerful platform, and this course serves as a great introduction for what it can do.

Follow along with Kristian Freeman as you build a localization engine that renders data based on the Edge location nearest to the application's user.

After this course, you'll be ready to start experimenting with your own Cloudflare Workers projects. *Need an idea?* *[Check out the suggested Portfolio Project for this course.](https://egghead.io/projects/introduction-to-cloudflare-workers)*

Introduction to Cloudflare Workers

Jekyll is a blog-aware static site generator. You can write text in markdown or HTML and Jekyll uses layouts to create a static website. You can tweak how you want the site URLs to look, what data gets displayed on the site, and more.

After watching the collection you'll be able to:

* Install Jeykll and run it locally
* Create a new blog post
* Install plugins to add new features to your blog

Jekyll is a parsing engine bundled as a ruby gem used to build static websites from dynamic components such as templates, partials, liquid code, markdown, etc. Jekyll is known as "a simple, blog aware, static site generator".

jekyll

Create A Blog With Jekyll

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Actions contain no functionality, but rather describe an event in our application.  In this lesson we will describe our Actions as they relate to our application.  These Actions will then be available for triggering in our Views and for execution in our Store.

React Flux: Actions

In Flux our Components are referred to as Views, but they are the same familiar Components associated with any React development.  In Flux, however, we have the benefit of the architecture to keep us from having to pass down through a long chain of children Components any functionality that may be embedded in our Stores.  In this Lesson we will wire up all of our Components in record time utilizing the architecture we've already established.

React Flux: Components/Views

Stores are where the real work in our application is done.  Dispatchers broadcast Actions to all Stores, and the Stores registered to listen for those Actions will perform any logic needed to update our Views.  In this lesson we will establish our first Store and register the Actions we wish to respond to.

React Flux: Stores

Our build process during this series will utilize both gulp and browserify.  In this lesson we will take a moment to setup our environment and all of the tooling required to begin developing our Flux Application.  We've kept the build process very simple so porting it to grunt should be a breeze, but this also serves as a simple primer for those who may not be familiar with gulp.

React Flux: Development Environment Setup

Organizing modules and components is a critical aspect of the development of any single-page web application (SPA). In this lesson we will look at refactoring the Flux React store into a more module structure.

React Flux: Project Organization

Flux has four major components: Stores, Dispatchers, Views, and Actions.  These components interact less like a typical MVC and more like an Event Bus.  In this lesson we will start by creating our Dispatcher which queues up our Actions as Promises and executes them as they are received.  We'll also create an AppDispatcher which, unlike the Dispatcher, is more specific to our application.

React Flux: Overview and Dispatchers

As your React Flux application grows, it is inevitable that you start to see functionality and code repeated. With React, you can easily keep things DRY by using mixins.

React Flux: Remove Duplicate Code with Mixins

With this lesson, we will bring it all together, using what we've learned in the series to fisnish out the React Flux architecture example.

The completed code for this series can be found [here on Github](https://github.com/eggheadio/egghead-react-flux-example).

React Flux: Wrapping Up

By default, React doesn't have built in routing. We will add routing to our application with the react-routing-component.

React Flux: Routing with react-router-component

[Jekyll](https://jekyllrb.com/) is a static site generator built in [Ruby](https://www.ruby-lang.org/en/) and available to generate and host websites on [GitHub Pages](https://pages.github.com/). In this course, you'll install the Jekyll gem, use the command line tool to generate a new project, inspect the scaffolded project, and finally, serve the starter website.

Install Jekyll and generate initial, scaffolded website

Jekyll is a blog-aware, static site generator written in Ruby. 

Requirements:
* Ruby version 2.5.0 or above
* RubyGems

Install the Jekyll Ruby gem on macOS quickly with just a few terminal commands and have a blog-aware site running locally.

Install Jekyll and Create a New Project

Blogging is built into Jekyll. You write blog posts as markdown or HTML files and Jekyll turns them blog posts. They follow a specific naming convention to be picked up and used by Jekyll

All blog post files require front matter. Front matter is a snippet of YAML at the top of a file. Front matter is used to set your layouts and meta data.

Create New Blog Post with Jekyll

Jekyll has a plugin system that allows you to add custom features to your site. There are many plugins available or you can even write your own. You can view a list of plugins at [Planet Jekyll](https://github.com/planetjekyll/awesome-jekyll-plugins)

Liquid is a templating language written in Ruby to output to the browser 

[Liquid Documentation](https://shopify.github.io/liquid/)

Install a Jekyll Plugin

To deploy a Cloudflare Workers serverless function, you'll need to sign up for a free Cloudflare Workers account at [workers.cloudflare.com](http://workers.cloudflare.com/), and select your unique workers.dev subdomain to deploy your functions to.

Create a Cloudflare Workers Account

Using NPM, you can install Cloudflare Workers' CLI (command-line interface), Wrangler, by typing `npm install -g @cloudflare/wrangler` into your command line. Wrangler allows you to generate and publish Cloudflare Workers projects. We'll also use the `wrangler login` command which will give you a link to authorize Wrangler. This will set up an API token specifically for your Wrangler installation that will allow you to publish and read all the Workers and Workers KV information that you need.

Install and Configure the Cloudflare Workers CLI Wrangler

Wranglers generate command, `wrangler generate`, allows you to create new Cloudflare Workers projects. Using the URL parameter, you can also generate new projects based on Cloudflare's starter templates, or open-source projects created by other developers, but for now, you will just use the default. To do this you'll only need to give it a name, for example, `wrangler generate my-worker`,  this will create a new project called my-worker. 

Generate New Cloudflare Workers Projects with Wrangler's generate Command

We'll take a look at the default code in `index.js` in a Workers project. We'll take a second to understand how it works before building the rest of our project. 

First will see what our Worker looks like in an actual browser by running `wrangler preview`. In a terminal, and we'll check out how Serverless functions in Cloudflare Workers listen for HTTPS requests via the "fetch" event and respond to them by creating and returning a new Response.

Write Your First Cloudflare Workers Serverless Function

Using `wrangler whoami` in a terminal we'll grab our account id so we can paste our id into the double quotes of `account_id = ""`  inside of `wrangler.toml` file. Using the `wrangler dev` command we can look at our Workers serverless function and test it before deploying it. Once we're ready to deploy, we can use the `wrangler publish` command to deploy it to our unique workers.dev subdomain.

Topics

Instructors

Content Type

Free or Pro