DEV Community

Cover image for Deploy an application on Glitch in 5 steps

Posted on • Originally published at

Deploy an application on Glitch in 5 steps

It's been a while since I wanted to test Glitch "for real" and deploy the project I made for my CRUD application with Express and SQlite in 10 steps tutorial. I finally found the time to get started and it's working great.

1. Create an account on Glitch

Right now, I don't want to get attached. On the page, I click on the "Sign in" button (top right) and then I just :

  • click on "Create an account" (bottom middle),
  • then click on "Email Magic Link" to get an email that will contain a temporary link / code to connect me (after giving my email address),
  • from my mailbox, I click on the link received and I'm connected to Glitch.

Import a GitHub project

Glitch allows to manage Node applications, with Express and icing on the cake, an SQlite database. So this is exactly what I need to try to host my AppTest application developed a few months ago. All I need to do is :

  • click on "New Project" (top right),
  • choose "Clone from Git Repo" (at the bottom of the mini list),
  • Paste the URL of my Git repository:

VoilĂ ! I end up with the source code of my Node project directly in the Glitch editor.

3. Adapt my project to Glitch

After reading a few docs, I know that with Glitch the SQlite database must be saved in a ".data" folder which is:

  • hidden, at least in the file editor, but visible from the console,
  • persistent, allowing the application data to be stored there.

In the tutorial I created a "data" directory to save the database. So I only have 2 small changes to make to conform to Glitch:

  • rename the "data" folder to ".data",
  • modify line 15 of the "index.js" file to replace the "data" path with ".data".
const db_name = path.join(__dirname, ".data", "apptest.db");
Enter fullscreen mode Exit fullscreen mode

Glitch normally accepts a secret ".env" file where you can configure and secure this kind of stuff. But so far, I haven't done anything about this in my AppTest application.

Launch the application

These few changes should be enough to allow me to run my program from Glitch:

  • click on the "Show" button (top left),
  • choose "In a New Window" (while you are at it) to launch / display the application in a new window / tab,
  • a new tab opens with the URL and displays the home screen of my application!

Now, if I click on "Livres" (Books) in the menu bar, I get the list of books as I created it. To test, I can update this list and everything works fine!

5. Include the Glitch button

But... the fish are missing! I take a quick look at how it's done with Glitch's default Node + Express project and it's quite simple. I have to add a few lines to my pseudo EJS "layout":

  • open the file "_footer.ejs" in the "views" directory,
  • add the following 4 lines just before closing the </body> tag:
  <!-- include the Glitch button to show what the webpage is about and
        to make it easier for folks to view source and remix -->
  <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
  <script src=""></script>

Enter fullscreen mode Exit fullscreen mode

That's it. After a page refresh, I see the famous Glitch fish button in case someone wants to reuse my application :) Thanks to them, I can even embed my application here:

Actually, with, it's even simpler and I can use Liquid Tags: {% glitch michelc-apptest app %}.


For a first try, it was super easy. Now, it's worth investing some time on it to master and do more concrete things...

This post was originally published on
Cover image : An introduction to the natural history of fishes - BHL.

Top comments (0)