Zero to Hero Deployments

So the hassle of deploying build-packs in Heroku keeps continuing. By all means we need less stress, little time plus lot of pleasure to test our deployment code simply. In this guide lets deploy our first app.

Do check my github for fully completed project. Here is a working link to my app shuttlex

Starting simply is best the solution. Our dependencies will be express and ejs.

What we need is simple.

  • Node/NPM: [node > 6.10.3 | npm >3.10.10]
  • Heroku Account
  • Little knowledge in JavaScript

Open Terminal and Run

heroku login
heroku create

Now lets create the npm project.

npm init

Finish the npm project. Install these node modules globally so we can use them from anywhere.

npm install -g express
npm install -g ejs

To those who get confused, like me understanding​ how node works. Imagine nodejs as your back-end server its written in JS. It is called Chrome’s V8 Engine (its a muscle). The same V8 runs in your Web Browser as well, to know more you should check this out (Link).

To learn more with a graphical representation. (Link)

I had the same confusion when I started back end js scripting. NodeJS follows the module design pattern. you should read more on this to know the patterns (Link). So what I Imagine it as a powerful back end car which can speed up when ever you want. It has all the features like doors you can shape, color you can pick,[these are modules] etc plus the name of your car as well. Its better if you google further.

After finishing the npm project. Add these dependencies to package.json file. What we basically need to know is that package.json plays a major role in our deployment and testing.

"dependencies": {
     "express": "4.15.3",
     "ejs": "2.5.6"
}

or you can install it to local directory.

npm install express --save
npm install ejs --save

This will automatically save it to the local package.json file.

As a developer we are telling npm before you start the project you need these brother’s help so better take their help before you run in to trouble.

Okay now from our package.json file we need to specify a way to start the nodejs server. Once we run npm we specify node modules to Open it Up first.

"scripts": {
    "start": "node server.js"
}

We need to add this start script to the package.json. It’ll manage packages added through node. You can imagine this as Ubuntu’s DPKG (debian package manager) or Arch’s PacMan.

With all this steps. We can still run the node package.

npm start
Exit Status Code 1

Running so will throw us status error code 1, it is because we don’t have a file called server.js.

To fix this create an empty file called server.js in the root directory.

Now if you run it should work without throwing errors.

This time it works because the file exist in the root directory. Now we’ll add codes to this file.

Nodejs wants you to require module whenever you start an app.

Since we are creating an express app. we need to require the express module to the server.js module.

const express= require("express");

Create an app type express. Express is a MVC framework. We have all the models views and controllers. Simply no need to reinvent the wheel

const app = express();

Now lets create a port for the environment, app will talk through a protocol

const port= process.env.PORT || 8080

All done, Now we need a client template that can mimic html. We need the set method in the express to view the engine as ejs.

app.set('view engine', ejs);

We are setting the view engine to be ejs format (express extension). What we need are the resources for the app.

Lets create public directory for the models.

app.use(express.static(__dirname + '/public'))

We are telling express that boy your view is located in the public directory.

app.get('/', function (req, res){
 res.render('index')
});

Once the render function is called to the request. Node will find for the index.ejs from the views folder and will model it using engine. If everything works we should have our view ready.

So finally we put a listener to the app, Call back this console.log

app.listen(port, function(){
  console.log('Our app is running in the port '+ port);
}) 

Server.js file it is ready to render any files from the model.

Now what we need is to set up the skeleton and start decorating our app.

Create an index.ejs in the directory views. So for this guide we will stick on to the bootstrap CDN . You can get your own designs later.

"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
// Css part
body                        { padding-top:50px; }
.container .jumbotron       { border-radius:40px; }

Add these lines. Create your app for your need. Hurrah your app is ready.

To run it locally

heroku local
App running locally

It should pop up your browser. You can use my design code as well.

Here is my code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Live App</title>
<!-- CSS -->
<!-- load bootstrap and our own personal stylesheet -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>This Is Heroku Awesome!</h1>
<p>Hello World from EJS and Express <a href="https://github.com/MurshidMac/Heroku-Buildpacks">Grab it from my github</a></p>
<a href="https://github.com/MurshidMac" class="btn btn-primary btn-lg">View Me </a>
</div>
</div>
</body>
</html>

So to deploy the app. Heroku uses something called Procfile. It tells the remote nodejs server what to run first. Create a Procfile. To know more read this Procfile guide.

web: node server.js

Add these lines and push it to remote.

git push heroku master

If everything is set up properly. we should see our app running. Hurrah finally our first web app is ready.