Total Pageviews

Sunday 14 October 2018

NodeJS - Setup a HTTP / Local Web Server using custom port

We can run our web application on custom port which can be provided by the developer, here we can check that that the provided port is working on not.

Pre-requiste Installation
NodeJS

1.     Install npm install express
2.     Create server.js file
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/www'));
app.listen('3000');
console.log('working on 3000');
3.     In parallel root folder, create www folder
4.     Put index.html or application folder inside www folder, refer below image: 
      


5. Start server by typing node server.js in command prompt.

6. open     localhost:3000 and index.html code will execute.

Happy Coding :)



NodeJS - Setup a HTTP / Local Web Server

Sometimes we need to test our web application on different devices before deploying it on actual production server, as we need to be sure that application is working properly and we can get time to fix any UI related issues.

To resolve this issue we can setup a localhost server using NodeJs. I have listed down few steps to setup a simple HTTP server or local web server.

  1. Download and install NodeJS from https://nodejs.org.
  2. Run npm install -g http-server 
  3. Go to the path where application folder exists with index.html from command prompt.
  4. Run http-server command from command prompt.
  5. Open browser and run http://localhost:8080 and you should see your local website as mine.


Happy Coding :)

Wednesday 10 October 2018

ANGULARJS: $HTTP

$http is a service for reading data from web services (data servers). The AngularJS $http service makes a request to the server, and returns a response.

Today I am going to show a very simple way to load external JSON file in AngularJS 1 :

Sample json file : data.json

{
"Person": [
{
"Name": "Swati",
"Location": "Office"
},
{
"Name": "John",
"Location": "Home"
}
]
}


index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=" utf-8" />
<meta name="viewport" initial-scale="1.0" content="width=device-width" user-scalable="yes" />
<title>Load External JSON</title>
<script src="libs/angular.min.js"></script>
<script src="controller/loadController.js" type="text/javascript"></script>
</head>
<body ng-app="loadJsonPrj" ng-controller="LoadJsonCtrl">
<button type="button" ng-click="loadJson()"> Load External JSON </button>
<ul>
<li ng-repeat="data in getResponse">{{ data.Name+ ', ' + data.Location}}
</li>
</ul>
</body>
</html>


loadController.js

var myApp = angular.module('loadJsonPrj', []);

function LoadJsonCtrl($scope, $http) {
$scope.loadJson = function() {
$http.get('data.json').then(function(response) {
$scope.getResponse = response.data.Person;
console.log($scope.getResponse);
}, function(response) {
$scope.getResponse = "Something went wrong";
});
}
}
myApp.controller('LoadJsonCtrl', LoadJsonCtrl);



Output:

Happy Coading :)

Microsoft Logo using flexbox and Reactjs

 <!DOCTYPE html> <html> <head>     <script src="https://unpkg.com/react@18/umd/react.development.js" crossori...