/ New Features

Take off with Fly’s App generator

If you’re one of the many curious individuals interested in building an app with Fly’s unique, powerful features but need a little kick-start, then this article is for you. Whether you’re a brand-new developer or a seasoned, multilingual web-genius, these templates will give you a little push in the right direction.

Create an App in just a few easy steps

Take a look at some of Fly’s example apps and get off the ground and running in just a few easy steps. We wanted to make it super easy for you to jump right into a project and begin coding the app of your dreams. In this article, I’ll show you how to run a few simple terminal commands and in return you’ll receive an app directory with the file layout needed to run a minimal Fly app – chosen by you from our library of example apps.

Whether you’re looking to build a simple static marketing site or thinking about diving into some of Fly’s popular features such as caching or image optimization, we’ll take the guesswork out of where to begin and provide you with a fully functioning app template where you can jump right in and start building.

Get started

  1. First, make sure you have the latest version of Fly installed
    npm i -g @fly/fly

  2. Choose an app and create the template
    fly new [app-name] -t [template-name]

  3. Move into your new directory
    cd app-name

  4. Start the server and visit your app --> http://localhost:3000/
    fly server

Choose from our library of Apps

static-site

Create a simple static site with this template. Fly can serve small static sites very quickly. This app serves responses based on what's in the /files/ folder. It uses the files defined in the .fly.yml configuration, and then uses fetch('file://') to retrieve them. So, place all of your static assets (pages, images, CSS, JavaScript) in the /files/ folder, define them in your .fly.yml file and then retrieve and display them in index.js. This template is great for someone looking to create a marketing site, personal portfolio, brochure, etc...

This app can be created using the following command: fly new my-app -t static-site

graphql-stitching

This is an app that fetches data from GitHub and quickly stitches in additional insights. It can help you make your favorite APIs faster, cache responsibly to get more use out of public APIs without hitting rate limits, and overall demonstrates just how well Fly integrates with modern front-end frameworks such as React.

This app can be created using the following command: fly new my-app -t graphql-stitching

http-cache

This app is useful for caching full HTTP responses. It works by using the fly.cache API, which is useful for storing data in Fly's regional caches. HTTP caching uses data from the Request to generate a unique cache key, then stores the response’s metadata and body in Fly cache.

This app can be created using the following command: fly new my-app -t http-cache

glitch-custom-hostname

Have you ever created an awesome project on Glitch and then realized that subdomain is not-so-awesome? With this app you can easily give your Glitch apps a custom hostname. It allows you to weave your Glitch project into a Fly Edge App, deploy it to our global fleet of servers and enjoy the perks of serving your Glitch project from a custom domain across our fast, global network.

This app can be created using the following command: fly new my-app -t glitch-custom-hostname

load-balancer

This is a Fly App that works as an application load balancer. You can use it to route traffic to different backends, or put it in front of other services to distribute traffic based on whatever logic you desire.

It's designed to be a ready-to-go load balancer library that you can mix and match with other Fly App code to do interesting things like add path routing rules, authentication, caching etc...

This app can be created using the following command: fly new my-app -t load-balancer

watermark-image

The watermark image app demonstrates the power behind Fly’s Image API. It grabs a photo of a hot air balloon, and then "watermarks" it with the Fly logo. It can easily be reconfigured to match your own photos/logo.

This app can be created using the following command: fly new my-app -t watermark-image

object-store

Fly includes a globally-distributed object store, which is a data storage architecture that manages data as “objects” rather than as blocks or files. It’s ideal for unstructured big data, analytics and archiving. This app can be used for storing dynamic configuration data such as a list of allowed referrers or user preferences. These “objects” are stored in a flat address space, which makes it easier to locate and retrieve your data across regions.

This app can be created using the following command: fly new my-app -t object-store

What else can I do?

Head over to Fly Example Apps and check out even more Fly Apps that can help get you started building fast, scalable apps.

Looking to create something else but not sure where to begin? Contact us and we’ll help get you started. And if you create something cool, share it with us on Twitter!

Elise Barnes

@elise_barnes_

http://www.elisebarnes.org

Elise Barnes

Elise is a former lifestyle blogger, current Full Stack Web Developer/ Technical Content Creator. She loves JavaScript, learning new skills, and explaining challenging concepts to other developers.

New Jersey