How to localhost a webapp with nodejs

Question

I'm working through designing my first webapp, I've already written a significant portion of the frontend and now I want to make a very simple backend to begin implementing some of the functionality. I've spent the last few days learning as much as I can about effective backend development and other various things, but I've run into a huge problem. I fundamentally don't understand how to attach my front end and my backend (which I want to use nodejs for).

All I want is to use my browser to go to localhost:8080 and automatically see the html document with my frontend then within my frontend code have the app communicate with the server (to get json info or instruct the server to add things to a database or things like that).

Answer 1

Once you have installed node in your system.

Folder structure:

Keep your files in public folder inside app folder

Navigate to your application folder in Terminal or Command Prompt :

Then create a file as package.json and keep following code in it:

{

    "name" : "YourAppName",
    "version" : "0.0.1",
    "description" : "App description",
    "dependencies" : {
        "mime" : "~1.2.7"
    }
}

then come back to terminal and run npm install

Then create a file as server.js and keep following code in it:

var http = require("http");
var fs = require("fs");
var path = require("path");
var mime = require("mime");
var cache = {};
function send404(responce){
    responce.writeHead(404,{"content-type":"text/plain"});
    responce.write("Error 404: resourse not found");
    responce.end()
}
function sendFile(responce,filePath,fileContents){
    responce.writeHead(200,{"content-type": mime.lookup(path.basename(filePath))});
    responce.end(fileContents);
}
function serveStatic(responce,cache,abspath){
    if(cache[abspath]){
        sendFile(responce,abspath,cache[abspath]);
    }else{
        fs.exists(abspath,function(exists){
            if(exists){
                fs.readFile(abspath,function(err,data){
                    if(err){
                        send404(responce);
                    }else{
                        cache[abspath] = data;
                        sendFile(responce,abspath,data);
                    }
                })
            }else{
                send404(responce)
            }
        })
    }
}
var server = http.createServer(function(request,responce){
    var filePath = false;
    if(request.url == '/'){
        filePath = 'public/index.html';
    }else{
        filePath = 'public'+request.url;
    }
    var abspath = './'+filePath;
    serveStatic(responce,cache,abspath);
})
server.listen(8080,function(){
    console.log("server running on 3000");
})

** This code is to help you get started with node js, for better understanding go to node documentation . Read about the mime module too, it is being used here.

Answer 2

You can use free cloud services such as Parse.com . this js sdk

Answer 3

You can use Grunt and using Connect plugin, create a simple server, sufficient for developing pure JS web applications.

Using Grunt basically requires 2 files

• package.json
• Gruntfile.js

package.json defines the dependencies required by Grunt to run. In your case it would include

• grunt
• grunt-contrib-connect (The plugin for setting up a server)`

It may also include additional dependencies based on your requirements.

Gruntfile.js defines the configuration for dependencies. In your case how the server should be setup. If you use plugins other that grunt-contrib-connect you should configure them too.

Reference:

• Grunt: The JavaScript Task Runner