{"componentChunkName":"component---src-templates-blog-post-template-js","path":"/2018/12/24/wsl-bootstrap-2019/","result":{"data":{"mdx":{"id":"82832ebd-cf53-5cc8-a3d7-725de1ad3d0a","frontmatter":{"title":"Windows Web-dev bootstrap","date":"2018 December 24th","cover":{"id":"1a54dd2a-9775-5dc6-b1f9-940391501f68","publicURL":"/static/cover-b6ba37459c4c48ab9a6639bab70e96de.jpg"}},"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  \"date\": \"2018-12-24T00:00:00.000Z\",\n  \"title\": \"Windows Web-dev bootstrap\",\n  \"tags\": [\"information\", \"learning\", \"guide\", \"wsl\", \"bash on windows\", \"n\", \"node\"],\n  \"published\": true,\n  \"cover\": \"./cover.jpg\",\n  \"coverCredit\": \"Photo by Luana De Marco on Unsplash\"\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(\"h2\", {\n    \"id\": \"from-scratch-to-create-react-app-on-windows\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#from-scratch-to-create-react-app-on-windows\",\n    \"aria-label\": \"from scratch to create react app on windows permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"From scratch to Create React App on Windows\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"An opinionated guide on setting up a web development environment on\\nWindows 10\")), mdx(\"p\", null, \"I have been a professional web developer for 10 months now and used\\nboth MacOs and Windows in that time. My preferred OS to use is\\nWindows, for no other reason than I prefer the keyboard layout.\"), mdx(\"p\", null, \"With Windows/Linux I like to have my Ctrl key as the key to use for\\ncopy paste operations and I can use my left pinky instead of my thumb.\\nAnyway, let\\u2019s leave the weak reasoning behind as that\\u2019s not the\\npurpose of this post!\"), mdx(\"p\", null, \"If you don\\u2019t have a Windows machine then this post probably isn\\u2019t for\\nyou, if this is different from what you use, it doesn\\u2019t make it bad.\"), mdx(\"p\", null, \"Let\\u2019s see what Ken has to say about it:\"), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://twitter.com/ken_wheeler/status/1075556283795824640\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"https://twitter.com/ken_wheeler/status/1075556283795824640\")), mdx(\"p\", null, \"This is the refresh on \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://thelocalhost.blog/wsl-setup/\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"my guide from the start of 2018\"), \" on setting up\\na web development environment on a Windows machine.\"), mdx(\"p\", null, \"This guide will cover installing Ubuntu but you can use some of the\\nother flavours of Linux available in the Windows store, the Debian\\nsetup will be very similar to the Ubuntu one.\"), mdx(\"h2\", {\n    \"id\": \"objective-of-this-post\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#objective-of-this-post\",\n    \"aria-label\": \"objective of this post permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Objective of this post\"), mdx(\"p\", null, \"To go from a fresh instance of Windows 10 to something you can develop\\nweb apps with.\"), mdx(\"p\", null, \"These instructions are for the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Windows 10 Fall Creators Update and\\nlater.\")), mdx(\"p\", null, \"What we\\u2019re going to cover:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"#install-wsl\"\n  }), \"Install WSL\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"#enable-wsl-on-your-machine\"\n  }), \"Enable WSL on your machine\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"#update-upgrade-and-autoremove\"\n  }), \"update, upgrade and autoremove\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"#install-node-with-n\"\n  }), \"Install Node (with \", mdx(\"inlineCode\", {\n    parentName: \"a\"\n  }, \"n\"), \")\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"#install-visual-studio-code\"\n  }), \"Install Visual Studio Code\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"#install-windows-git\"\n  }), \"Install Windows Git\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"#install-a-terminal-hyper\"\n  }), \"Install a Terminal (Hyper)\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"#install-fish-shell\"\n  }), \"Install Fish Shell!\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"#install-oh-my-fish\"\n  }), \"Install Oh My Fish\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"#fish-themes-with-omf\"\n  }), \"Fish themes with OMF\")))))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"#configure\"\n  }), \"Configure\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"#git-config\"\n  }), \"Git config\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"#create-react-app\"\n  }), \"Create React App\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"#use-ssh-with-github\"\n  }), \"Use SSH with GitHub\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"#wsl-ssh-config\"\n  }), \"WSL SSH Config\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"#windows-git-bash-ssh-config\"\n  }), \"Windows Git Bash SSH Config\")))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"#change-wsl-version\"\n  }), \"Change WSL version\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"#wrap-up\"\n  }), \"Wrap up!\"))), mdx(\"h2\", {\n    \"id\": \"install-wsl\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#install-wsl\",\n    \"aria-label\": \"install wsl permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Install WSL\"), mdx(\"p\", null, \"You can install Ubuntu from \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.microsoft.com/en-gb/p/ubuntu/9nblggh4msv6?activetab=pivot:overviewtab\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"the Microsoft store\"), \" which will be the\\nfirst half of the install the second will be when ypu open the app.\"), mdx(\"h2\", {\n    \"id\": \"enable-wsl-on-your-machine\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#enable-wsl-on-your-machine\",\n    \"aria-label\": \"enable wsl on your machine permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Enable WSL on your machine\"), mdx(\"p\", null, \"The \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://docs.microsoft.com/en-us/windows/wsl/install-win10\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"official guidance\"), \" covers it very well, but I\\u2019m going to add in\\nthe shortcut keys here if you don\\u2019t want to be clicking around with\\nthe mouse.\"), mdx(\"p\", null, \"Before that however, if you haven\\u2019t selected PowerShell as your\\ndefault Command Prompt you can select it from the Taskbar settings\\npage located in the Personalisation section in the Settings, I suggest\\ndoing that now:\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/c20b2740eb8b2ecd282c0c4b0c3f226f/powershell.gif\",\n    \"alt\": \"lsb_release image\"\n  }))), mdx(\"p\", null, \"Whilst we\\u2019re at it we should also enable hidden folders and add files\\nextensions for known file types in Windows File Explorer.\"), mdx(\"p\", null, \"Open the Windows File Explorer with Windows key+e then select View\\nfrom the ribbon. Then click the Options button on the far right, this\\nwill bring up the Folder Options dialog, from here we want to select\\nthe View tab and select the Radio button for Hidden files and folders\\nwith the \\u2018Show hidden files, folders and drives\\u2019, uncheck the option\\nfor \\u2018Hide extensions for known file types\\u2019 too. Click apply and Ok.\"), mdx(\"p\", null, \"The reason we\\u2019re doing this is so that we can see the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".git\"), \" folder in\\nproject structures it\\u2019s also needed for files like \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".env\"), \" files which\\nare used for environment configuration.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/9bc6c9cdb14d14c9cab83f94f4ba5d52/show-extensions.gif\",\n    \"alt\": \"show file extensions\"\n  }))), mdx(\"p\", null, \"Use Windows key+x, this is the same as right-clicking the windows icon\\non the desktop, this will open the quick link menu. From here you need\\nto select the Windows PowerShell (\", mdx(\"u\", null, \"A\"), \"dmin) option, you can do\\nthis by pressing \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"a\"), \" on the keyboard. So Windows key+x then a, will\\nopen the user account control (Admin) prompt, presuming you have admin\\nrights on your machine you\\u2019ll need to click yes to continue.\"), mdx(\"p\", null, \"Copy the code here and paste it into the PowerShell window, Ctrl+v\\nwill work in PowerShell, press enter to execute the command.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux\\n\")), mdx(\"p\", null, \"You will be prompted to restart your machine after this, which you\\nshould do.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Check the link for a complete list of \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://support.microsoft.com/en-gb/help/12445/windows-keyboard-shortcuts\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"windows keyboard shortcuts\"), \".\")), mdx(\"p\", null, \"After restarting you can open the Ubuntu program from the start menu\\nand the second install (of WSL on your system) should happen. Wait for\\nthis to complete then you will be prompted to create a user and a\\npassword for the account. You will need to remember the password\\ncreated for the user as you will be prompted for it to use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"sudo\"), \"\\nprivileges.\"), mdx(\"h2\", {\n    \"id\": \"update-upgrade-and-autoremove\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#update-upgrade-and-autoremove\",\n    \"aria-label\": \"update upgrade and autoremove permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"update, upgrade and autoremove\"), mdx(\"p\", null, \"At the time of writing this, the version I have linked of Ubuntu is\\n18.04.1\"), mdx(\"p\", null, \"The linked app will install the latest stable Ubuntu release on\\nWindows.\"), mdx(\"p\", null, \"You can check what version of Ubuntu you have installed with:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"lsb_release -a\\n\")), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"640px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/8b8b866b7d4780ebb4e99e69273e79be/774b6/lsb_release.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"51.490514905149055%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/svg+xml,%3csvg%20xmlns=\\\\'http://www.w3.org/2000/svg\\\\'%20width=\\\\'400\\\\'%20height=\\\\'206\\\\'%3e%3cpath%20d=\\\\'M16%202c-2%202-2%203-1%203%203-1%203%200%202%202l-2%205c0%203-1%204-3%202v-1l2-2h-2l-2%203-1%202c-2%200-2%200%200-3%202-5%202-10-1-7L6%205C5%204%205%204%207%204h2L7%203a544%20544%200%2001-5-1C0%200%200%203%200%2029c0%2021%200%2027%201%2026%202-2%203-1%203%201l1%202%201-1c-1-1%202-2%203-1l-1%201c-2%201-2%201-1%203s1%202%202%201l2-2h7l2%201v2l-1%205-2%204c-1%201-6-1-6-2%200-2-2-1-3%201l-1%203v-3c0-2%200-2-2-1l-3%201c-2%200-2%202-2%2020v19l4%201%205%201%207%202%205%201v6c0%206%200%206-2%205h-4l-4-1-1-2-1-2c-1-1-1-1-3%201H4c-1%201-2-1-1-4l-1-1-2%202%201%202v1l-1%2011v10h11l11-1%202-2c2%200%202%200%201%201-3%200-3%204%200%204%201%201%201%201-1%201l-2-1c-1-1-1%200-1%201%200%205-1%206-4%206-2%200-3%200-2%201%202%200%200%202-3%202-2%200-2%200%201%201h6c1%200%202%202%201%204h-5l-2-1v1l-4%208c-1-1-2-1-1-4l-2-1-4-2c-2-2-2-2-2%201l1%204v10c-2%200-1%204%201%207l8%209%209%2011%202%204h28l28-1h1l19%201c11%200%2019%200%2018-1l-2-1-5-1-4-1-5-1h-1c0-1-1-2-2-1v-1l-1-2v1c0%201-1%201-3-1-2%200-2-1-1-1l1-1c-2-2-4-1-4%201l-1-1-1-3h10l1%201c-1%201%200%201%201%201%202%200%203%201%203%202l1%201c2%200%201-3-2-4-2-2-3-3%200-2l1-1c-2-2%201-1%203%201l2%201%207%204%202%201c2-1%204%201%203%202v2c-1%202%207%206%2010%205%202-1%200-3-3-2l-4-3c-2-2-2-2%200-2l4%202%204%201h4l1%201c-1%201%201%202%203%202v-1c-1-2%201-5%203-3h1c0-1%205-1%2018%201%2016%204%2020%204%2036%204h17v-2c0-2-1-3-2-3v-1c1-2-1-3-2-2h-1v-2c-1%201-7-5-6-6l-1-1-1-1-1-2-1-2h1l2%201v-1l2-1h1l-1-2c-2%201-3%200-5-2%200-2-2-2-3-2l1-1%203-3c1-1%209-1%2012%201l15%2012%203%201c3%200%208%203%205%203-2%200-2%200-1%201h3l1%201v1c2%200%201-3%200-4l-2-2-2-5-1-3-2-1v-2c-2-3%200-4%205-4s6%200%2011%204l13%2010c6%203%2012%208%2016%2013l7%207h33a12876%2012876%200%200151%200h16l-1-3c0-2%200-2%202-2%201%200%202%201%201%202%200%203%200%203%209%203h8v-4l-1-5v-2l-5-1h-2l-1-1-1%202-2-1c-2-3-2-3%202-2h6l3-1c1%201%201%200%201-4l1-13v-8l-3%201-4%201h-1c0-2%202-3%204-3%203%200%204-1%204-4l-1-4-11%205%201%204%202%207c1%202%202%204%204%203l2%201c1%202%200%203-2%201-1-1-1-1-1%201l-1%203h-3l-1%201c0%201%201%202%202%201l1%201h-5v-2c1-1%201-1-1-2l-2-2c1-4-7-3-11%201-2%202-3%203-2%204l1%202%201%202%203%203%204%201c3%200%207%202%207%204h-2c0%201-5%201-6-1l-5-1-13-3a419%20419%200%2000-11-5l2-1h2c2%200%202%200%201-1l3%201c4%202%207%202%207%200l-5-2c-5-1-7-3-4-3l-1-1c-2-2-4-2-4%200h2v3l-1%201-1-1c0-1-2-2-6-2l-14-1%208-1%2010-1%204-1%205-1%204-1c9%202%2015%202%2015%200%200-1-1-2-3-2h-5l-1-62V50l-174-1H21V33h20c23-1%2024-1%2024-3-1-1-1-1%200%200v-3c-3-3-1-11%203-10h1c0-1-1-2-2-1l-2-1%202-1%201-2c0-2%200-2-1-1%200%202-2%203-2%202%200-3%202-6%203-5h1V6l3-3%201-3H49C25%200%2025%201%2025%203l-2%203-1%203v1c-2%201-2-4%200-6l1-1V2c2-3-5-2-7%200m87-1c-2%200-2%201-2%203%201%202%200%203-1%203l-1-1h-1l-1-1-1-4-1%201v5c1%201%200%204-2%204l-1-2h-1l-3-1-2-1%201%201-1%201c-2%201-2%201%200%201s3%202%201%203v1c2%200%202%203-1%205v1c2%200%203%205%201%205h-2l-1-2-1-1h-2c-1-2-2-2-4-1-3%201-4%204-2%203%201-1%203%201%204%204%203%205%205%206%209%204h17l1-1%202-2c1-1%200-1-2-1-5%201-5%201%200-4l4-4v5c0%207%200%208%202%208%201%200%202%200%201-2l2-3v-1l-2%201h-1c2-4%202-8%201-6-1%201-1%201-1-1l1-2%201-1%205-4%204-4%201-2v2l2%202c1-1%203%203%203%209v4c-2%200-2-2-3-9-1-2-1%200-1%203l-1%207-1-1v-2l-1%202-3%202c-1%201%200%201%203%201s3%200%203%202c0%204%203%204%203%200%201-5%203-5%203-1l1%204%202-1c-1-2%201-10%202-10v-2l3-4%201-2c-1%200-4%201-5%203l-3%202-2-4V9l-1-2h1l1-1-1-4c0-3-2%200-2%203v3l-1-3-2-2h-7l2-2h-17m53%202l-1%204%201%207c2%204%202%206%201%206l-1%201h3l-1%202h-1v1c2%200%203%203%202%204l-6%201-4%201h4c7%200%207%200%206%202-1%201-1%201%204%201s10-2%2010-4h1c1%203%203%204%207%204h4l-3-4c-7-8-6-10%202-7%208%202%2010%203%2010%207v4h11c11%200%2012%200%209-2l-4-2-1-1-2-1-4-3c-2-2-2-2%200-1l2-1%202-3c1-2%202%201%200%203v1h2l1-1%201%201v3c1%201%201%201%201-2l1-3v5c-2%204%208%208%2014%206h5l11%201h10l-1-9c0-12%203-20%205-11%200%205%201%206%201%201l1-4V8l-4-1c-1%201-1%200-2-1%200-1-1-2-3-2-4%200-5-1-3-2s6%200%207%201c1%202%202%201%201-1%200-2-2-2-9-2-8%200-9%200-8%202v1l-2-1c-1-2-5-2-23-2h-23l1%203%201%202%201%204c0%203-1%204-2%204l1%203c2%203%202%204-3%202l-3-1-1-1-4-2h-8c-2-1%200-3%203-3%201%200%202-9%201-10l-4-1c-4%200-4%201-7%2011l-2%204v1l-1%202c0%201-2-1-2-3-2-5-3-12-1-12%202-2%201-3-1-3l-3%203m117-1l1%203v16l-1%205-3%204-2%202h36l2-5c2-2%203-4%202-5v-2h3l1-1v5c0%202%200%202%201%201l1-2%201-2v-1l-1-1%202-1%203-1c2-1%208-3%209-2l1-1%206-4%206-5%202-2%201-2h-22c-4-2-33-1-34%201l-1%201V2c0-2-1-2-7-2s-7%200-7%202m85%201a594%20594%200%200131%2016l-3%202c0%201-4%206-6%206l-1%201v7l1%203%203-3c4-3%205-4%205-1h5c4%200%205-1%202-1-6-1-7-3-4-6%201-1%203-3%203-5%201-4%201-4%204-4h2c0-2%200-3-10-5l-16-6c-12-6-16-7-19-7-2%200-1%201%203%203m22%2084v28l-1%203h6v-13l-1-5v-4l-2-3-1-4%201-2h-2m13%2038l-3%202c-1-2-4-2-4-1h-4l-3-2v22l7%201%209%202%205%202c2%200%201-3-2-4l-2-1%202-1%203-3-1-3-1-2-2-1%201-1h1l-1-1c-1%201-2%200-2-1l2-1%202-1-2-2-1-1v-3l-2-3-2%203m-14%2027c0%204%200%204%202%204l5%202c2%202%203%202%206%200%205-1%205-1%204-4-2-3-6-4-7-2-1%201-7-2-7-3l-1-1c-2-1-2%200-2%204\\\\'%20fill=\\\\'%23d3d3d3\\\\'%20fill-rule=\\\\'evenodd\\\\'/%3e%3c/svg%3e')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"a\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/8b8b866b7d4780ebb4e99e69273e79be/60a22/lsb_release.webp 160w\", \"/static/8b8b866b7d4780ebb4e99e69273e79be/4c812/lsb_release.webp 320w\", \"/static/8b8b866b7d4780ebb4e99e69273e79be/0ba47/lsb_release.webp 640w\", \"/static/8b8b866b7d4780ebb4e99e69273e79be/65afa/lsb_release.webp 738w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/8b8b866b7d4780ebb4e99e69273e79be/69538/lsb_release.png 160w\", \"/static/8b8b866b7d4780ebb4e99e69273e79be/72799/lsb_release.png 320w\", \"/static/8b8b866b7d4780ebb4e99e69273e79be/6af66/lsb_release.png 640w\", \"/static/8b8b866b7d4780ebb4e99e69273e79be/774b6/lsb_release.png 738w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/8b8b866b7d4780ebb4e99e69273e79be/6af66/lsb_release.png\",\n    \"alt\": \"lsb_release image\",\n    \"title\": \"lsb_release image\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"If you want to use a specific LTS version of Ubuntu you can get them\\nfrom the Windows Store, here:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://www.microsoft.com/en-gb/p/ubuntu-1604-lts/9pjn388hp8c9?activetab=pivot:overviewtab\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Ubuntu 16.04 LTS\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://www.microsoft.com/en-gb/p/ubuntu-1804-lts/9n9tngvndl3q?activetab=pivot:overviewtab\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Ubuntu 18.04 LTS\"))), mdx(\"p\", null, \"Now we\\u2019re going to go ahead an update and upgrade all the things, the\\nthree commands here will update and upgrade all the pre-installed\\nsoftware that comes with the Ubuntu install.\"), mdx(\"p\", null, \"The code below is three commands joined together with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"&&\"), \". The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"-y\"), \"\\nflag is to auto accept the changes that are going to be performed with\\nthe upgrades. Auto remove will remove unused packages left behind from\\nupgrades.\"), mdx(\"p\", null, \"Copy the below commands into your Ubuntu terminal, and run the\\ncommand:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"sudo apt update && sudo apt -y upgrade && sudo apt autoremove\\n\")), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"To go from 16.04 to 18.04 try \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"do-release-upgrade\"), \" in the terminal.\\nbe warned this takes considerably longer than just deleting the\\ncurrent install of Ubuntu and starting again.\")), mdx(\"p\", null, \"Now that the base has been installed and updated we need to install\\nthe \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://packages.ubuntu.com/bionic/build-essential\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"build-essential\"), \" package in order to compile and build other\\npackages, the following packages we\\u2019re going to install will all need\\nit.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"sudo apt install -y build-essential\\n\")), mdx(\"p\", null, \"From here on in I\\u2019d suggest using two bash windows, one with sudo\\nenabled the other with standard permissions.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"i.e. open a terminal and don\\u2019t enter \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"sudo\"), \" in there, instead use\\nthe terminal that has been granted that permission.\")), mdx(\"p\", null, \"The reason for this is that I have found if you install node as sudo\\nthen each time you want to run an \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"npm install\"), \" command you will need\\nto grant sudo permissions and it can all get a bit tedious. And you\\nreally shouldn\\u2019t be installing npm packages with sudo permissions.\"), mdx(\"h2\", {\n    \"id\": \"install-node-with-n\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#install-node-with-n\",\n    \"aria-label\": \"install node with n permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Install Node (with \", mdx(\"inlineCode\", {\n    parentName: \"h2\"\n  }, \"n\"), \")\"), mdx(\"p\", null, \"Let\\u2019s get our run-time on! If you use Node.js you will eventually have\\nsituations where you need to be able to switch Node versions, for this\\nyou may have heard to nvm (\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/creationix/nvm\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Node Version Manager\"), \") which by the way\\nyou can still use in WSL.\"), mdx(\"p\", null, \"The reason for me opting for n over nvm is that in the past I\\nexperienced slow bash startup times whilst using nvm. Take a look at\\nthis \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/Microsoft/WSL/issues/776\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"WSL GitHub issue detailing it\"), \" and the specific comment for the\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/Microsoft/WSL/issues/776#issuecomment-266112578\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"pros of using n\"), \".\"), mdx(\"p\", null, \"Ok let\\u2019s install n, with \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/mklement0/n-install\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"n-install\"), \", the command doesn\\u2019t start with\\nsudo so use it in the bash window you have with no sudo privileges.\\uD83E\\uDDD0\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"curl -L https://git.io/n-install | bash\\n\")), mdx(\"p\", null, \"This will install the latest version of Node for us, follow the prompt\\non the terminal screen to reload bash:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"# mine looks like this\\n. /home/scott/.bashrc\\n\")), mdx(\"p\", null, \"Now check the versions of Node and npm we have installed with\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"node -v && npm -v\"), \" in the terminal.\"), mdx(\"h2\", {\n    \"id\": \"install-visual-studio-code\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#install-visual-studio-code\",\n    \"aria-label\": \"install visual studio code permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Install Visual Studio Code\"), mdx(\"p\", null, \"Install VSCode? What? This post is to set up WSL? Ok, so we\\u2019re going\\nto presume that this is going from nothing to being able to web dev,\\nso we\\u2019re going to need a text editor, and there\\u2019s nothing out there at\\nthe moment that comes close to VSCode, if you already have a text\\neditor installed then skip to the next part.\"), mdx(\"p\", null, \"Install the Windows version of VSCode from the \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://code.visualstudio.com/download\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Download section\"), \" once\\ninstalled we can enable WSL in the settings, the quickest way to do\\nthis is to open the integrated terminal in VSCode with the shortcut\\nkeys Ctrl+\\u2019 \\uD83D\\uDC48 that\\u2019s and apostrophe. You will be prompted to select\\nyour default terminal, select WSL Bash.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/3263125fa54ef0c06a3ffe04d8b4741a/vscode-wsl-config.gif\",\n    \"alt\": null\n  }))), mdx(\"h2\", {\n    \"id\": \"install-windows-git\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#install-windows-git\",\n    \"aria-label\": \"install windows git permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Install Windows Git\"), mdx(\"p\", null, \"There\\u2019s a bit of stumbling block getting \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/Microsoft/vscode/issues/9502\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Git support for VSCode\"), \",\\nit\\u2019s well documented in the various issues mentioned in the linked\\nissue.\"), mdx(\"p\", null, \"There are workarounds as well with things like \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/andy-5/wslgit\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"WSLGit\"), \" which has it\\u2019s\\nown set of issues, this all stems from users (me included) not wanting\\nto have to install another binary for Git.\"), mdx(\"p\", null, \"I have tried several variants when it comes to using Git with VSCode\\nand the path of least resistance was biting the bullet and installing\\nthat additional binary, there\\u2019s an overhead with having to maintain\\nand configure SSH keys for both Windows and WSL Git but it\\u2019s a one\\ntime setup.\"), mdx(\"p\", null, \"Until the VSCode team incorporate \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/andy-5/wslgit\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"WSLGit\"), \" into VSCode I think this is\\nthe best option.\"), mdx(\"p\", null, \"Install from \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://git-scm.com/download/win\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"git-scm.com\"), \" the link will start downloading the install\\nbinary you can then open it and go through the install, you can keep\\nclicking next through the install, I have selected a few options that\\nI would like enabled.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/1dfc1ef873bc1ca204803872ac5a3112/install-git.gif\",\n    \"alt\": \"windows git setup\"\n  }))), mdx(\"p\", null, \"For now, that is all we need to do, when it comes to authenticating\\nwith with GitHub using SSH we will use the Git Bash command line to\\nconfigure the Windows side of things.\"), mdx(\"h2\", {\n    \"id\": \"install-a-terminal-hyper\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#install-a-terminal-hyper\",\n    \"aria-label\": \"install a terminal hyper permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Install a Terminal (Hyper)\"), mdx(\"p\", null, \"Now we have bash on Windows it\\u2019s time to install a nice Terminal app,\\nbecause, let\\u2019s face it, the standard one is a bit basic.\"), mdx(\"p\", null, \"Enter \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"http://hyper.is\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Hyper\"), \" an electron based terminal app that is super themeable\\nand configurable.\"), mdx(\"p\", null, \"Download and install hyper for Windows, this will be the bare-bones\\nversion, it\\u2019ll look something like this:\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"640px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/4dc3866ef23414c6dbb342f5117acb8c/a1dd2/basic_hyper.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"64.08114558472555%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/svg+xml,%3csvg%20xmlns=\\\\'http://www.w3.org/2000/svg\\\\'%20width=\\\\'400\\\\'%20height=\\\\'256\\\\'%3e%3cpath%20d=\\\\'M150%2013L14%2014l-1%2022v22H6l-6-1v15h7c5%200%209%202%204%202l-5%201H1l-1%2090v91h52c46%200%2055-1%2049-3-2%200-2%200%200-3%203-2%204-3%204-1l2%202%201-2h2l2-1%202-3h4l2%202c1%201%202%202%201%203l1%203%201%202%204%201c5-1%205-1%206-3%200-2-1-3-2-3v2c0%202%200%202-2%202s-2%200-2-2v-8h2c1%202%203%203%203%201%200-3%209-3%2011%200h2l2%204v2l1%201%202%202c0%201%201%202%207%202l6-1h22l1-1v1l3%201%203-1c-1-2%203-3%205-2l3%201c0%201%2025%202%20100%202h101v-91c0-91%200-91-2-92l-2-2h-1l-2%201-1%201-1%201-1%202-2%202v-1l-1-1h-1c0-1%200-2%201-1l1-1c0-1%200-2-1-1l-1-1%202-1h1l-1-1c-3%200-2-7%200-9s2-2-1-9l-1-20V14l-51-1H150M0%20166\\\\'%20fill=\\\\'%23d3d3d3\\\\'%20fill-rule=\\\\'evenodd\\\\'/%3e%3c/svg%3e')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"a\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/4dc3866ef23414c6dbb342f5117acb8c/60a22/basic_hyper.webp 160w\", \"/static/4dc3866ef23414c6dbb342f5117acb8c/4c812/basic_hyper.webp 320w\", \"/static/4dc3866ef23414c6dbb342f5117acb8c/0ba47/basic_hyper.webp 640w\", \"/static/4dc3866ef23414c6dbb342f5117acb8c/7820a/basic_hyper.webp 838w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/4dc3866ef23414c6dbb342f5117acb8c/69538/basic_hyper.png 160w\", \"/static/4dc3866ef23414c6dbb342f5117acb8c/72799/basic_hyper.png 320w\", \"/static/4dc3866ef23414c6dbb342f5117acb8c/6af66/basic_hyper.png 640w\", \"/static/4dc3866ef23414c6dbb342f5117acb8c/a1dd2/basic_hyper.png 838w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/4dc3866ef23414c6dbb342f5117acb8c/6af66/basic_hyper.png\",\n    \"alt\": \"basic hyper\",\n    \"title\": \"basic hyper\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"You may notice that, this is the Windows Command prompt too, don\\u2019t\\nworry, we\\u2019re going to configure that right now.\"), mdx(\"p\", null, \"Open up the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".hyper.js\"), \" file located in the root of your user folder,\\nor from Hyper itself use the shortcut key Ctrl+, to pop open the\\nsettings.\"), mdx(\"p\", null, \"If the settings file (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".hyper.js\"), \") opens in Notepad then you can set\\nthe default to be VSCode. In File Explorer (Use Windows key+e to open\\nit) navigate to the file, it\\u2019ll be in your User folder, right-click\\nthe file and select Properties, then Change for \\u2018Opens with:\\u2019 and\\nselect VSCode from the list.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/52748c6c5d98037cf3a886f25129f078/default-file-type.gif\",\n    \"alt\": \"basic hyper\"\n  }))), mdx(\"p\", null, \"Now we can set WSL as the shell path in Hyper, open the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".hyper.js\"), \"\\nsettings file and search (Ctrl+f) for bash, we want to add the path to\\nthe WSL shell into the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"shell\"), \" property defined in the file.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"// amend shell path\\n// WSL Bash\\nshell: 'C:\\\\\\\\Windows\\\\\\\\System32\\\\\\\\bash.exe',\\n\")), mdx(\"p\", null, \"We can also change the appearance of Hyper from here by specifying\\nfont size and font family and also predefined themes, let\\u2019s quickly\\nadd in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"hyper-adventure-time\"), \" theme into the plugins section.\"), mdx(\"p\", null, \"Open another Hyper tab with Ctrl+Shift+t, this will show the bash\\nterminal for WSL now.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/46d4b73bef3dd0e13ef57985b5856253/hyper-config.gif\",\n    \"alt\": \"basic hyper\"\n  }))), mdx(\"p\", null, \"Quick orientation with the Hyper terminal keyboard shortcuts:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"New tab = Ctrl+Shift+t\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Close current tab = Ctrl+Shift+w\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Cycle through tabs right = Ctrl+Shift+right arrow\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Cycle through tabs left = Ctrl+Shift+left arrow\")), mdx(\"p\", null, \"Now I\\u2019m going to configure some additional properties for Hyper, and\\nchange the theme to something a bit more subtle.\"), mdx(\"p\", null, \"I purchased Dank Mono, if you want a similar font as OSS check out\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/tonsky/FiraCode\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"FiraCode\"), \".\"), mdx(\"p\", null, \"Here\\u2019s what I changed:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"module.exports = {\\n  config: {\\n    fontSize: 18,\\n    fontFamily: '\\\"Dank Mono\\\",...',\\n    cursorShape: 'BEAM',\\n    cursorBlink: true,\\n    copyOnSelect: true,\\n    plugins: ['hyper-altair'],\\n  },\\n};\\n\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/21d7459341e6e6d9236550a7371ac029/hyper-final-config.gif\",\n    \"alt\": \"final hyper config\"\n  }))), mdx(\"h2\", {\n    \"id\": \"install-fish-shell\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#install-fish-shell\",\n    \"aria-label\": \"install fish shell permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Install Fish Shell!\"), mdx(\"p\", null, \"Ok, time to install the Fish Shell! This is a completely optional\\nstep, I like to use fish for the nice intellisense you get when\\nnavigating file structures, there are also some neat themes you can\\nget with Oh My Fish\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"sudo apt -y install fish\\n\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/f6a2914cf59b05afc97d9a36bc3ddd37/install-fish.gif\",\n    \"alt\": \"install fish\"\n  }))), mdx(\"h3\", {\n    \"id\": \"install-oh-my-fish\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"href\": \"#install-oh-my-fish\",\n    \"aria-label\": \"install oh my fish permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Install Oh My Fish\"), mdx(\"p\", null, \"Now we can install Oh My Fish (OMF) and get a nice terminal theme\\ngoing on too, remember we talked about running commands with the\\ncorrect permissions? Well this is one of those occasions, open a new\\ntab first then paste in the following:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"curl -L https://get.oh-my.fish | fish\\n\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/cef2c2298f8cf6cb8a37d2f2bd7ec380/install-omf.gif\",\n    \"alt\": \"install fish\"\n  }))), mdx(\"h4\", {\n    \"id\": \"fish-themes-with-omf\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h4\"\n  }, {\n    \"href\": \"#fish-themes-with-omf\",\n    \"aria-label\": \"fish themes with omf permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Fish themes with OMF\"), mdx(\"p\", null, \"After installing OMF you can pick a theme, here you may notice that\\nthe text doesn\\u2019t fit in the screen on Hyper, a quick way to reset it\\nis to maximise the window then back again, I did this with the Windows\\nkey+arrow up to maximise the Windows key+arrow down to restore it.\"), mdx(\"p\", null, \"After installing omf I chose the theme agnoster, installed with\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"omf install agnoster\"), \" you can list out what is available and what you\\nhave already installed by selecting \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"omf theme\"), \" let\\u2019s change it once\\nmore to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"one\"), \" theme, adjust the size of the window first as things\\nare getting a bit cramped.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/137c2c0db5d51417202717fd2ff8c99c/omf-install-one.gif\",\n    \"alt\": \"omf one\"\n  }))), mdx(\"p\", null, \"Have a play around there\\u2019s loads there, I prefer the one theme because\\nyou can see what version of node you\\u2019re running on, over on the far\\nright. Here you can also see the intellisense for fish where it shows\\nagnoster as a previous selection, if I wanted to select agnoster I\\ncould tab to complete the rest of the command.\"), mdx(\"h2\", {\n    \"id\": \"configure\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#configure\",\n    \"aria-label\": \"configure permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Configure\"), mdx(\"p\", null, \"So, now we have a swanky looking new terminal and a bare-bones VSCode\\ninstall it\\u2019s time to get things moving.\"), mdx(\"p\", null, \"I have a \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/spences10/cheat-sheets\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"cheat-sheets\"), \" repo detailing a lot of the configuration\\nwe\\u2019re about to go through here, if you find something useful along the\\nway please drop a PR with the suggestion.\"), mdx(\"p\", null, \"First up, in place of typing out \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fish\"), \" each time I open a new\\nterminal, and not replacing bash which you can do, but I prefer to use\\nan alias. So what we\\u2019re going to do is open up the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".bashrc\"), \" file and\\nedit it.\"), mdx(\"p\", null, \"From a new terminal type in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"nano ~/.bashrc\"), \", nano is a bash text\\neditor. Scroll (or Page) down to the bottom of the file and add in an\\nalias for fish, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"alias f=fish\"), \" then to exit nano Ctrl+x and confirm\\nchanges with a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"y\"), \". Reload the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".bashrc\"), \" file like we did after using\\nn to install Node \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \". /home/scott/.bashrc\"), \" but your username in place\\nof mine \\uD83D\\uDE04, now we can use f instead of fish! Well done you saved\\nyourself typing three extra characters!!!.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/68b67fc7daca2ab3a6fd06bf1b085167/alias-fish.gif\",\n    \"alt\": \"alias fish in .bashrc\"\n  }))), mdx(\"h2\", {\n    \"id\": \"git-config\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#git-config\",\n    \"aria-label\": \"git config permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Git config\"), mdx(\"p\", null, \"Before we crack on with spinning up a Create React App instance we\\u2019re\\ngoing to need to configure Git, via the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".gitconfig\"), \" file.\"), mdx(\"p\", null, \"We\\u2019re going to use nano to add some settings for Git, both in WSL and\\nWindows, this is the extra config I mentioned earlier, apologies!\"), mdx(\"p\", null, \"First up we\\u2019ll config our bash environment then move onto Git bash on\\nWindows.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"# open up the .gitconfig file in WSL bash\\n# nano will create one if it doesn't exist\\nnano ~/.gitconfig\\n\")), mdx(\"p\", null, \"It\\u2019s nearly identical config for both environments apart from Windows\\nuses the credential \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"manager\"), \" helper and WSL will need the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"cache\"), \"\\nhelper.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"# needed in Git Bash for Windows\\n[credential]\\n  helper = manager\\n# needed in WSL\\n[credential]\\n  helper = cache\\n[color]\\n  ui = true\\n\\n[user]\\n  name = yourGitHubUserName\\n  email = yourGitHub@email.com\\n\\n[core]\\n  editor = code --wait\\n\")), mdx(\"p\", null, \"Make your changes then Ctrl+x to exit and confirm with y, that\\u2019s the\\nfirst part of the Git config done.\"), mdx(\"p\", null, \"In Git Bash for Windows do the same in the terminal, use nano to\\ncreate a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".gitconfig\"), \" file and add the setting to it.\"), mdx(\"h2\", {\n    \"id\": \"create-react-app\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#create-react-app\",\n    \"aria-label\": \"create react app permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Create React App\"), mdx(\"p\", null, \"Ok, we shall get create react app going so we can get Git configured\\nwith GitHub using SSH and start making changes to commit to a GitHub\\nrepo.\"), mdx(\"p\", null, \"We\\u2019re going to use \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"npx\"), \" to make a starter React project with Create\\nReact App. If you want to have your projects somewhere else now is the\\ntime to navigate to that directory.\"), mdx(\"p\", null, \"From the terminal enter:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"# this will create a starter react project\\n# called create-react-app\\nnpx create-react-app create-react-app\\n\")), mdx(\"p\", null, \"This is creating the project in my home (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"~\"), \") folder, I\\u2019ve had to\\nspeed the gif up to 20x faster, it does take a while.\\uD83D\\uDE43\"), mdx(\"p\", null, \"Wheeeeeeeeeeeeeeeeeeeee!\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/b5fef0364a6a27759ee53bea7a6fa951/npx-cra.gif\",\n    \"alt\": \"npx cra\"\n  }))), mdx(\"p\", null, \"So, now that we have spun up a React app to work on we should make a\\nchange and then add it to GitHub.\"), mdx(\"p\", null, \"Navigate to the create-react-app folder in the terminal and open the\\nproject. You can open VSCode with the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"code .\"), \" command, the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".\"), \"\\ndenotes the current folder in the terminal.\"), mdx(\"p\", null, \"This will open VSCode at the root of the create-react-app project,\\nmake sure everything is working as expected by running the start\\nscript in npm.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"npm run start\\n\")), mdx(\"p\", null, \"If you want to see what scripts are available in the current project\\nyou can also use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"npm run\"), \" which will list defined npm commands from\\nthe \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"package.json\"), \" file.\"), mdx(\"p\", null, \"A window will open displaying the basic Create React App landing page,\\nwe\\u2019re going to add a h1 to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"App.js\"), \" module then commit it, via the\\nSource Control menu in VSCode.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Please bear in mind this is an up and running guide for a\\ndevelopment environment, I\\u2019m not going to be detailing developing in\\nReact\")), mdx(\"p\", null, \"Whilst the terminal is busy starting up the create-react-page we can\\nopen another tab in Hyper with Ctrl+Shift+t and open up VSCode with\\nthe \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"code .\"), \" command, navigate to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"App.js\"), \" component and add a\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<h1>\"), \" tag to it just above the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<img>\"), \" tag with\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<h1>Hello React!</h1>\"), \" in it.\"), mdx(\"p\", null, \"Now the landing page should show the newly added h1, we can confirm\\nthat the file is changed in Git by doing a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"git status\"), \" from the\\nterminal. Then we can commit it from either the terminal or the IDE\\n(VSCode) my preference is to use VSCode as the visual diffing of files\\nis great.\"), mdx(\"p\", null, \"Commit the changes with Ctrl+Enter if you have not selected the file\\nyou want to commit you wil get a dialogue telling you there are no\\nstaged changes to commit, you can select the files (in this case only\\nthe \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"App.js\"), \" file) by clicking the plus next to the file. Hitting\\nCtrl+Enter again will commit the changes with a message, you can check\\nthat there are no changes to commit with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"git status\"), \" from the\\nterminal or visually from the Source Control section in VSCode.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/702b7c4f7ea366251529e9ffe315d9a9/cra-change.gif\",\n    \"alt\": \"cra change\"\n  }))), mdx(\"p\", null, \"Ok, time to add our super sweet code changes to a repository on GitHub\\nfor the world to see!\"), mdx(\"p\", null, \"Next up we\\u2019re going to go through adding the local changes we\\u2019ve made\\nto a GitHub repository. If you haven\\u2019t got a GitHub account and are\\nfollowing along now may be a good time to set one up.\"), mdx(\"h2\", {\n    \"id\": \"use-ssh-with-github\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#use-ssh-with-github\",\n    \"aria-label\": \"use ssh with github permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Use SSH with GitHub\"), mdx(\"p\", null, \"First up, we\\u2019re going to make a repository on GitHub and push the\\nchanges we have made to it, here we\\u2019re going to click the + button in\\nthe top right of the GitHub home page, enter a repository name and\\nGitHub will give you some defaults to choose from. As we have already\\nmade change locally we can ignore the first several commands but we do\\nneed the command to add the remote:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"git remote add origin git@github.com:spences10/cra.git\\n\")), mdx(\"p\", null, \"And to push the changes up to GitHub \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"git push -u origin master\"), \" but\\nwe\\u2019re going to get an error, as we haven\\u2019t set up SSH.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/4c0c97775b5768dd44e4c6bf2ae45c74/make-repo.gif\",\n    \"alt\": \"make repo\"\n  }))), mdx(\"h3\", {\n    \"id\": \"wsl-ssh-config\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"href\": \"#wsl-ssh-config\",\n    \"aria-label\": \"wsl ssh config permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"WSL SSH Config\"), mdx(\"p\", null, \"Open a new bash tab in Hyper and enter \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ls -al ~/.ssh\"), \" check that\\nthere are no \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"rsa\"), \" files before doing this.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"You\\u2019ll notice that we\\u2019re doing this in bash rather than Fish.\")), mdx(\"p\", null, \"If there\\u2019s nothing there then generate new keys with:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"# add your email address \\uD83D\\uDC4D\\nssh-keygen -t rsa -b 4096 -C yourGitHub@email.com\\n\")), mdx(\"p\", null, \"Now \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ls -al ~/.ssh\"), \" will show two additional files:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"# there should be a private and public key-pair\\nid_rsa\\nid_rsa.pub\\n\")), mdx(\"p\", null, \"Start the SSH agent:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"eval \\\"$(ssh-agent -s)\\\"\\n\")), mdx(\"p\", null, \"Add RSA key to SSH with:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"ssh-add ~/.ssh/id_rsa\\n\")), mdx(\"p\", null, \"Now time to add the public SSH key to GitHub, in WSL were going to\\ncopy pasta the public SSH key with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"cat ~/.ssh/id_rsa.pub\"), \" in Hyper\\nthen we can copy from Hyper to a \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/settings/ssh/new\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"new SSH key\"), \".\"), mdx(\"p\", null, \"Finally authenticate with GitHub:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"ssh -T git@github.com\\n\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/3a4a2ad75d002d92207f59d7865f2544/ssh-config-wsl.gif\",\n    \"alt\": \"ssh config wsl\"\n  }))), mdx(\"h3\", {\n    \"id\": \"windows-git-bash-ssh-config\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"href\": \"#windows-git-bash-ssh-config\",\n    \"aria-label\": \"windows git bash ssh config permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Windows Git Bash SSH Config\"), mdx(\"p\", null, \"For Windows Git Bash we\\u2019re going to copy our SSH keys we\\u2019ve just\\ngenerated in WSL over to Windows Git Bash, there are some subtle\\ndifferences when authenticating with Windows Git Bash.\"), mdx(\"p\", null, \"From Hyper, copy the SSH files from Linux to Windows:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"cp ~/.ssh/* /c/Users/spenc/.ssh/\\n\")), mdx(\"p\", null, \"Start the SSH agent:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"eval `ssh-agent -s`\\n\")), mdx(\"p\", null, \"Add the key to SSH agent:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"ssh-add ~/.ssh/id_rsa\\n\")), mdx(\"p\", null, \"Authenticate:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"ssh -T git@github.com\\n\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/832f76d1d3eddffce739026b8836f626/ssh-config-win.gif\",\n    \"alt\": \"ssh config win\"\n  }))), mdx(\"p\", null, \"Now the additional set up for SSH is done we should be able to go back\\nto Hyper and push our change to GitHub.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/94d15cedf14ac3a0fc3e75b9a4ccda8d/final-push-github.gif\",\n    \"alt\": \"final push github\"\n  }))), mdx(\"p\", null, \"Also you may have noticed that the SSH Key \\uD83D\\uDD11 token went from black to\\ngreen on the settings screen there this indicates that you have\\nauthenticated.\"), mdx(\"h2\", {\n    \"id\": \"change-wsl-version\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#change-wsl-version\",\n    \"aria-label\": \"change wsl version permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Change WSL version\"), mdx(\"p\", null, \"If you want to use a different version of Ubuntu, Debian or any of the\\nother available distributions of Linux from teh Windows store with\\nHyper you will need to change the default version from PowerShell:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"# list available versions\\nwslconfig /l\\n# set default\\nwslconfig /setdefault Debian\\n\")), mdx(\"h2\", {\n    \"id\": \"wrap-up\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#wrap-up\",\n    \"aria-label\": \"wrap up permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Wrap up!\"), mdx(\"p\", null, \"That\\u2019s it! We have gone from scratch to a functioning web development\\nenvironment. There are several other personal things I\\u2019m now going to\\nadd to my install now which is aliases for both Git and Fish shell. If\\nyou are interested in them I have a \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/spences10/cheat-sheets/blob/master/fish.md\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"cheat-sheet for Fish\"), \" with a list\\nof all my aliases I use, the same for my \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".gitconfig\"), \" you can find\\nthat in my \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/spences10/dotfiles\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"dotfiles\"), \" repo\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Thanks for reading\"), \" \\uD83D\\uDE4F\"), mdx(\"p\", null, \"Please take a look at my other content if you enjoyed this.\"), mdx(\"p\", null, \"Follow me on \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://twitter.com/spences10\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Twitter\"), \" or \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/spences10/ama\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Ask Me Anything\"), \" on GitHub.\"));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"From scratch to Create React App on Windows An opinionated guide on setting up a web development environment on\nWindows 10 I have been a…","tableOfContents":{"items":[{"url":"#from-scratch-to-create-react-app-on-windows","title":"From scratch to Create React App on Windows"},{"url":"#objective-of-this-post","title":"Objective of this post"},{"url":"#install-wsl","title":"Install WSL"},{"url":"#enable-wsl-on-your-machine","title":"Enable WSL on your machine"},{"url":"#update-upgrade-and-autoremove","title":"update, upgrade and autoremove"},{"url":"#install-node-with-n","title":"Install Node (with n)"},{"url":"#install-visual-studio-code","title":"Install Visual Studio Code"},{"url":"#install-windows-git","title":"Install Windows Git"},{"url":"#install-a-terminal-hyper","title":"Install a Terminal (Hyper)"},{"url":"#install-fish-shell","title":"Install Fish Shell!","items":[{"url":"#install-oh-my-fish","title":"Install Oh My Fish","items":[{"url":"#fish-themes-with-omf","title":"Fish themes with OMF"}]}]},{"url":"#configure","title":"Configure"},{"url":"#git-config","title":"Git config"},{"url":"#create-react-app","title":"Create React App"},{"url":"#use-ssh-with-github","title":"Use SSH with GitHub","items":[{"url":"#wsl-ssh-config","title":"WSL SSH Config"},{"url":"#windows-git-bash-ssh-config","title":"Windows Git Bash SSH Config"}]},{"url":"#change-wsl-version","title":"Change WSL version"},{"url":"#wrap-up","title":"Wrap up!"}]},"timeToRead":13,"fields":{"slug":"/2018/12/24/wsl-bootstrap-2019/","editLink":"https://github.com/spences10/thelocalhost.blog/edit/authoring/posts/2018/12/24/wsl-bootstrap-2019/index.md"}}},"pageContext":{"slug":"/2018/12/24/wsl-bootstrap-2019/","previous":{"id":"56f083fe-ad5b-51bc-b02f-146b3cc298df","excerpt":"Cliffs/TL;DR I made a  recruiter FAQ  on my personal site for recruiters and\ncreated an  online CV . Preamble Apologies up front about this post if it comes across as entitled or\nranty and I'm sure a lot of people will disagree with my approach. I'm…","frontmatter":{"title":"Turning a job hunt into a dev project","date":"2018-11-30T00:00:00.000Z"},"fields":{"slug":"/2018/11/30/job-hunt-dev-project/"}},"next":{"id":"048815a1-2f7e-5453-a114-1910b6d94baf","excerpt":"Over the past couple of weeks now I have set up several development\nmachines at work and have had to also use two git accounts, GitHib and\nBitbucket. To connect to both I use SSH as a preference, I have been using SSH in\nplace of HTTPS for quite some…","frontmatter":{"title":"Setting up multiple Git providers","date":"2019-01-27T00:00:00.000Z"},"fields":{"slug":"/2019/01/27/multiple-git-profiles/"}}}}}