Hot Proton


1 Comment

Node Express MongoDB based REST Services in few minutes

Node Express MongoDB based REST Services in few minutes

This is as simple as its gonna get to create a fast clean REST based API in under few minutes.

Pre-requisites
1. Install Node : https://nodejs.org/download/

2. Install Nodemon
npm install -g nodemon

3. Install Mongo DB
Win : http://docs.mongodb.org/manual/tutorial/install-mongodb-on-windows/
Max : http://docs.mongodb.org/manual/tutorial/install-mongodb-on-os-x/
Linux : http://docs.mongodb.org/manual/administration/install-on-linux/

4. Created a Git Repo for the same.
b- https://github.com/sanketss84/MEN-Rest

After node is installed.

Tools Of Trade
1. cmd.exe
2. Git Bash
3. Visual Studio Code / Sublime Text / Any code editor of choice
4. Robo Mongo : my GUI of choice for MongoDB on Windows

With the basic setup done lets get started.

. Fire up your command prompt and let the party begin.
. Created a Git Repo at GitHub so everyone can access the code.
https://github.com/sanketss84/MEN-Rest.git

. Fire up Git Bash on your directory that you want to map to this Git Repo

. Git Clone to link your Git Repo with your folder


. Open command prompt on the same directory, lets start with building a node app.

Type the following commands on the command line

npm init

This will create your package.json file with the Node App Configuration

. Install NPM Packages that will help us create our Node REST App
Express : https://www.npmjs.com/package/express
Mongoose : https://www.npmjs.com/package/mongoose
body-parser : https://www.npmjs.com/package/body-parser
node-restful : https://www.npmjs.com/package/node-restful

Commands are as follows

npm install –save express
npm install –save mongoose
npm install –save body-parser
npm install –save node-restful

! node-restful@0.1.18 wants mongoose@~3 this is the error thats received when you install “node-restful” but seems to be working fine with latest mongoose.


As you can see we are all set to now start coding our new Node App
The depenendencies have been downloaded.

!For those coming from .NET world : NPM is like Nuget for Node

. Create a the following files and folder structure

“server.js” will be our starting point
“models\product.js” will be our product model
“routes\api.js” will be out configuration for api routes

Server.js

This is the start file and we have just added ref. for our dependencies

mongoose : connects to our mongodb database “NodeMongo” which is running on
localhost and it has the the products collection.
Note : we are not going to create the MongoDB collection called “products”
the code will automatically do it for us.

CORS : Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources (e.g. fonts, JavaScript, etc.) on a web page to be requested from another domain outside the domain from which the resource originated.

Out REST API will be running on one domain and the requests originate from another domain. So in order to allow the other domain requests to talk to out rest service we need to perform this step.

models\product.js

This code defines our Product Model

router\api.js

This code defines the various Routes for enabling GET PUT POST DELETE operations.
Thats it just a few lines of code and we have our REST Routes done.

. Lets run our code.
node server.js
OR
nodemon server.js

nodemon will keep watching your code for changes and you do not need to
start and stop server again as with “node server.js command”

Now that our code is up lets do a GET Request
http://localhost:3000/api/products

. Using Postman to check GET POST PUT DELETE, its a Chrome extension to test rest based services

GET

POST

PUT

DELETE


. The data in MongoDB using Robo Mongo

. Lets Add , Commit and Push to Git Hub
git add -A
git commit -m “Initial Commit”
git push



 

Thats All, Hope you all enjoyed 🙂

Advertisements


Leave a comment

Rapid Coding with Emmet

What is Emmet?
Emmet previously Zen-coding is a super fast way of coding. There is a bit of learning curve but once you get a hang of it then you will never write code the old way. So lets get started with exploring whats this new way of writing code the rapid way or the emmet way.

Install Guides for various editors
Sublime Text 2
TextMate 1.x
Eclipse/Aptana
Coda 1.6 and 2.x
Espresso
Chocolat (available via the “Install Mixin” dialog)
Notepad++
CodeMirror2/3
Brackets

Now if you have finished installing emmet for your favourite code editor lets get started !!!!

Type This

div#header>h1.logo>a{site Name}

Expands to This

<div id="header">
<h1 class="logo"><a>site Name</a></h1>
</div>

Emmet in Action

Read More
Emmet — the essential toolkit for web-developers
Emmet Abbreviations Syntax

Emmet Tutorials with loads of samples
High-Speed Coding — Goodbye, Zen Coding. Hello, Emmet! | Smashing Coding
Faster Workflow: Mastering Emmet, Part 1
Faster Workflow: Mastering Emmet, Part 2
Faster Workflow: Mastering Emmet, Part 3
Faster Workflow: Mastering Emmet, Part 4

Emmet Cheat Sheet
Emmet Cheat Sheet
Cheat Sheet – Emmet-Cheat-Sheet.pdf


Leave a comment

LiveReload and its benefits for Web Developers and Designers

LiveReload_350

What is LiveReload exactly ?

The simple answer to this is, Edit Code in Code Editor and view results immediately in Firefox or Chrome or Safari without hitting F5 isnt that cool. Imagine you tweaked some code or made some changes to CSS files or applied some jquery effects and how cool it would be if we could view it immediately in the browsers without hitting refresh. Live Reload does that for your and makes developement much faster.

How do I install and use the browser extensions? – LiveReload Help & Support

1. Code Editor : Sublime

You will need package control installed in Sublime to install Live Reload plugin for Sublime. If you don’t have package control installed in Sublime follow this URL  for easily installing packages control in Sublime Text

Install LiveReload – Packages – Package Control for Sublime.

2. Install  Firefox Extension 2.0.8

OR

2. Install  Chrome Extension

After the extension installation is done in sublime and browsers you can start coding and view live previews in browser.

 photo LiveReload.jpg

That’s all you need and you are set.

Read N things that live reload can do for you.

Let the magic begin !!!!