Setting Up a Frontend Development Environment on a Second-Hand Laptop: A simple guide

Setting Up a Frontend Development Environment on a Second-Hand Laptop: A simple guide

So, you got yourself a second-hand HP laptop and you're ready to set it up for a development environment in frontend development? Awesome! As a fellow developer, I know how exciting it is to get a new system up and running. Let me walk you through the steps I took to set up my own system.

Update System

First things first, I updated my system. You never know what kind of outdated software might be lurking on a second-hand laptop, so it's always a good idea to start with a clean slate. Plus, updates usually come with security fixes, which is always a good thing.

To update your Windows system, you can follow these steps:

  1. Click on the "Start" button in the bottom left corner of your screen.

  2. Click on the "Settings" gear icon (it looks like a little gear) to open the Settings menu.

  3. In the Settings menu, click on "Update & Security."

  4. In the Update & Security menu, click on "Windows Update."

  5. Click on the "Check for updates" button to check for any available updates for your system.

  6. If there are any updates available, click on the "Download and install" button to install them.

  7. Restart the system when the above step is complete

That's it! Your system should now be up-to-date with the latest updates available for your version of Windows.

Install VsCode

Next up, I installed Visual Studio Code (VSCode), my go-to code editor. If you're not already using it, I highly recommend it. It's lightweight, customizable, and has a ton of extensions that make development a breeze. Once I had VSCode installed, I synced my existing data so I could pick up where I left off on my old system.

Setting up Git and Github

Now it was time to install and set up Git and sync it with my GitHub account. Git is a version control system that's essential for any kind of software development. I followed the steps in this tutorial from The Odin Project to get it set up. theodinproject.com/lessons/foundations-sett..

Install Node and Yarn

With Git set up, it was time to install npm and yarn, two package managers that make installing and managing dependencies a breeze. I won't go into too much detail on these, but if you're new to frontend development, trust me, you'll want them. You can install them from their documentations. This is the link for node- nodejs.org/en/download. And this is the link for yarn - classic.yarnpkg.com/lang/en/docs/install

Enable Virtualization

One thing I did that you might not have thought of was setting up virtualization in the BIOS. This allows me to run virtual machines, which is super useful for testing my code in different environments. If you're using docker, I recommend you set this up ASAP. I followed these two YouTube videos (youtu.be/MFuxInYlpN8 and youtu.be/MOuTxfzCvMY) to get it set up.

Signing in with email

Now, this next step might seem a little strange, but bear with me. I allowed mail and calendar access for people to make edits. This is to enable Microsoft email log in, which is handy if you're working with a team and need to collaborate on projects. I followed these instructions - (knowhowtechnology.wordpress.com/2019/09/13/..) to get it set up.

Bing Wallpaper

And finally, because why not, I set up Bing wallpaper. I like to have a little bit of personality on my system, and Bing's daily wallpapers are a nice touch.

Fix memory Leaks

Oh, and one last thing. I noticed my laptop was experiencing some memory leaks, which can slow things down. I fixed it by following the steps in this YouTube video (youtu.be/7_yv-sZxub4) using Regedits.

Conclusion

And there you have it! My simple guide to setting up a development environment in frontend development on a second-hand HP laptop. Did I miss anything? If so, let me know in the comments. Happy coding!