Getting started with Glitch
Tags: webdev, tutorial
Published: 2020-05-09 19:58:28

---
title: Getting started with Glitch
published: true
date: 2020-05-09 07:00:00 MDT
tags: webdev, tutorial
description: Glitch is a great platform for hosting your Github or newly made projects running node.js, web servers, and more.
canonical_url: https://developerbacon.ca/articles/getting-started-with-glitch/
---

[Glitch.com](https://glitch.com/) is a website that can host your online web apps. You can host entire websites on Glitch with Vue.js, React, Angular, Nuxt, and more. There is also the option to make bots for Discord, Slack, or even Twitch with a language like Node.js.

## Creating your first app

When you start a project you will have the option to start from a starter template or a Github repo.

The Glitch editor has a bunch of great features like a file formator and an automatic package update checker.

## Packages

After you have a project set up and ready to go, and you can make changes in the built-in editor, you will need to make sure you have a `package.json` file with a start script. You can ignore the package file if you are running a website with an `index.html` file. The start script is what Glitch looks for when running your app. Here is a template for the package file if you don't have one.

Glitch comes with an easy way to install and update NPM packages. To use this functionality go to your package.json file in your Glitch project and at the top you will see an `Add Package` button. To add a package just click it and search for the package you would like to install and Glitch will install it for you.

Updating packages is very similar to installing them. If a package has an available update just click on the Add Package button and any available package updates will display above the `What is npm` link.

The script that Glitch will run is `start`. As far as I can tell there is no way to change the script the Glitch will run if there is a way just let me know.

```json
{
	"scripts": {
		"start": "node index.js"
	}
}
```

Currently, the highest node version that Glitch uses is v12, but if you would like to use another version of node for your project

```json
{
	"engines": {
		"node": ">=12.x"
	}
}
```

Here is an example of what your package.json file should look like for your Glitch project.

```json
{
	"name": "something-cool",
	"version": "1.0.0",
	"main": "index.js",
	"scripts": {
		"start": "node index.js"
	},
	"dependencies": {
		"express": "^4.17.1"
	},
	"engines": {
		"node": ">=12.x"
	}
}
```

## Formatting your files

Glitch also comes with a file formating tool, to help make your documents look just a bit nicer to look at. To use this function open a file that you would like to format and at the top of the editor, there will be a `Format This File` button. Using this is as simple as clicking that button.

## New files and directories

Making a new file is easy with the `New File` button at the top left of the file hierarchy menu, but did you know that you are also able to make new folders with this as well. To do so just add the directory before the new file you want to create and add a slash in between the directory and file. Here is an example `new_directory/new_file.js`

<!-- assets -->

## .env

The `.env` file is where you can keep all of your super-secret private tokens for your projects. You can put all of your tokens in this file and they won't be visible to the public and won't duplicate if the project is remixed.

To access the variables that have been set in the .env file you can use the `process.env` object, followed by the variable, like so: `process.env.SOMEVAR`. This is an example of what a .env file would look like:

```
# Environment Config

# reference these in your code with process.env.SECRET

TOKEN=123456abcdefg

# note: .env is a shell file so there can't be spaces around =
 # Scrubbed by Glitch 2020-04-17T08:15:39+0000
```