{"componentChunkName":"component---src-templates-blog-post-js","path":"/2020/Jan/10/node-https-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 - Localhost HTTPS\",\n  \"date\": \"2020-01-10T00:00:00.000Z\",\n  \"update\": \"2020-04-16T00:00:00.000Z\",\n  \"published\": true,\n  \"author\": \"Mervin Buenaflor\",\n  \"tags\": [\"node\", \"express\", \"https\", \"server\"]\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, \"To better protect end-users, we have to make sure that communication between a browser and our server is encrypted \", \"\\u2014\", \" this is where https comes in.\\nHTTPS requires SSL certificates issued by Certificate Authority which \", mdx(\"a\", {\n    href: \"https://letsencrypt.org/\"\n  }, \"LetsEncrypt\"), \" makes quite easy to install on a production environment. \"), mdx(\"p\", null, \"A node application usually sits behind a proxy, so https may not be needed.\\nHowever, as developers, we sometimes have to support https on our local environment for development and debugging purposes.\"), mdx(\"p\", null, \"Before we start coding, we first need to create a self-signed certificate.\\nFortunately, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"mkcert\"), \" makes this possible and easier than remembering openssl commands.\\nOf course, it's important to know how certificates are created, but we're taking the easy route. \"), mdx(\"p\", null, \"Let's install \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"mkcert\"), \". \"), 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 as an administrator, and type the following command:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-console\"\n  }), \"choco install mkcert\\n\")), mdx(\"p\", null, \"Install our root certificate.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-console\"\n  }), \"mkcert -install\\n\")), mdx(Image, {\n    className: \"blog-screenshot m-auto mb-2\",\n    src: mkcert_install,\n    alt: \"mkcert install\",\n    mdxType: \"Image\"\n  }), mdx(\"p\", null, \"A security warning will pop up. Click \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Yes\"), \" to continue installation. \"), mdx(\"p\", null, \"Just like that, we have a root certificate that will sign all the certificates that we are going to create locally.\\nTo check the installation directory, type the following command:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-console\"\n  }), \"mkcert -CAROOT\\n\")), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"C:\\\\Users\\\\Mervin\\\\AppData\\\\Local\\\\mkcert\")), mdx(\"p\", null, \"On my computer, the root certificate was installed in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"C:\\\\Users\\\\Mervin\\\\AppData\\\\Local\\\\mkcert\"), \" folder.\\nLet's change to that directory, and create a certificate for localhost.  We can put our certificates anywhere,\\nwe will keep them with the root certificate.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-console\"\n  }), \"cd ~/AppData\\\\Local\\\\mkcert\\nmkcert localhost\\n\")), mdx(\"p\", null, \"The command above created two files: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"localhost-key.pem\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"localhost.pem\"), \".\\nWe will use these files to give credentials to our https server.\"), mdx(\"p\", null, \"Now, we are ready to create our https project.\\nRun 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  folder, and change to that directory\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-console\"\n  }), \"mkdir https-server\\ncd https-server\\n\")), mdx(\"p\", null, \"Initialize our project with default package.json\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-console\"\n  }), \"npm init -y\\n\")), mdx(\"p\", null, \"Open the 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, \"Open package.json.  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 code in es6 format.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"The package.json file should look like the following:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"{\\n  \\\"name\\\": \\\"https-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, \"Let's create \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"server.js\"), \" in the root directory of the project then copy and paste the following code.\\nDon't forget to change my username to your username for paths to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"localhost-key.pem\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"localhost.pem\"), \".\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"// server.js\\nimport https from 'https'\\nimport fs from 'fs';\\n\\nconst privateKey  = fs.readFileSync('C://Users/Mervin/AppData/Local/mkcert/localhost-key.pem', 'utf8');\\nconst certificate = fs.readFileSync('C://Users/Mervin/AppData/Local/mkcert/localhost.pem', 'utf8');\\nconst credentials = {key: privateKey, cert: certificate};\\n\\nconst httpsServer = https.createServer(credentials, (req, res) => {\\n    res.statusCode = 200; // OK\\n    res.setHeader('Content-Type', 'text/plain');\\n    res.write(\\\"Hello world!\\\");\\n    res.end();\\n});\\n\\nhttpsServer.listen(4001, () => {\\n    console.debug(\\\"HTTP Server running on port 4001.\\\");\\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\"), \" to run the program.\"), mdx(\"p\", null, \"Now, go back to the browser and type \", mdx(\"a\", {\n    href: \"https://localhost:4001\"\n  }, \"https://localhost:4001\"), \" on the adress bar and press enter.\\nIf you're using Edge or Chrome, you should see \\\"Hello world!\\\" displayed on the screen.\\nWith firefox, we still need to add our root certificate to the list of authorities; hence, this warning. \"), mdx(Image, {\n    className: \"blog-screenshot mx-auto mb-2\",\n    src: browser_warning,\n    alt: \"browser error\",\n    mdxType: \"Image\"\n  }), mdx(\"p\", null, \"To fix the firefox warning, do the following:\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Open a firefox browser and type \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"about:preferences#privacy\"), \" on the address bar. \"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Scroll to bottom and click on \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"View Certificates\"), \". \"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Select the \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"Authorities\"), \" tab.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Click \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"Import\"), \".\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Browse to where we installed our root certificate.  In my case, it's \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"C:\\\\Users\\\\Mervin\\\\AppData\\\\Local\\\\mkcert\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Select \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"rootCA.pem\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Check \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"Trust this CA to identify websites.\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Click \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"OK\"))), mdx(\"p\", null, \"That's it pancit! Just like that, we created an https server on localhost.\"));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"To better protect end-users, we have to make sure that communication between a browser and our server is encrypted  —  this is where https…","frontmatter":{"title":"Node Web Server - Localhost HTTPS","date":"January 10, 2020","update":"April 16, 2020"}}},"pageContext":{"slug":"/2020/Jan/10/node-https-server/","previous":{"fields":{"slug":"/2020/Jan/9/node-http-server/"},"frontmatter":{"title":"Node Web Server- HTTP"}},"next":null}},"staticQueryHashes":["2537605155","63159454"]}