Create a static website on Fly

Getting an something running on Fly is basically working out how to package it as a deployable executable image. Once that is done it can be deployed to the Fly infrastructure and run on the global application platform.

For this Getting Started article, we'll look at creating a static web site from scratch, including the web server, and deploying it on Fly.

The HelloStatic Site

Our example will be a be hosting a HTML file. There's no need for any tools. Feel free to add in any HTML files you'd like to serve too.

You can get the code for the example from the hellostatic Github repository. Just git clone https://github.com/fly-examples/hellostatic to get a local copy. Here's all the code for our index.html:

<html>
  <head>
    <title>
      Hello from Fly
    </title>
  </head>
  <body>
    <h1>Hello from Fly with a static web site</h1>
  </body>
</html>

And that's all we need.

Install Flyctl and Login

We are ready to start working with Fly and that means we need flyctl, our CLI app for managing apps on Fly. If you've already installed it, carry on. If not, hop over to our installation guide. Once that's installed you'll want to login to Fly.

Configuring the App for Fly

Each Fly application needs a fly.toml file to tell the system how we'd like to deploy it and thats no different for a static web site. The fly.toml can be automatically generated with the command flyctl init command.

flyctl init

? App Name (leave blank to use an auto-generated name) hellostatic

? Select organization: Demo (demo)

? Select builder: static
    Web server builtin
? Select Internal Port: 8080

New app created
  Name     = hellostatic
  Owner    = demo
  Version  = 0
  Status   =
  Hostname = <empty>

Wrote config file fly.toml

You'll be asked for an application name first. We recommend that you go with the autogenerated names for apps to avoid namespace collisions. We're using hellostatic here so you can easily spot it in configuration files.

Next you'll be prompted for an organization. Organizations are a way of sharing applications between Fly users. When you are asked to select an organization, there should be one with your account name; this is your personal organization. Select that.

Flyctl also asks you to select a builder. Builders are responsible for constructing the Docker image of your application which is then deployed to Fly's Firecracker VMs. The simplest to use are the builtin builders, which we recommend you use here. Select Static (Web server Builtin). This is minmal web server image which just serves up content in the image. If you want to know more about the various builders, see Builders and Fly.

The last thing you will be asked for an internal port value. This is the port your application communicates over. If set incorrectly, Fly will be unable to connect to the application and it will fail health checks and be terminated. The default shown, 8080, is correct for the builtin builders which, by design, get applications to talk on port 8080. So, hit return and carry on.

Inside fly.toml

The fly.toml file now contains a default configuration for deploying your static web site. In the process of creating that file, flyctl has also created a Fly-side application slot of the same name, "hellostatic". If we look at the fly.toml file we can see the name in there:~~

app = "hellostatic"

[build]
  builtin = "static"


[[services]]
  internal_port = 8080
  protocol = "tcp"

  [services.concurrency]
    hard_limit = 25
    soft_limit = 20

  [[services.ports]]
    handlers = ["http"]
    port = "80"

  [[services.ports]]
    handlers = ["tls", "http"]
    port = "443"

  [[services.tcp_checks]]
    interval = 10000
    timeout = 2000

The flyctl command will always refer to this file in the current directory if it exists, specifically for the app name/value at the start. That name will be used to identify the application to the Fly platform. The rest of the file contains settings to be applied to the application when it deploys.

We'll have more details about these properties as we progress, but for now, it's enough to say that they mostly configure which ports the application will be visible on.

Deploying to Fly

We are now ready to deploy our app to the Fly platform. At the command line, just run:

flyctl deploy

This will lookup our fly.toml file, and get the app name hellostatic from there. Then flyctl will start the process of deploying our web site to the Fly platform. Flyctl will return you to the command line when it's done.

Viewing the Deployed App

Now the application has been deployed, let's find out more about its deployment. The command flyctl info will give you all the essential details.

flyctl status

App
  Name     = hellostatic
  Owner    = dj
  Version  = 0
  Status   = running
  Hostname = hellostatic.fly.dev

Allocations
ID       VERSION REGION DESIRED STATUS  HEALTH CHECKS      RESTARTS CREATED
99731b01 0       fra    run     running 1 total, 1 passing 0        2m6s ago

Connecting to the App

The quickest way to browse your newly deployed application is with the flyctl open command.

flyctl open

Opening http://hellostatic.fly.dev/

Your browser will be sent to the displayed URL. Fly will auto-upgrade this URL to an HTTPS secured URL.

Bonus Points

  • If you want to know what IP addresses the app is using, try flyctl ips list: 
flyctl ips list

TYPE ADDRESS                              CREATED AT
v4   50.31.246.228                        2m31s ago
v6   2a09:8280:1:4d5b:fc11:3d05:b958:58f9 2m31s ago

Arrived at Destination

You have successfully built, deployed, and connected to your first static web server on Fly.