Build A CRUD Application From the Back to the Front Using Node, EJS, Express, and ES6

I’m working on a toy project that gets, posts, updates, and deletes data from the backend and at the same time renders that information on the frontend. This project is part of a bigger application, which I will not talk about here because that will require everyone who reads this blog to sign an NDA. This portion of the application allows users to search for current projects in the bay area that need physical (people power), financial and skill-based resources.

Step 1: Set Up Node Dependencies for ES6, Testing, and Local Server

npm i -D babel-cli babel-core babel-preset-es2015 babel-register 
body-parser chai chai-change ejs express logger mocha morgan path
pg-promise underscore

Step 2: Add this script to transpile your ES6 code into ES5, run your tests, and your server

"scripts": {
"build": "babel --copy-files src --out-dir dist",
"build:watch": "npm run build -- --watch",
"start:dev": "nodemon dist/server.js",
"test": "mocha --compilers js:babel-register ./test/*.js --recursive"
}

Step 3: Set up your application’s folder structure

Step 4: Create an HTML boiler plate (to funnel your data into) using Bootstrap and some CSS

Step 5: Hard code some data in your app.js and create a template to show that onto your boiler plate page. My sample below uses underscore.

let projTemplate = _.template(
'<% _.each(projects, function(project, index, projects) { %>' +
'<div class="col-md-3">'+
'<h5><%= project.project_name %></h5>'+
'<h5><%= project.address %></h5>'+
'<h5><%= project.city %></h5>'+
'<h5><%= project.state %></h5>'+
'<h5><%= project.zip %></h5>'+
'<h5><%= project.phone %></h5>'+
'<h5><%= project.contact %></h5>'+
'<h5><%= project.email %></h5>'+
'</div>' +
'<% }); %>')
let content = projTemplate({
projects: projects
})
const proj_container = document.querySelector('.projects')
proj_container.innerHTML = content

Step 6: Add dummy data into your postgres through a sql file.

//schema.sql
DROP DATABASE IF EXISTS my_project;
CREATE DATABASE my_project;
\c my_project;
CREATE TABLE projects(
id SERIAL PRIMARY KEY,
name VARCHAR(255),
address VARCHAR(255),
city VARCHAR(255),
state VARCHAR(255),
zip VARCHAR(255),
phone VARCHAR(255),
email VARCHAR(255)
);
INSERT INTO projects (name, address, city, state, zip, phone, email)
VALUES ('nature', '1234 my street', 'berkeley', 'ca', 94705, 5102346789, 'a@a.com');

Step 7: Connect the database to your application. First, require your dependencies in your database.js file

//in your database.js file
const promise = require('bluebird')
const options = {
promiseLib: promise
}
const databaseName = 'my_project'
const pgp = require('pg-promise')(options)
const connectionString = `postgres://@localhost:3000/${databaseName}`
const db = pgp(connectionString)

Step 8: Write a function in your database.js file that will get all of your dummy data. Don’t forget to export that function.

//get all projects
const getAllProjects = () => db.any('select * from projects')
//export your function
module.exports = { getAllMyProjects: getAllMyProjects }

Step 9: Create a route in your index.js file in your routes folder, import your database file and call your function inside of your route.

import express from 'express'
import db from '../public/database'
const router = express.Router()
router.get( '/api/projects', (request, response, next) => {
db.getAllProjects()
.then( projects => response.json({ projects }) )
.catch( error => next( error ) )
})
module.exports = router;

Step 10: Test that there is a response being returned from the server. Go to the route and your JSON data should appear.

Like what you read? Give Ai Santos a round of applause.

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