/ Glitch

Fly + Glitch: Easily implement a custom hostname on Glitch

Imagine ... coders of all skill levels, writing and iterating upon a sea of applications, together. Consider the possibilities! The beautiful things we could build when we work together and truly experience the joy of building. And so, Glitch was born. We're proud to announce that you can now weave your Glitch projects into a Fly Edge App, deploy to our global fleet of servers and serve your Glitch project from a custom domain name across our fast, global network.

Build the app of your dreams

At first glance, the vibrant and fun imagery might lead you to under-estimate Glitch ... but Glitch is actually an expansive and compelling platform for developers of all skill levels. It replaces the rigid formality of Git-type processes and enables developers to create projects of all shapes and sizes using a real-time, in-browser text editor.

You can start from a blank canvas or plunge right into the depths of an established project. See something you'd like to tweak or re-appropriate? Remix it and create your own open and fluid project. Glitch excels at getting your roaring mind in-front of a fun project with minimal friction. From compilers, to games, to global hackathons -- it's all there, just create an account and get to coding.

Currently, every project on Glitch has an auto-generated sub-domain name that you can view from the glitch.me domain. But many of us prefer having a custom hostname and ditching the glitch.me for reasons such as: better exposure in search engines, easier brand building/ publicity, an overall more professional look, and to simply establish authority on the web.

Fly Glitches

So, you've created something cool in Glitch and now you're ready to show it off to the world. Maybe you want to add it to your portfolio or perhaps you've created a nifty piece of application logic to apply to your business. Whatever the case may be, you want the delivery of your creations to be fast, flexible, secure and delivered by your own custom hostname. That's where Fly comes in.

After you build an app in Glitch, you can preview it using the “Show live” button at the top of your editor. For example: the HTML Starter project, when previewed, takes you here: https://html-starter.glitch.me/. We'll be using this URI to attach our Glitch Project to Fly.

glitchupdate1@2x-1

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

  1. Head over to your terminal, open up the directory where you'd like this project to live and run fly new my-app -t glitch-custom-hostname ---> a super easy Fly Edge Application that lets you deliver your Glitch apps with custom hostnames/domain names.

  2. cd my-app and start the server fly server

  3. Open http://localhost:3000

You should see a super-fly Glitch App created by the Fly team. The Glitch app is retrieved through a proxy fetch to Glitch. Once received, it can be deployed to Fly's global fleet of servers and served from any hostname you’d like.

  1. Next, grab the URI of your own Glitch project (example: my-glitch-app.glitch.me)

  2. Open up the Fly app in the code editor of your choice

  3. Navigate to the index.js file

  4. On line#4, change fly-example.glitch.me to be your own Glitch URI

glitchupdate2@2x-2

  1. Save your changes and head over to your terminal window again

  2. Run fly login (make sure you have a Fly account first, if you don’t, register at https://fly.io/app/sign-up)

  3. You’ll be prompted to enter your email address and password

  4. Run fly apps create <app-name> to create an edge app

  5. Then run fly deploy to deploy your Fly Edge App

  6. Finally run fly hostnames add <your-custom-hostname.com> to add a custom domain name to your new Fly app

  7. Don't forget to visit your DNS provider (Cloudflare, DigitalOcean, WordPress, etc...) to make a record that we can use for your domain/hostname. We recommend using an ALIAS, ANAME, or flattened CNAME for the best results

Voilà! You should now be able to visit your domain and see your shiny, new Glitch app at lightning speed.

Your Glitch project is now being served from a global network of fast edge-servers, speeding it up around the globe! With HTTPS enabled, your hostname is protected with automatically renewing Let's Encrypt TLS certificates. And with caching enabled, visitors will connect to the closest possible cache.

Try it out for yourself

Glitch is pure fun. With collective programming mind, it's playful and productive. You never quite know what your code will morph into given time and eager contributors. When used with Fly, you can attach any project to your custom hostname and release your creations to the world.

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