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 https://glitch.com/ 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: https://github.com/michelc/AppTest.

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");

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 https://michelc-apptest.glitch.me/ 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="https://button.glitch.me/button.js"></script>

</body>

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 dev.to, it's even simpler and I can use Liquid Tags: {% glitch michelc-apptest app %}.

Conclusion

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 blog.pagesd.info.
Cover image : An introduction to the natural history of fishes - BHL.