Deploy an application on Glitch in 5 steps
Tags: glitch, javascript, node, sql
Published: 2020-02-12 11:39:19

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](https://dev.to/michelc/crud-application-with-express-and-sqlite-in-10-steps-me0) 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/](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".

```javascript
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/](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:

```erb
  <!-- 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:

{% glitch michelc-apptest app %}

Actually, with dev.to, it's even simpler and I can use [Liquid Tags](https://dev.to/p/editor_guide#liquidtags): `{% 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](https://blog.pagesd.info/2020/02/12/deploy-application-glitch-5-steps/).
Cover image : [An introduction to the natural history of fishes - BHL](https://www.biodiversitylibrary.org/page/9665742).