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
Top comments (0)