Example setup for NERDS stack

I wanted to share an example of how to get NERDS (Node, Express, React, Database using SQL) stack up and running on Heroku. This is NOT a comprehensive guide. It’s meant to be an example or reference point for someone who has worked with the various components but maybe not together.

Some assumptions:

  • Node (and possibly nodemon) is installed.
  • Postgres is installed.
  • You have a heroku account
  • You have heroku CLI installed.
  • You’re using github.

My examples are using a bash shell.

So lets get to it. First, lets create the file structure. Open up your terminal:

$  mkdir project && cd project && touch server.js
$ mkdir public public/css public/js
$ touch public/index.html public/js/app.js

Now that you’ve got the file structure, lets create a new node project:

$  npm init

I just take all the defaults at this point. Make sure your entry point starts at server.js (or whatever you’re naming it).

$  npm install express body-parser morgan --save
$ touch .gitignore

Open the .gitignore file and put node_modules in there so that it doesn’t get pushed onto github.

Here’s how the package.json should look like:

{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.18.3",
"express": "^4.16.3",
"morgan": "^1.9.0"
}
}

Time to get some broiler plate stuff into server.js. At this point we just want to get node/express listening on a port and making sure we can render a page through react on that port.

In server.js:

Next is the broiler plate for your html file ( in ./public/index.html). I’m going to be using CDN for access to react.

Then some more broiler plate for your react app. (in ./public/js/app.js):

Start nodemon, go to localhost:3000 on your browser and you should see Hello rendered.

Easy stuff so far right? Lets add postgres to the mix.

I’m going to use pg-promise to interface with postgres. Read more about it here: https://github.com/vitaly-t/pg-promise#about

I’ll also be using bluebird for promises: http://bluebirdjs.com/docs/why-bluebird.html

So, lets go ahead and install them (from terminal again):

$  npm install pg-promise bluebird --save

Any controller that needs to connect to the database will need access to a pg-promsie object. I’m sure there’s a better way to do this but I ended up creating a module that houses the pg-promise object and import that into my various controllers.

I first created a new folder called db and create a file in that folder called db.js (or whatever you want to name it).

In terminal from the root of your project:

$ mkdir db && touch db/db.js

Open db/db.js and enter the following:

A couple of things to note on the snippet above. Make sure to replace a few items on line 13: username and password with your database username and password. Also dbname with the actual database name. (I would recommend not connecting through an SA account and create an actual user account with a password).

Any controller that needs to make a db connetion needs to import the module above. For example, if we create a users controller (in terminal from root):

$  mkdir controllers && touch controllers/usercontroller.js

So if you wanted to create a quick route to retrieve all users — open that controller and enter the following:

At this point, the table actually has to exist, so create one in postgres:

CREATE TABLE users (
id SERIAL PRIMARY KEY,
name VARCHAR(50),
password VARCHAR(255),
email VARCHAR(100)
);
INSERT INTO users (name, password, email) VALUES ('test', 'testpass', 'test@test.com');

Make sure to import the user controller router in server.js (or whatever your start point is). Also make sure to import morgan and bluebird (since we’re going to be testing routes I like to use morgan to get more info):

At this point, you should be able to test the route. Go ahead and fire up nodemon and visit route localhost:3000/users to pull all user information.

Works? Great.

Now lets talk about how to get this on heroku. Our code should already have the correct ports and database url:

// From db.js:
const connectionString = process.env.DATABASE_URL || 'postgresql://username:password@localhost:5432/dbname';
// From server.js:
const port = process.env.PORT || 3000;

So we really just need to create a heroku project and push it up. In your project root folder

$ heroku create <appname>
$ heroku addons:create heroku-postgresql:hobby-dev

That should’ve created a heroku app and added postgres to the heroku app.

Make sure that you see heroku alias for git remote repository:

$ git remote -v

All that’s left to do is to push it up and test it.

$ git push heroku master

Go ahead and navigate to the base url for your heroku app. You should see hello rendered on the page.

Before actually testing the user route. Make sure to login to the heroku postgres db and recreate the users table and insert a record. This connects you:

$ heroku pg:psql

Create the database and insert a record:

CREATE TABLE users (
id SERIAL PRIMARY KEY,
name VARCHAR(50),
password VARCHAR(255),
email VARCHAR(100)
);
INSERT INTO users (name, password, email) VALUES ('test', 'testpass', 'test@test.com');

Visit the users route (https://heroku-app-url/users) and you should see the json getting pulled back!

Like what you read? Give Shawn Cheng a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.