Building and Deploying a Node.js Selfie App on Heroku

This is a data selfie app built with Express application framework in Node.js.

Objective

I’ve heard of Node.JS for while and been wanting to write a simple web app with JavaScript entirely.

Node allows us to write code on server-side within a runtime environment, so we can run our code in terminal directly. It also has plenty of great features e.g. it’s able to incorporate asynchronized interactions between client and server, comes with a package manager called npm (node package manager) which allows us to manage our dependencies much easier, etc.

It’s neat and somehow reminds me of flask in Python a lot, feeling the logic behind Express in Node.JS is quite similar :D

Tasks

• Create a front-end look with HTML, back-end with Express in Node.JS.
• Use p5.JS to connect to webcam to take pictures.
• Create the front-end for web APIs (via REST), which includes submitting new photo snapshots (Post), checking past records on this app (Get) and deleting all your tryouts from the app (Delete).
• Upload local files to Github.
• Deploy the app on Heroku.

This is how my demo works. Available on both laptop and mobile now:

• If you’re using mobile, please make sure your browser have access to your current location. Latitude and Longitude value will take some time to load.
• Once location is shown and submit button is hit, it will show a Submit Success pop-up window. After that, your photo will be saved in Past Records page.

https://selfie-app-by-nodejs.herokuapp.com/

Environment

• Installed Node: v12.18.3. npm version is v6.14.6.
• Installed Express via npm: v4.17.1.
• Server-side database used NeDB: a lightweight JavaScript database using MongoDB API. See the link here.
• Installed Git.
• Install Heroku CLI on macOS via Homebrew.

Process

I will explain core pieces of code down below.

File structure (only include those relevant):

SelfieApp
├── package.json
├── package-lock.json
├── index.js
└── public
    ├── index.html
    ├── index_sketch.js
    ├── style.css
    └── records
        ├── index.html
        └── records.js

In index.js, I use Express to control all the routes, create connection to NeDB, and add port for server to run on browser (later on Heroku will provide a random port for us as well). NeDB will then generate a database.db file for me to save all data entries from client:

In index_sketch.js, I includes main page’s events e.g. find client’s current location with navigator, setup webcam connection using p5.js and create a submit button (the video photo will be converted into base64 string, so in my database.db file I can see a long string that represents all pixels of one picture):

Then back in index.js, I added Post route in Express:

That’s all for the main page setup.

But how about the past records page?

In records.js, I included two major events — get and delete. For get, as it’s a simple web app for now, currently clients can request to see all records in database:

Clients can also delete all records:

Then back in index.js, I added Get and Delete route in Express:

Once completes all the code, add a .gitignore file and then push everything to Github.

Sample CLI to push codes upto Github repo can be found on Git Handbook.

Then I used the following commands to deploy my app on Heroku:

$ heroku login
# Go to heroku dashboard, press "create new app"
# Note that now I have a deployment server(Heroku) and developer server(GitHub) separately.
# Create connection to heroku and push
$ heroku git:remote <your app name on heroku>
$ git add .
$ git commit -am "<put your message here>"
$ git push heroku master

Finally the app is ready on Heroku — the URL can be found both on CLI and on our personal dashboard. Now it seems that we can connect Github to Heroku directly too:

my dashboard on heroku

That’s it! Have a wonderful day ahead!