[Tutorial] Get your Glitch project on a domain!


#1

Hey there! Many Glitch users probably wan’t their Glitch project on a custom domain. That’s why I’ve made this tutorial for you to use!

Note: this tutorial is long, but it does have pictures! :smiley:

Step 1: Setup your glitch project

You obviously need a Glitch project to work with, so first go ahead and create one.

But wait… You aren’t going to get away with just making an sort of Glitch project.

You need to make a Hello Express project.

We’re nearly done with step 1 but next is security.

Now we have our express server running, we should force HTTPs.

To do so place the following code in your express server’s code:

function checkHttps(req, res, next){
  // protocol check, if http, redirect to https
  
  if(req.get('X-Forwarded-Proto').indexOf("https")!=-1){
    return next()
  } else {
    res.redirect('https://' + req.hostname + req.url);
  }
}

app.all('*', checkHttps);

But, it must go first. Put it after var app = express(); Thus, making sure it is the first thing checked.

Step 2: Get your Glitch app flying

Ahh, here we finally are: step 2.

First, create an account at fly.io. It should be dead simple.

Now, log into your account if you haven’t already.

Navigate to the button where it says Sites and click it.

It will redirect you to a page like this:

Now you can click the big button that says Add new site!

Then you will reach this page:

Select the Hosting Service radio button then click the button beneath that says Glitch

An extra little box will appear bellow:

In it type your Glitch project domain. Be careful!

Instead of https://myproject.glitch.me or http://myproject.glitch.me put myproject.glitch.me. SInce fly doesn’t accept the http or https part.

Now you can click Preview your site.

Then you can click Set your hostname!
You will be greeted with another prompt.

Now type in the hostname your going to use. For example I’d put in mywebsite.tk

Now click Next, configure DNS.

It will bring you to a different screen.

Ignore what it says and just click the button that says Got it!

You will then be welcomed to a magical dashboard that looks like this:

That’s the end of step 2!

Step 3: Get your app on your domain!

Now it’s time to get out some wizardry magic.

POOF.

Ok, so open up a terminal (Linux & MacOS) or Command Prompt (Windows).

Then on your magical dashboard open the preview link. (Preferably in a new tab).

If it says something like Not Found then you’ll just need to wait. But you can still carry on this guide.

Now in your terminal type the following:

Note: Remove the https / http from the URL before pasting it bellow.

  • Windows users:
ping PUTYOURURLHERE
  • Linux/MacOS users:
dig PUTYOURURLHERE

Now you will notice an IP will display on the screen.

Example (Command Prompt):

Example (Terminal):

Now write down the IP on a piece of paper or just type it out into Notepad or something. You’ll need your IP later.

  • Now go to your DNS provider’s DNS managment area -

Now, this is where the IP comes in usefull.

You’ll get a box similar to this:

Now, leave the Name part alone.

Now set the TTL part to 14440.

In the Target box enter the IP address you wrote down.

Now save that then your nearly done.

Now, go back to your magic control panel. Then click Middleware

image

You will then be taken to a page that will look like this:

You can enable whatever you want but you must click the Add button for HTTPS Upgrader.

That’s it! You should be set to go!

Note: It can take while for your DNS provider’s name servers to update!

Thanks for reading!

Have a nice day!

This took me quite a while to produce, so I’d love your feedback!

Note: Thank you for all the :heart:!

also if this could be pinned that would be nice :smiley:


Assign a .tk domain to a Glitch project
Subdomain in use
Add a 'Tutorials' category in Glitch Support
#2

I don’t understand step 1 how do I make a project “Hello Express”? I followed all other steps but idk what to do now


#3

it’s no longer required, custom domains have now be included in glitch


#4

Ohhhh How do I do that exactly/


#5

Hello @smorezsun, before you can use the built-in Glitch custom domains first you need to help a couple of folks out in the the glitch.com help area

image

Built-in custom domains are a feature that’s turned on for people who are helping out others in the community.

Until you’ve racked up a couple of “Thanks!” notes you can still use this Tutorial to set up a custom domain using fly.io. To answer your question,. the “Hello Express” app mentioned here is just an example - you can use any Glitch project for the subsequent steps.


#6

oh ok. I help people on threads? How many do I have to help


#7

The custom domains are a recognition for being thanked for your help anywhere in the Glitch community; you can read a little more about the feature at https://glitch.com/help/how-can-i-get-help-with-code-in-my-project/.

One common way to help people and be thanked is to see someone asking for help on the glitch.com homepage (that’s where the picture I included is from) but people can thank you for anything, including helpful comments in the forum. You’ll have to be thanked twice for the custom domains feature to become available. Once active on your profile you’ll see it under each project’s Advanced Options menu:

image

image