Getting started with Glitch

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.

{
    "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

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

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

{
    "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

.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