Thursday, September 29, 2016

How to push node.js app to heroku


1) Download and install Heroku CLI. (For Mac : https://devcenter.heroku.com/toolbelt-downloads/osx)

2) Verify your installation
- heroku --version



3) Create free heroku account by visiting https://signup.heroku.com/signup/dc

4) Login to heroku from command line using the account that you have created above.
- heroku login (Enter registered email id and password)


5) Node, NPM and Git should be installed.


6) Create a sample Node.js app

i) Initialize (It will create package.json file)

- mkdir sample-node-project
- npm init (Follow the steps and enter few details )


ii) Install express.js

- npm install --save express

Check the package.json file, express.js should be added as dependancy. 

sample-node-project raja$ cat package.json 
{
  "name": "sample-node-project",
  "version": "1.0.0",
  "description": "test-example",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "examples"
  ],
  "author": "praja",
  "license": "ISC",
  "dependencies": {
    "express": "^4.14.0"
  }
}

iii) Create Server

- sample-node-project raja$ vi index.js
- Add the following line into index.js

var express    =    require('express');
var app        =    express();
var server     =    app.listen(3000,function(){
    console.log("We have started our server on port 3000");
});

* Update values for "scripts" key as following in package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  }

iv) Start the server

- npm start


v) Open the browser and type http://localhost:3000
- A blank page ( Cannot GET / ) will be displayed as we haven't set any route yet.

vi) Set the Router 

Add the following line before server start.

app.get('/',function(req,res){
   res.send('Hello world');
});















vii) Stop and Start the server again.
viii) Go to http://localhost:3000
You should see "Hello World". As the router is set, so server is responding with "Hello world" response. 


7) Push the existing node.js project to GIT.


i) git init
ii) git status


iii) create .gitignore file add the following lines.
# Node build artifacts
node_modules
npm-debug.log

iv) git status
v) git add .
vi) git commit -m "First Commit - Node Sample"


vii) Create a new repository in https://github.com. Check the repository URL. (For ex: https://github.com/sampleuser/FST-Node-Sample.git)

viii) git remote add origin "remote repository url"

ix) git push origin master




Final Changes before pushing node.js project to Heroku

8) Add node.js engine details in package.json so that both local and heroku environment will be on sync.

- Modify package.json, add node.js engine details (you can get the version by typing "node -v" in terminal)

"engines": {
    "node": "6.3.0"
}


9) Specify a start script for heroku. 

Heroku first looks for a Procfile. If no Procfile exists for the app, it will attempt to start a default web process via the start script in package.json.

Create a file name called "Procfile". 
Add the below content.

web: node index.js 


10) We can not hardcode the server listening port (local env : 3000) for heroku. So modify the app listen code in index.js with the following.

var server     =    app.listen(process.env.PORT || 3000,function(){
    console.log("We have started our server on port 3000");
});


11) Build the project and run it locally and load the browser with http://localhost:3000

App should run properly. "Hello World" should be seen.

12) All the latest changes should be pushed to git before the project goes to heroku. 

** Push all modified code changes to git.


Final Code Structure :






Create App in Heroku

13) Login to heroku with your free account that you have created in the first place.

https://id.heroku.com/login



14) Create a new app from heroku dashboard by clicking [New -> Create new app]




15) Give your application name and click "Create"





16) Check the GIT Url of the application from the settings tab.


 



17) Go to the terminal of your nodejs project. Execute the following command.

 $ git remote add fstheroku https://git.heroku.com/fast-sample-nodejs-app.git



18) Now push the code to heroku

$ git push fstheroku master































19) Open the deployed url in the browser. In my case it is https://fast-sample-nodejs-app.herokuapp.com/



Thursday, September 22, 2016

How to connect to AWS from Mac using SSH

Follow the steps to connect to AWS from Mac

- Find the full path of the .PEM file which has the private key (You must have got it while creating the the aws instance)
- Open the Mac Terminal and execute the following command.

ssh -i /home/user1/.ssh/aws.pem root@aws_instance_ip

Note:
If you have already used a .PPK file in your windows system then follow the steps below to generate the .PEM file.

- Check if puttygen is installed

$ puttygen --version

puttygen: Release 0.67

- If puttygen is not installed then install putty using brew.
puttygen will come with putty.

  * Install Ruby in your Mac box.
  * Run the following command :

    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

  <More info on brew from http://brew.sh/ site>

  Once brew is installed, install putty

  $ brew install putty

- Check if puttygen is installed

$ puttygen --version

puttygen: Release 0.67

- Output the data from .PPK file to .PEM file using puttygen

$ puttygen aws.ppk -0 private-openssh -o aws.pem

Once you generated the .PEM file connect to aws instance using ssh.
ssh -i /home/user1/.ssh/aws.pem root@aws_instance_ip

Thursday, August 25, 2016

How to push Angular Project to Git ?

A) Create Angular Project using Yoman

- install node.js and npm
- npm install -g yo
- npm install -g generator-webapp
- npm install -g bower
- yo webapp (Select the options during the process)
- npm install -g gulp
- gulp serve (Check if the application is running on localhost:9000)




