{"componentChunkName":"component---src-templates-blog-post-js","path":"/2020/Jan/9/node-http-server/","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Node Web Server- HTTP\",\n  \"date\": \"2020-01-09T00:00:00.000Z\",\n  \"update\": \"2020-04-16T00:00:00.000Z\",\n  \"published\": true,\n  \"author\": \"Mervin Buenaflor\",\n  \"tags\": [\"node\", \"http\", \"server\", \"javascript\", \"es6\", \"vscode\", \"windows\"]\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component '\" + name + \"' was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"Node is widely used in web applications. So, a simple http server is probably the most sensible starting point.\\nWith node's built-in http api, we can readily create an application that takes an http request and sends back a response.\"), mdx(\"p\", null, \"If you don't have a node development environment set-up, you should read \", mdx(GatsbyLink, {\n    to: \"/2020/Jan/8/nodejs-dev-env/\",\n    mdxType: \"GatsbyLink\"\n  }, \"Node Development Environment Set-up - For Windows\"), \".\"), mdx(\"p\", null, \"Run a powershell terminal, and change to your home directory.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-console\"\n  }), \"cd ~/\\n\")), mdx(\"p\", null, \"Create our project directory, and change to that directory.  \"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-console\"\n  }), \"mkdir http-server\\ncd http-server\\n\")), mdx(\"p\", null, \"Type the following command to initialize our project with default \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"package.json\"), \".\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-console\"\n  }), \"npm init -y\\n\")), mdx(\"p\", null, \"Now, let's open our current folder in visual studio code.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-console\"\n  }), \"code .\\n\")), mdx(\"p\", null, \"In visual studio code, open the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"package.json\"), \" file.  You should see something similar to the following: \"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"{\\n  \\\"name\\\": \\\"http-server\\\",\\n  \\\"version\\\": \\\"1.0.0\\\",\\n  \\\"description\\\": \\\"\\\",\\n  \\\"main\\\": \\\"index.js\\\",\\n  \\\"scripts\\\": {\\n    \\\"test\\\": \\\"echo \\\\\\\"Error: no test specified\\\\\\\" && exit 1\\\"\\n  },\\n  \\\"keywords\\\": [],\\n  \\\"author\\\": \\\"\\\",\\n  \\\"license\\\": \\\"ISC\\\",\\n}\\n\")), mdx(\"p\", null, \"As you can see, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"package.json\"), \" contains data about our project including name, version, and description.\\nThis file will also contain a list of our project's dependencies when we start installing packages with npm.\\nThe \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"main\"), \" field is the entry point. It tells visual studio code which file to launch (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"index.js\"), \" in this case) when we run or start debugging the program. \"), mdx(\"p\", null, \"We'll name our entry point \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"server.js\"), \". So, let's change the value of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"main\"), \" field from \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"index.js\"), \" to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"server.js\"), \".\\nLet's also add a field \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type\"), \" and set its value to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"module\"), \", so we can write code in es6 format.\\nThe file \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"package.json\"), \" should now look like the following:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"{\\n  \\\"name\\\": \\\"http-server\\\",\\n  \\\"version\\\": \\\"1.0.0\\\",\\n  \\\"description\\\": \\\"\\\",\\n  \\\"main\\\": \\\"server.js\\\",\\n  \\\"type\\\": \\\"module\\\",\\n  \\\"scripts\\\": {\\n    \\\"test\\\": \\\"echo \\\\\\\"Error: no test specified\\\\\\\" && exit 1\\\"\\n  },\\n  \\\"keywords\\\": [],\\n  \\\"author\\\": \\\"\\\",\\n  \\\"license\\\": \\\"ISC\\\"\\n}\\n\")), mdx(\"p\", null, \"Create \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"server.js\"), \" in the root directory of our project then copy and paste the following code:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"// server.js\\nimport http from 'http'\\n\\nconst httpServer = http.createServer((req, res) => {\\n    res.statusCode = 200; // OK\\n    res.setHeader('Content-Type', 'text/plain');\\n    res.write(\\\"Hello world!\\\");\\n    res.end();\\n});\\n\\nhttpServer.listen(4000, () => {\\n    console.debug(\\\"HTTP Server running on port 4000.\\\");\\n})\\n\")), mdx(\"p\", null, \"On the menubar, click \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Run -> Start Without Debugging\"), \" or press \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Ctrl + F5\"), \" on your keyboard to run our program.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Select Node.js from the list of environment, and voila! you have an http server running on port 4000.\"), mdx(\"p\", null, \"Open a browser, and type \", mdx(\"a\", {\n    href: \"http://localhost:4000\"\n  }, \"http://localhost:4000\"), \".  You should see \\\"Hello world!\\\" displayed on the screen.\"), mdx(\"p\", null, \"Now, let's modify \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"server.js\"), \" to read some of the request fields and response with a \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"JSON\"), \" string.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"import http from 'http'\\n\\nconst httpServer = http.createServer((req, res) => {\\n    const {method, url} = req;\\n    res.statusCode = 200; // OK\\n    res.setHeader('Content-Type', 'application/json');\\n    const result = {action: method, path: url};\\n    res.write(JSON.stringify(result));\\n    res.end();\\n});\\n\\nhttpServer.listen(4000, () => {\\n    console.debug(\\\"HTTP Server running on port 4000.\\\");\\n})\\n\")), mdx(\"p\", null, \"On the menubar, click \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Run -> Restart Debugging\"), \" or press \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Ctrl + Shift + F5\"), \" to restart our server.\\nGo back to the browser and reload the page.\\nYou should see the \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"JSON\"), \" string \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"{\\\"action\\\":\\\"GET\\\",\\\"path\\\":\\\"/\\\"}\"), \" displayed on the screen.\"), mdx(\"p\", null, \"If you want to run the server outside of visual studio, open a terminal and type the following command in our project directory.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-console\"\n  }), \"node server.js\\n\")), mdx(\"p\", null, \"That's it pancit!.  You now have an http server that reads a request, and sends as response.  \"));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"Node is widely used in web applications. So, a simple http server is probably the most sensible starting point. \nWith node's built-in http…","frontmatter":{"title":"Node Web Server- HTTP","date":"January 09, 2020","update":"April 16, 2020"}}},"pageContext":{"slug":"/2020/Jan/9/node-http-server/","previous":{"fields":{"slug":"/2020/Jan/8/nodejs-dev-env/"},"frontmatter":{"title":"Node Development Environment Set-up - For Windows"}},"next":{"fields":{"slug":"/2020/Jan/10/node-https-server/"},"frontmatter":{"title":"Node Web Server - Localhost HTTPS"}}}},"staticQueryHashes":["2537605155","63159454"]}