Introduction to Glitch for Node.js Apps in the Cloud

Introduction to Glitch for Node.js Apps in the Cloud

Glitch is a platform made by the fine folks at Fog Creek Software , a firm known on the internet for making FogBugz, Trello , co-creating Stack Overflow . Most programmers are also familiar with the Joel Spolsky name, of Joel on Software fame.

This brief introduction should get you familiarized with Glitch and get to know how and why you can leverage it for your own projects.

Shared with ❤ in Bit’s blog

Bit helps your team build amazing apps faster by turning components into building blocks, which can be shared used and developed anywhere. It’s free and open-source, give it a try.

What is Glitch?

Glitch is a platform on which you can build Node.js applications in the cloud, public or private, and collaborate with other people on them.

At a first glance, you might be tempted to think it’s not that much serious , right? What’s all this images and colors , it’s not for serious programmers!

This is the key thing here. You’re not a less proficient or hardcore programmer if you don’t use Vim and instead use an editor with an interface that makes things more fun.

I’ve been using Glitch for some months now, and I must say that in my opinion it’s really an amazing platform.

What do I use it for? I use it to create quick prototypes, I use it in the tutorials I write on my blog, I also use it to host and run some scripts that automate parts of my business.

An example is a script I built to automatically send a special email to a person that buys one of my products on Gumroad, with a unique URL they can use to access the purchase.

I can write a little Node app, and Glitch gives me a unique URL that I can use to call it from webhooks.

Glitch is also a great way to demo projects, because with its embed functionality one can quickly add an entire app, or the source code visualization, into any web page. I’ve used it for some tutorials.

Glitch is (currently) focused on Node.js.When first starting out, you can start building from a sample project:

Or you can remix an existing project, which is just another name for forking:

When you fork a project, you get assigned a new URL automatically. Then you can change that URL, and pick any freely available URL that matches your preferences.

Your project will be glitch.com/edit/#/your-random-url and it will be publicly accessible at your-random-url.glitch.me .

I didn’t mention it’s completely free for individuals, while it provides paid plans for teams, that can use it with more special features that give the option for a more powerful private communication among project members.

In order to provide this free service to a big number of users, there are some limitations in place to keep servers running. Applications inactive for 5 minutes are put to sleep, and you can’t have long-running applications (after 12 hours of running they are stopped), but every time they receive a network request they are woken up again.

There are some resource consumption limits , as well, to prevent applications to use too much space or network calls.

Those limitations are very reasonable for a wide variety of applications, and I’m sure you already have some ideas for what you could use Glitch for.

What about data?

You can create files, and store data in there because the filesystem is persistent.

There is no built-in database service, but you can, of course, rely on any 3rd part hosted database provider.

There are lots of sample projects to integrate external databases in your app at glitch.com/storage :

What about private data?

You can create a project, make it publicly available, and also hide some information when other people remix it.

This is especially important, as you might guess, with API keys, or anything that’s sensitive. You can’t just put those in publicly available code, of course, but Glitch provides us with a special place for that.

You can add those values to environment variables to the .env file, and they will only be accessible to you.

Notice the key image next to the filename, to give us a visual hint that this file is secure and will never be shown to other people even if your project is public.

If a project is private, of course, none of those files are shown to people, but your application is still available on a public URL if you decide to create a public endpoint for it.

Also, anything that’s stored in the .data/ folder is not copied over when the project is remixed.

Debugging

Glitch integrates the Node debugger — only available on Chrome — which you can enable by pressing a button. From there, you can debug your application in the Chrome DevTools.

Easily manage npm packages

When you click the package.json file you have the option to install npm packages. By clicking Add Package , you have access to any package available on the npm registry:

Git integration

Every time you make a change to one of your files, Glitch creates a new revision of the project. This under the hoods is powered by Git but presented in a really innovative and refreshing view, which can be used also by people not familiar with Git in the first place.

Clicking the two left arrows icon under your profile picture brings on the Rewind view. You can see when changes were made, by who:

Now if you move the vertical line over the changes, the editor switches to be a diff visualizer. An instant glimpse at which files changed on the left, and which lines of code changed in the opened file on the right:

This is really handy, especially when viewing your own code a few months from now, or other team members changes.

GitHub integration

You can export any project to GitHub, as well as importing any project from GitHub.

Simplified, but not dumbed down

Glitch gives you pretty tools that abstract over the underlying platform, but clicking “Log | Console” gives you access to the shell:

You can do any kind of console magic from here. Well, any magic that does not require root access.

Ok, but how do I…

The Glitch team made handy lists of sample applications you can start from.

Some examples?

• Starting projects for common services https://glitch.com/building-blocks
• Hello World apps for common frameworks https://glitch.com/hello-worlds
• Integrations with popular business apps https://glitch.com/tools-for-work
• Bots https://glitch.com/handy-bots
• Art-related projects https://glitch.com/art
• Music-related projects https://glitch.com/music
• Games https://glitch.com/games

Closing words

I hope you will find a little app that’s useful to start a project you have in mind or that solves a need you have. Start by remixing it, and make it yours.

Glitch is a great platform to experiment, build things, see what sticks and in general play around with new technologies. feel free to comment below! :)