Skip to content

Commit

Permalink
deep dive: rework intro sections (#1795)
Browse files Browse the repository at this point in the history
* rework intro sections

* update from feedback

* updates from feedback and more edits
  • Loading branch information
andie787 committed Aug 23, 2024
1 parent eb92552 commit 158a1d4
Show file tree
Hide file tree
Showing 13 changed files with 117 additions and 150 deletions.
55 changes: 0 additions & 55 deletions happy-path/aim.html.markerb

This file was deleted.

14 changes: 6 additions & 8 deletions happy-path/application.html.markerb
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,14 @@ nav: demo
order: 4
---

Your demo app is running by default on two [Machines](https://fly.io/docs/machines/).
Your demo app is running by default on two [Fly Machines](/docs/machines/), our fast-launching VMs.

Both Machines stop when not in use, and [autostart](https://fly.io/docs/launch/autostop-autostart/) when a new request comes in.
This is entirely configurable. You can chose to [suspend](https://community.fly.io/t/new-feature-in-preview-suspend-resume-for-machines/20672) instead of stop, configure a [minimum number](https://fly.io/docs/reference/configuration/#the-http_service-section) of Machines to leave running, or even decide never to stop Machines at all.
Both Machines stop when not in use, and automatically when a new request comes in. [Autostop/autostart](/docs/launch/autostop-autostart/) is entirely configurable. You can chose to suspend instead of stop, configure a minimum number of Machines to keep running, or even decide never to stop Machines at all.

Familiarize yourself with the [fly.toml](https://fly.io/docs/reference/configuration/) config file. Make a change there -- or in fact to any part of your application -- and run `fly deploy`.
The purpose of two Machines is twofold: redundancy and scalability. If one Machine goes down, the other can continue on. If both are available, when your app has higher traffic, both can be started to handle requests. You can [vertically scale](/launch/scale-machine/) the CPU and RAM on Machines.

The purpose of two Machines is twofold: redundancy and scalability. If the Machine hosting one goes down, the other can continue on. If both are available, in times of high use both can be started to handle requests.
You can [vertically scale](https://fly.io/docs/launch/scale-machine/) the CPU and RAM on each Machine.
You can also [horizontally scale](/docs/launch/scale-count/) the number of Machines. You can scale out to different regions with the `fly scale count` command too. If you have a co-worker on another continent, create a Machine there.

You can also [horizontally scale](https://fly.io/docs/launch/scale-count/) to more Machines. Be sure to scroll down on that page far enough to see how to scale to multiple [regions](https://fly.io/docs/reference/regions/). If you have a co-worker on another continent, create a Machine there.
Familiarize yourself with the [fly.toml](/docs/reference/configuration/) config file. Make a change there--or to any part of your app--and run `fly deploy` to update your app.

All this is made possible by [Anycast](https://fly.io/docs/networking/services/), a [load balancing proxy](https://fly.io/docs/reference/fly-proxy/), and [DNS certificates](https://fly.io/docs/networking/custom-domain/). Be sure to read that last link if you're interested in custom domains.
Your Fly App takes advantage of [Anycast routing](/doc/networking/services/), a [load-balancing proxy](/docs/reference/fly-proxy/), and [private networking](/docs/networking/private-networking/). You can also create [DNS certificates for custom domains](/docs/networking/custom-domain/).
67 changes: 57 additions & 10 deletions happy-path/index.html.markerb
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,67 @@
title: Deep dive demo
layout: docs
nav: demo
toc: false
toc: true
---

You probably landed on this page because somebody recommended Fly.io to you. You're curious, and you want to know more before you commit.
Welcome to our deep dive demo, where you can explore Fly.io more thoroughly, but in a time-boxed way. In one hour or less: get a fully-functioning app running in the first few minutes, and then have enough time left over to understand what you just did, explore how the pieces fit together, and even integrate in AI functionality that makes use of GPUs.

If you came from our [Speedrun](https://fly.io/speedrun) or [Getting started](https://fly.io/docs/getting-started/) pages, maybe you want to not only be up and running fast, you want to feel confident that you're making a good decision; choosing a platform that can both support you now, and scale with you later on as you grow.
## Goals of the deep dive

Maybe you're concerned about lock in. You want to know that you can
use services from other places and even eject entirely and move your entire
application elsewhere if things don't work out.
It's really just one goal:

If you want to explore more deeply but in a time-boxed way, then you're in the right place. You should be up and running within minutes, and have enough of the hour left over to spend some time understanding what you just did and run a few commands and see what they do.
**Help you find out if Fly.io is the right place for you.**

If you don't get a good feeling within an hour, you're out of here. If you do get a good feeling, then consider
sticking around to experiment and learn more about features that interest you. And when you're done, you can delete everything and launch the application that you brought here to launch.
If you came from our [Speedrun](https://fly.io/speedrun) or [Getting started](https://fly.io/docs/getting-started/) pages, maybe you want to go beyond `hello world` and explore the platform so you can feel confident that you're choosing a platform that can support you now, and scale with you later on as you grow.

**Next:** [Beyond `hello fly`](/docs/happy-path/ready/)
Maybe you're concerned about lock in. You want to use services from other places and even eject entirely and go elsewhere if things don't work out.

If you don't get a good feeling within an hour, you're out of here. If you do get a good feeling, then stick around and try launching the app that you brought here to launch.

## Beyond `hello fly`

Our deep dive assumes that you're not satisfied by a `hello fly`, or even a `hello fly` with a database application. You know that a real-world application has at a minimum the following components:

* An HTML form and a database; typically a relational database.
* The ability to handle media files or documents, generally using S3.
* A multi-user and realtime component, where changes made by one person in one location are reflected instantly in the browser of another person.

To get a fully-functional app running smoothly, you need a whole bunch of things; things like Anycast routing, load balancers, DNS certificates, WebSockets, an internal private network, a relational database, an object store, and an in-memory database. And the knowledge to to connect them all together.

We take a lot of this work off your plate with our [Fly Proxy routing](/docs/reference/fly-proxy/) and out-of-the-box [private networking](/docs/networking/private-networking/).

Usually, set up for a complete app typically takes a _minimum_ of an afternoon's worth of work, even if you're familiar with a cloud platform. There is almost always a surprise, and often several. We can't promise no surprises, but we can show you how we'll partner with you to handle some of the dev ops complexities of working in a public cloud.

## So what is this deep dive demo app?

The deep dive demo uses industry standard components that you can run on your laptop, a VPS, AWS EC2, Google Compute Engine, or Azure.

### Web Dictaphone -- Fly.io edition

The deep dive demo is based on [MDN's Web Dictaphone](https://github.com/mdn/dom-examples/tree/main/media/web-dictaphone+external).
You can play with a [live demo hosted on GitHub](https://mdn.github.io/dom-examples/media/web-dictaphone/+external). The Web Dictaphone app is about as basic of an HTML form as you can get, and it has the added bonus of providing the ability to generate as many media files as you want using only your voice.

The basic Web Dictaphone is client side only, requiring a web server that can deploy static assets (HTML, CSS, JS, images), like NGINX, Apache HTTPd, or Caddy. Storing the data in databases for our deep dive demo requires a server that can handle HTTP GET, POST, PUT, and DELETE requests. The choice of server varies depending on the language or framework.

### Other demo components

The demo includes the following components:

* A [PostgreSQL](https://www.postgresql.org/+external) relational database to store the names of the audio clips
* A [Tigris bucket](https://www.tigrisdata.com/+external) to store the the audio files
* [Upstash for Redis](https://fly.io/docs/reference/redis/) and [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API+external) to handle the connections for the realtime requirement

## Available runtimes

Our deep dive demo comes in two flavors (so far):

- **Node.js**
- [node-dictaphone](https://github.com/fly-apps/node-dictaphone+external) GitHub repo
- For details about implementation-specific files and app logic, see [Node.js deep dive demo](/docs/happy-path/nodejs/).
- **Rails**
- [rails-dictaphone](https://github.com/fly-apps/rails-dictaphone+external) GitHub repo
- For details about implementation-specific files and app logic, see [Rails deep dive demo](/docs/happy-path/rails/).

---

**Next:** [Launch the demo](/docs/happy-path/launch-deep-dive/)
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ order: 3

This is the point where you might expect to see that the marketing hype promised by [Speedrun](https://fly.io/speedrun) doesn't quite cut it. But the fact is that Fly.io is built for an excellent developer experience (DX) for full stack applications with both realtime time and object storage requirements.

There are only two steps.
**Step 0:** To get set up to run the deep dive demo on Fly.io, all you need to do is install Ruby or Node and create an empty project directory.

After that there are only two steps.

**Step 1:** [Install flyctl](https://fly.io/docs/flyctl/install/).

Expand All @@ -20,31 +22,30 @@ fly launch --from https://github.com/fly-apps/node-dictaphone
fly launch --from https://github.com/fly-apps/rails-dictaphone
```

If you are new to Fly.io, the second step will take you to a page where you can register before continuing.
If you're new to Fly.io, the second step will take you to a page where you can register before continuing.

The `fly launch` output describes what you'll be getting for the app, and gives you an opportunity to tweak the settings (suggestion: Don't. The defaults are fine for this demo and we'll walk you through how to adjust them later). And then it will build and assemble and wire up your app.
The `fly launch` output describes what you'll be getting for the app, and gives you an opportunity to tweak the settings. (Suggestion: Don't. The defaults are fine for this demo and we'll walk you through how to adjust them later.) And then it will build and assemble and wire up your app.

Take your time and play with it. Open the application in multiple browser windows. Send a link to a friend on another continent and watch your browser update in realtime.

And then relax. We promised you it would be less than an hour. You're already up and running. If you are so inclined, try bringing up this exact same application on another cloud provider. We don't mind. In fact, we encourage it. Just please don't count the time you spent there against the hour budget we asked you to allot to this activity.
And then relax. We promised you it would be less than an hour. You're already up and running. If you are so inclined, try bringing up this exact same application on another cloud provider. We don't mind. In fact, we encourage it. Just please don't count the time you spent there against the hour you set aside for this demo!

### What You Get
## Explore the result of `fly launch`

Once you're back and/or rested up, explore app and add-on components. Feel free to review the following in any order, or chose to skip ahead:
Once you're back and/or rested up, explore the app and add-on components. Feel free to review the following in any order, or chose to skip ahead:

* [The Fly App](../application/)
* [PostgreSQL](../postgresql/)
* [Your Fly App](../application/)
* [PostgreSQL database](../postgresql/)
* [Tigris Object Storage](../tigris/)
* [Upstash Redis](../redis/)

### Runtimes
## Runtimes

Optional, but deeper dives are provided for each runtime:
Optional, but details are provided for each runtime:

* [Node.js](../nodejs/)
* [Rails](../rails/)

### Next
---

- As an extra treat, you can add some AI functionality: in this case speech recognition using [Whisper](../whisper/).
- When you're all done, visit the [recap](../recap).
**Next:** Add [OpenAI Whisper](../whisper/) speech recognition as a bonus.
13 changes: 7 additions & 6 deletions happy-path/nodejs.html.markerb
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
---
title: Node.js demo
title: Node.js demo reference
layout: docs
nav: demo
---

Source is on [GitHub](https://github.com/fly-apps/node-dictaphone).


The Node.js demo source is on [GitHub](https://github.com/fly-apps/node-dictaphone).
`fly launch` will provide a [`Dockerfile`](https://docs.docker.com/reference/dockerfile/)
and a [`fly.toml`](https://fly.io/docs/reference/configuration/). As your application
changes, you can run `npx @flydotio/dockerfile` to produce updated Dockerfiles.
and a [`fly.toml`](https://fly.io/docs/reference/configuration/) config file. When you make changes to your application, you can run `npx @flydotio/dockerfile` to produce updated Dockerfiles.

How the pieces are put together:

Expand All @@ -32,7 +33,7 @@ How the pieces are put together:
* The [express-ws](https://github.com/HenningM/express-ws?tab=readme-ov-file#express-ws-)
module is used for [WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) support.
* The [redis](https://github.com/redis/node-redis?tab=readme-ov-file#node-redis) module
is used to access Redis. The `REDIS_URL` secret isused to access the database.
is used to access Redis. The `REDIS_URL` secret issued to access the database.

Key points of logic:

Expand All @@ -48,4 +49,4 @@ Key points of logic:
replaced with new contents.
* When the `WHISPER_URL` secret is set, `PUT` requests will cause the audio clips
to be passed to the Whisper server, and responses will be used to update the
PostgreSQL database. The code for this is [here](https://github.com/fly-apps/node-dictaphone/blob/1e84a4dece6888dfc68880d146b46511d47391b3/app.js#L102-L129).
PostgreSQL database. The code for this is in [app.js](https://github.com/fly-apps/node-dictaphone/blob/1e84a4dece6888dfc68880d146b46511d47391b3/app.js#L102-L129).
Loading

0 comments on commit 158a1d4

Please sign in to comment.