{"id":2916,"date":"2019-09-25T13:57:56","date_gmt":"2019-09-25T18:57:56","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=2916"},"modified":"2019-09-25T14:03:05","modified_gmt":"2019-09-25T19:03:05","slug":"node-js-how-to-launch-a-temporary-server-and-view-output-in-a-web-browser","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2019\/09\/25\/node-js-how-to-launch-a-temporary-server-and-view-output-in-a-web-browser\/","title":{"rendered":"Node.js: How to launch a temporary server and view output in a web browser"},"content":{"rendered":"\n<p>Once you have successfully written some node.js code and have viewed the results via command line, (see my previous article about this, linked below) the next logical step is to be able to write node.js code that can use HTML and be viewable in a web browser.<\/p>\n\n\n\n<figure class=\"wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-chris-nielsen-code-walk\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"dcY8GbjIjz\"><a href=\"http:\/\/bluegalaxy.info\/codewalk\/2019\/09\/20\/node-js-how-to-write-node-js-code-locally-and-test-using-the-command-line\/\">Node.js: How to write node.js code locally and test using the command line<\/a><\/blockquote><iframe loading=\"lazy\" title=\"&#8220;Node.js: How to write node.js code locally and test using the command line&#8221; &#8212; Chris Nielsen Code Walk\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" src=\"http:\/\/bluegalaxy.info\/codewalk\/2019\/09\/20\/node-js-how-to-write-node-js-code-locally-and-test-using-the-command-line\/embed\/#?secret=dcY8GbjIjz\" data-secret=\"dcY8GbjIjz\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>To view node.js output in a web browser, we can use the node.js module <code>http<\/code>. This can be pulled into the script using a &#8216;require&#8217;. For example:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">var http = require('http');<\/pre>\n\n\n\n<p>With the &#8216;http&#8217; module pulled in via require, here is the rest of the setup needed to use a temporary server in node:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">http.createServer(function (req, res) {\n  res.writeHead(200, {'Content-Type': 'text\/html'});\n  res.write(\"&lt;h1>Hello World!&lt;\/h1>\\n\\n\");\n  res.end();\n\n}).listen(8080);<\/pre>\n\n\n\n<p>The http module calls a function called <code>createServer<\/code>. Notice the <code>.listen(8080)<\/code> at the bottom. This indicates that we will be able to see the script output in our browser at localhost:8080.<\/p>\n\n\n\n<p>Note: You can use any open port you want for this. For example <code>.listen(3001)<\/code> would work also. <\/p>\n\n\n\n<p>Some other things to notice about this setup:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>In res (short for response), <code>writeHead<\/code>, I used a Content-Type of &#8216;text\/html&#8217;<\/li><li>The <code>write<\/code> function is used for setting what you want output to the browser screen<\/li><li>There is a <code>res.end();<\/code>  <\/li><\/ul>\n\n\n\n<p>Here is what the complete code looks like so far:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">var http = require('http');\n\nhttp.createServer(function (req, res) {\n  res.writeHead(200, {'Content-Type': 'text\/html'});\n  res.write(\"&lt;h1>Hello World!&lt;\/h1>\\n\\n\");\n  res.end();\n\n}).listen(8080);\n<\/pre>\n\n\n\n<p>With all of this setup complete, I saved the document as &#8216;hello.js&#8217;.<\/p>\n\n\n\n<p>Now if we go straight to this web location in our browser, we will see some kind of &#8220;unable to connect&#8221; message, because we haven&#8217;t yet initiated the server via the command line. For example, in Firefox I saw this :<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"805\" height=\"376\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/09\/image-10.png\" alt=\"\" class=\"wp-image-2922\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/09\/image-10.png 805w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/09\/image-10-300x140.png 300w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/09\/image-10-768x359.png 768w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/09\/image-10-676x316.png 676w\" sizes=\"auto, (max-width: 805px) 100vw, 805px\" \/><\/figure>\n\n\n\n<p>So in order to launch the temporary server to see the output in our browser, we must run the node.js script via the command line. For example:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"552\" height=\"83\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/09\/image-11.png\" alt=\"\" class=\"wp-image-2923\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/09\/image-11.png 552w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/09\/image-11-300x45.png 300w\" sizes=\"auto, (max-width: 552px) 100vw, 552px\" \/><\/figure>\n\n\n\n<p>Now when I refresh the browser, I see the expected output:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"373\" height=\"115\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/09\/image-12.png\" alt=\"\" class=\"wp-image-2924\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/09\/image-12.png 373w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/09\/image-12-300x92.png 300w\" sizes=\"auto, (max-width: 373px) 100vw, 373px\" \/><\/figure>\n\n\n\n<p>You may notice that the command line is stuck on the line after &#8216;node hello.js&#8217;. In order to get control back in the command window we can type <code>CTRL+c<\/code> on Windows or <code>CMD+c<\/code> on Mac.<\/p>\n\n\n\n<p>Note: The anonymous function call in the code sample shown above is actually a callback function! Another way to look at what is going on is to give the callback function a name (&#8220;handleRequest&#8221;) and separate it out from the http.createServer() function call. For example:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function handleRequest(req, res) {\n  res.writeHead(200);\n  res.end(\"hello world\\n\");\n}\n\nhttps.createServer(options, handleRequest).listen(8080);<\/pre>\n\n\n\n<p>For more information about the <code>http.createServer()<\/code> function, see:<br><a href=\"https:\/\/nodejs.org\/api\/http.html#http_http_createserver_options_requestlistener\">https:\/\/nodejs.org\/api\/http.html#http_http_createserver_options_requestlistener<\/a><br><br>For more information about the <code>res.writeHead()<\/code> function, see:<br><a href=\"https:\/\/nodejs.org\/api\/http.html#http_response_writehead_statuscode_statusmessage_headers\">https:\/\/nodejs.org\/api\/http.html#http_response_writehead_statuscode_statusmessage_headers<\/a><br><br>For more information about the <code>res.end()<\/code> function, see:<br><a href=\"https:\/\/nodejs.org\/api\/http.html#http_response_end_data_encoding_callback\">https:\/\/nodejs.org\/api\/http.html#http_response_end_data_encoding_callback<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Once you have successfully written some node.js code and have viewed the results via command line, (see my previous article about this, linked below) the next logical step is to be able to write node.js code that can use HTML and be viewable in a web browser. To view node.js output in a web browser, &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2019\/09\/25\/node-js-how-to-launch-a-temporary-server-and-view-output-in-a-web-browser\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Node.js: How to launch a temporary server and view output in a web browser<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,205],"tags":[208,209,45,58],"class_list":["post-2916","post","type-post","status-publish","format-standard","hentry","category-javascript-language","category-node-js","tag-callback","tag-http-createserver","tag-javascript","tag-node-js"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2916","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=2916"}],"version-history":[{"count":9,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2916\/revisions"}],"predecessor-version":[{"id":2929,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2916\/revisions\/2929"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=2916"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=2916"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=2916"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}