How To Use Glitch

In this challenge you will be learning how to use and host your own projects using glitch. If your project has a GUI then you will be able to view this at he sub-domain glitch has provided for you e.g. https://project-name.glitch.me, the GUI can only be viewed if the file is named index such as index.html or index.js. Glitch is mainly used for web-based programming / node.js / sql languages, however you are able to run / host python scripts.

Glitch has many features including;

You can click on the accordions to view each step. Each step will have a written guide and also have a walk-through of the step underneath the guide.

If you already have a GitHub account you can skip this step and head straight over to Step 2

To create a GitHub account you will need to head over to https://github.com/join . You will be presented with a form to fill out.

You will need the following information; a username (I recommend to use the same username for your Coder Dojo username), an email address (if you don’t have an email address I recommend using your parents/guardians email), and also a memorable password.
Please write down your username, email, and password for future reference.

Enter your username, email and password in the corresponding fields then click the green Create account button at the bottom.

Email is censored to comply with STEM-UK

After this, you will need to select a plan. Please select the Free plan, then continue by clicking the green continue button at the bottom.

You will then be presented with multiple choice questions. You can even skip this step or you can select the same options stated in the image below.

 

 

Once you have created your account with GitHub you will need to head over to https://glitch.com/ .
On Glitch you will need to click the sign in button at the top right of the page. Then click Sign in with GitHub.

If you get redirected to a GitHub login page just enter your login details for GitHub, then it should redirect you back to the Glitch homepage.

You now have successfully logged into glitch without any problems (hopefully)

To create a new project you will need to be logged in, you will then need to click on the New project button. you will then be provided with 3 options;

hello-webpage is a basic webpage that has been set up for you and all you will need to do is change the content of the HTML and CSS file.
hello-express is also a webpage however it has the node.js package installed and setup for you.
hello-sqlite is the same as hello-express however it also has sqlite installed to store data.

You can add new files by clicking the + New File button. you can also change the name of the files, copy files and delete files by clicking the drop-down arrow to the right of the file. If you need to add an asset (image, video, sound file etc). Some projects may have a .env file, this file is a secret file and cant be accessed by anyone viewing your project code.

 

If you are creating project then you may need to add a package. You can do this by editing the package.json file or installing it using a command in the glitch console.

You can add packages manually by using the add package button at the top of the package,json file. Here you can search for a package and then you can click on the doc to view the documentation and click on the name to install it. You can also update the current packages by clicking on them as well.

You can also install packages via the console. To open the console you will need to click on the logs button and click on the console tab. You will need to use pnpm instead of npm to install a package.

To view your project you can click on show to view your project. This site will then update whenever you edit any file of your project. The URL of the page you have been directed to will be the URL to view the GUI of your project, you can share this URL and open it without having to login.

You can also share your project by clicking the share button at the top left of the window. there you can copy the website, a GitHub link to your code and also copy an invite link to give to other people so they can help/edit your project.

You don’t need to save your project (if you haven’t noticed already) as Glitch automagically saves every edit you make.

You can also embed your project into a blog. An embedded project looks like this.

 

Leave a Reply

Your email address will not be published. Required fields are marked *