** For reference  - Folder structures from Sublime





B) Create a new repository in Git

- Go to https://github.com/
- Signup for a new account or login to your existing account.
- Click on the + button from upper right corner and click on “New Repository”



- Enter name for your repository, optional description, choose public/private, don’t need to add .gitignore and README as we will push these files from our angular project and click “Create repostiary” button.







C) Push your code to Git

- Install git from (https://git-scm.com/downloads)

- Enter inside your project folder

$ pwd
/Users/demouser/FST
$ ls
app bower_components gulpfile.js package.json
bower.json dist node_modules test

- git init (Initialize the local directory as a Git repository.)
Initialized empty Git repository in ../FST/.git/

$ ls .git
HEAD config hooks info refs
branches description index objects

- git status (Check the status of the files)

On branch master

Initial commit

Untracked files:
  (use "git add <file>..." to include in what will be committed)

.babelrc
.bowerrc
.editorconfig
.gitattributes
.gitignore
.yo-rc.json
app/
bower.json
gulpfile.js
package.json
test/

nothing added to commit but untracked files present (use "git add" to track)

- git add * (This command will add the files to the new local repository. This stages them for the first commit.)

The following paths are ignored by one of your .gitignore files:
bower_components
dist
node_modules
Use -f if you really want to add them.

- git status

On branch master

Initial commit

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)

new file:   app/apple-touch-icon.png
new file:   app/favicon.ico
new file:   app/index.html
new file:   app/robots.txt
new file:   app/scripts/main.js
new file:   app/styles/main.css
new file:   bower.json
new file:   gulpfile.js
new file:   package.json
new file:   test/index.html
new file:   test/spec/test.js

Untracked files:
  (use "git add <file>..." to include in what will be committed)

.babelrc
.bowerrc
.editorconfig
.gitattributes
.gitignore
.yo-rc.json

- git commit -m “Test First Commit”

[master (root-commit) ac58ce8] Test First Commit
 11 files changed, 454 insertions(+)
 create mode 100644 app/apple-touch-icon.png
 create mode 100644 app/favicon.ico
 create mode 100644 app/index.html
 create mode 100644 app/robots.txt
 create mode 100644 app/scripts/main.js
 create mode 100644 app/styles/main.css
 create mode 100644 bower.json
 create mode 100644 gulpfile.js
 create mode 100644 package.json
 create mode 100644 test/index.html
 create mode 100644 test/spec/test.js

- Add the git repository url as remote origin

git remote add origin “repo url"


- Push the code to github

git push origin master 




D) Check the pushed code in git



Note : Please add a README file and push both README and .gitignore to git. Its missing in repository.

Wednesday, August 24, 2016

How to create angular project using YEOMAN

Create angular project using YEOMAN :

1)
Create a project folder and go inside. ($ mkdir FST, $cd FST)
Please install node.js and npm package manager globally using option "-g” as it can be used in other places for different projects.

- node.js can be installed from https://nodejs.org/en/. npm is installed as a part of the node. 
- To get latest npm, run the following command “sudo npm install npm -g” 


2)
Install yo and webapp generator (http://yeoman.io/)

- npm install -g yo
- npm install -g generator-webapp


3)
Install bower, a package manager. (https://bower.io/)

- npm install -g bower


4)
Create new project using generator
- yo webapp
- Select the options during the process. I have selected “Bootstrap” and “BDD”


















5) 
Install gulp (http://gulpjs.com/). You can build the project using it. 
I have installed gulp locally and globally so you are seeing CLI version and Local version. You may see only CLI version.

- npm install -g gulp


- Check the project structures.


Note :
Since the generator already run "npm install" and "bower install", so you can see the node_modules and bower_components folder with all the installed modules.
** npm will pick from package.json folder
** bower will pick from bower.json
** Any other modules need to be installed for your project then add them to respective package/bower json file and run npm/bower install.

6)
Start the server using gulp. Tasks are present in gulpfile.js

- gulp serve 

** Server will be starting and listen at 9000 port. You can change the port in gulpfile.js file if you want.





Monday, June 13, 2016

Full Stack Developer

A full stack developer is the one who has working knowledge of different layers from frontend to backend. He should have the knowledge of different databases, servers, networks, hosting environments and mobile technologies.

He may not be expert in all the fields but should have good understanding of all the layers. I personally think the developer should at least be fluent in a specific field i.e. either in frontend (full stack frontend developer) or backend (fullstack backend developer).

Following are few of the technologies a full stack developer can look at.

Frontend:
HTML/HTML5, CSS/CSS3(LESS, Media Queries),  AJAX, BootStrap, Java Script, Jquery, Angular, React, Vue etc.

Backend:
Programming Language - Java, Scala, Ruby, Python, PHP, NodeJS, C#, C++ etc.
Databases - MySQL, MongoDB, Cassandra, Postgres etc.
Web servers - Apache, Jetty, Nginx

System Engineering:
AWS, Rackspace (Cloud), Elasticsearch, Solr (Searching), Memcached, Redis (Caching), Nagios(Monitoring)