[Tutorial] custom Domain with Glitch


#1

The idea is simple: Just set up a proxy for the glitch project on a hosted nodejs instance.

Example: https://glitch.com/edit/#!/glitch-proxy?path=server.js:9:17 will proxify the content for the project ‘glitch-target’

This project is a good demo:

It’s really easy, you just need a digital ocean account(ref link to get 10$ on account creation, good for testing before buying) and paypal.

When you create a machine (they call them droplets), click ‘prebuilt machines’ and choose the node one.

After getting it ready, ssh into it and setup your node packages using npm (http-proxy-middleqare, express, helmet for ssl, and what else you need).

Then follow the said server script and set it up:

If you need ssl:
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
const express = require(“express”),
app = express(),
fs = require(‘fs’),
helmet = require(“helmet”),
https = require(‘https’),
proxy = require(‘http-proxy-middleware’);

const privateKey = fs.readFileSync(’/etc/letsencrypt/live/$domain/privkey.pem’, ‘utf8’);
const certificate = fs.readFileSync(’/etc/letsencrypt/live/$domain/cert.pem’, ‘utf8’);
const ca = fs.readFileSync(’/etc/letsencrypt/live/$domain/chain.pem’, ‘utf8’);

app.use(’/’, proxy({
target: ‘$glitchUrlSSL/’, // target host
changeOrigin: true, // needed for virtual hosted sites
ws: true // proxy websockets
}));

sslApp = app;
sslApp.use(helmet());

app.listen(80);
https.createServer({
key: privateKey,
cert: certificate,
ca: ca
}, sslApp).listen(443);
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
It’s possible to set different routings and let your glitch app decide there, based on the domain your proxy got, check the github docs of http-proxy-middleware for instructions.


You may need to set it up differently, or automate your ssl cert. I’m using letsencrypt there with certbot certonly --manual.

You may also need to setup the do proxy run as a linux service so it will always be on.
Tutorial for that is here:
https://axllent.org/docs/view/nodejs-service-with-systemd/

¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

`[Unit]
Description=Node.js Example Server

[Service]
ExecStart=/usr/bin/node /root/server.js

Required on some systems

#WorkingDirectory=/root
Restart=always

Restart service after 10 seconds if node service crashes

RestartSec=10

Output to syslog

StandardOutput=syslog
StandardError=syslog
SyslogIdentifier=nodejs-example
#User=
#Group=
Environment=NODE_ENV=production PORT=1337

[Install]
WantedBy=multi-user.target`

¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

And you need the glitch project to ping itself and use uptimerobot to check if it’s up.

Make sure your A-Records point at the do proxy.

And boom, you develop at the edge with an own domain.

Notice, it works, but the response times will be much slower now, especially if you had caching enabled on the glitch side (i got an increase from 19ms to 3s, even for cached sites). This may be faster on servers other than from digital ocean, but a proxy is still a proxy and makes things slower.

To the glitch staff: Please don’t ban me for advertising anything other than fly, but fly had no paypal, so it was no option for me and i also didn’t like their UI.

Thanks for reading, hope this helps somebody


#2

To the glitch staff: Please don’t ban me for advertising anything other than fly

You’re welcome to use any service you like :slight_smile: