In the 4th (and last) part of this node.js series, we will show you how to serve static (file) content from a node.js server. We will use the generated client files of part 2 for this (because only showing hello world from the cloud in part 3 is not cool enough 🙂 ).
To serve some static content, we will use the “node-static” package from npm. To install it, type the following in the console (in the project root):
npm install node-static
I made a simple wrapper unit in Smart Mobile Studio for it, which can be downloaded here.
We will use this unit in our project and add the following code:
//create folder handler
var fileserver := TNodeStaticServer.Create(‘public');
//start http server
var server: JServer := http.createServer(
procedure(request: JServerRequest; response: JServerResponse)
begin
Console.log('http request: ' + request.url);
if request.url = '/' then
response.end('Hello World!')
else
//serve files from “public” folder
fileserver.serve(request, response);
end);Above we create a folder handler for the “public” subfolder, and pass the request to this handler in our http server.
Next we have to create the “public” folder (in the generated “www” folder of our project root) and copy all files from the “www” folder of the created client of part 2 into this folder.
To test it, press “F9” or the “Execute” button in the SMS IDE, and open the next link in your browser: http://localhost:5000/index.html
If all went fine, we see our client of part 2 in our browser (2 gauges and 2 buttons).
To double test it, we try it in the heroku foreman client too, by typing in the console:
foreman start
Hmmm… now it doesn’t seem to work (file not found):
Why not? Because we are running from the project root, and not within the “www” folder (like SMS does). So we have to add “www” in front of the “public” folder:
var fileserver := TNodeStaticServer.Create('www/public');Recompile, restart foreman and refresh (F5) the browser, et voila, now it works :).
The final step is to update our heroku app, by adding our new files and commiting our changes in for example SourceTree:
Note: you have to “stage” each file from the lower “Working Copy Changes” pane to the upper “Stage Changes” pane by clicking the up-arrow button (or right click and press “Add to index”).
After the stage preparation, we do a local “Commit” of our files, and “Push” it to Heroku to deploy it.
Now, go to http://smsnodejstest.herokuapp.com/index.html and press the buttons!
Hmmm… it doesn’t seem to work, it has a connection error:
Localhost? Ah, wait a minute, we have to change the line in our client from
FSocket := socketio.connect('http://localhost:80');To
FSocket := socketio.connect('');If you don’t specify the host, it will connect to it’s current server and port.
Recompile the client, copy the output files in the public folder, commit and push it, and then, finally, it works!
Note: as you have seen, Google Chrome is great to debug and test your html apps! (press F12 or right click and press “Inspect element” to show the debug tools in the lower pane).
Conclusion: The Heroku Cloud and Node.js and SmartMobileStudio is a very good combination to create realtime (html) servers in the cloud (even with free hosting!). Also the simple “push to deploy” works like a breeze!