install express
|
1 |
npm install express |
You will then see node_modules folder in your project directory. Inside node_modules, you’ll see express framework folder. You are now ready to use express.
In your project directory, create an app.js file.
Then use require function to load in the express library:
|
1 |
var express = require('express'); //load in express library |
Then get the application instance by calling express().
After that let’s designate the folder ‘public’ to be static and serve up web pages from there. We place all web pages into the ‘public’ folder from now on.
|
1 |
app.use(express.static('public')); |
Finally, we use function ‘get’ to receive GET events and then have a handler to process that GET event. In our case, we simply create a local array on the stack…and simply throw it back with the response object.
|
1 2 3 4 5 |
app.get('/blocks', function(request, response){ var blocks = ['Fixed', 'Movable', 'Rotating']; response.json(blocks); //responds back to the client }); |
app.js code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
console.log('apps.js start'); var express = require('express'); //load in express library var app = express(); //load that function, get application instance app.use(express.static('public')); //handls GET request on path /blocks.....which is requested by client.js app.get('/blocks', function(request, response){ var blocks = ['Fixed', 'Movable', 'Rotating']; response.json(blocks); //responds back to the client }); app.listen(3000, function(){ console.log('Listening on port 3000'); }); console.log('app.js end'); |
public/index.html code
Create a public folder in your project directory. Throw in the image blocks.png. Then create index.html and Put in the code below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <head> <title>my blocks</title> </head> <body> <h1>Building Blocks 5:35pm</h1> <img src='blocks.png' /> <ul class='block-list'></ul> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> if (typeof jQuery != 'undefined') { console.log("jQuery library is loaded!"); }else{ console.log("jQuery library is not found!"); } </script> <script src="client.js"></script><!-- adds <li>data</li> to ul.block-list --> </body> </html> |
Basically, we check to see if jQuery library is loaded. We then load in the block.png image and also load in client.js file.
public/client.js
This javascript is embedded in the index.html file. Once the page loads, we use jQuery’s
|
1 |
$.get() |
method to load data from the server using HTTP GET request. It requests the url ‘/blocks’ from the server, and uses the appendToList function to process whatever data comes back with the response object.
When it comes back…we create an empty array, and fill it with the data from the response object. For every index i in blocks, we get the text and wrap it inside of li tags. Then push it onto our empty array.
Finally, we have our ul .block-list add the list of li tags.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function appendToList(blocks) { var list = []; //create list of data for(var i in blocks) { //display block data list.push( $('<li>', {text:blocks[i]}) ); } $('.block-list').append(list); //append our li lists to ul } }); |
client.js code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
console.log('client.js start'); $(function() { console.log('client.js - entered main function!'); //The $.get() method loads data from the server using a HTTP GET request. //data returned gets put into appendToList $.get('/blocks', appendToList); function appendToList(blocks) { console.log('entered appendToList function with parameter'); console.log('length of returned block: ' + blocks.length); var list = []; //create list of data for(var i in blocks) { //display block data list.push($('<li>', {text:blocks[i] })); } $('.block-list').append(list); //append our li lists to ul console.log('finished appending blocks'); } }); console.log('client.js end'); |
Run it
Go into the project directory where app.js and folders public, node_modules are, and in your terminal go:
node app.js
Then open a browser and
localhost:3000/index.html
You will see that it runs the code in our html from top to down…including our client.js
The client.js will trigger the GET event call towards the browser which will return an array of words to our page. Then It puts the text into li tags, and in turn appends the list of li tags onto a ul tag to be displayed on the browser.