ann lin

Posted on Nov 14, 2018

Build a frontend to backend web application (Windows 95 style)

#noob #database #elim5 #backend

Look ma, I'm fullstack.

Today I start to play with database. I found a gem at https://dev.to/aspittel/objection--knex--painless-postgresql-in-your-node-app--6n6. @AliSpittel, you are dah MVP.You should first head over to the tutorial which covers objection.js + knex pretty well.

Objection.js + Express = Web App

Disclaimer

This is a beginner's attempt to begin fullstack. I wanted to keep it freaking simple. No webpack no babel no nothing. As vanilla as possible.

I have selected Postgres/Knex/Objection for my database and Express for backend and just vanilla HTML, CSS and JavaScript for frontend. I'm a simple girl.

This project is like a random doodling process. Expect chaos in the code.

Before we start,

Here's the Demo and Code.

User Requirement

As a human being, I need a place to jot down what I do everyday to remind myself how much time I have been wasting doing nothing but sleeping.

[Oh shit, I enjoy writing nonsense too much.]

1. Design

I don't want to care about frontend this time. I am looking for a MVP, a minimal viable product.

But we need to design the database schema. Since we want to document each day as an entity, we will create a model named Day with the fields below:

{
    "id": 1,
    "exercise": false,
    "achievement": "I started dev.to 🤗.",
    "demo_link": "http://dev.to/linxea",
    "mood": "Good vibes",
    "woke_up_at": null,
    "slept_at": null,
    "created_at": "2018-05-28T16:00:00.000Z"
}

2. Develop

Setup

Download the example code here..

Install these in the terminal:

brew install psql
brew install knex

Database

Create a database called life locally by running the command:

createdb life

Create .env in folder by running the command:

npm run create:env

Open .env file and update DATABASE_URL variable with your own username/password/database_name. It should look something like this:

PORT=8000
APP_ENV=local
DATABASE_URL=postgres://username:password@localhost:5432/life-database

Scheme is defined in the knex generated file in migration folder, which is created by the command knex migrate:make create_days. I've already created one named TIMESTAMP_create_days in /deploy/db/migrations. Migrate whatever inside the migrations folder by running the command:

knex migrate:latest

To feed the database with default information from /deploy/db/seeds, running the command:

knex seed:run

Server / Client

Install the dependencies:

npm install

Run the freaking app:

npm run start

Yes I copied the content from my README file.

Optional

If your database screws up or if you want to reset the database content, you can delete the database and do everything again by running the commands:

dropdb life
createdb new-life
// Remember to update the `database_name` in .env file
knex seed:run

3. Deploy

You need to run server for this web app. Heroku provides a free and easy way to host node app. (I wish firebase hosting could do it too. T.T) However, free account means that the server will fall asleep after 30mins of non-activity. So the first load time for the lucky first person will always take reaaaaaaaaaaaaaaally long. It's not my app having really bad performance okay.

You can create a free AWS account to create a database over at RDS. ( I actually missed this part out in my video, README, everything. opps) I'm pretty new to RDS, the response time to connect to the database takes a while. Sometime I can't access the database as well due to long response time. :<

Deploy to Heroku

You can also deploy to Heroku easily using these commands (Heroku is awesome!):

brew install heroku
heroku login
heroku create you-can-name-anything-you-want-here
git push heroku origin
heroku open

Follow me at https://twitter.com/linxea_
I intend to make a video a day like Casey Neistat and Nas Daily but I spent way too long on one video, waaaaaaaay too long. T_T

DEV Community