My normal reaction is to dual boot my new Windows laptops and or install Ubuntu on a virtual machine for full-stack web development. Full stack means you must write the front end (the user interface) and the back end of an app (database, API integration, and other services). I wanted to build a new app using Next.js, React, Firebase, and Tailwind. New AI projects are requiring lots of new tools to be installed and ready on your system. Before I installed Ubuntu, I did some research and came across WSL—The Windows Subsystem for Linux.
Windows Subsystem for Linux (WSL) lets developers install a Linux distribution and use Linux applications, utilities, and Bash command-line tools directly on Windows, unmodified, without the overhead of a traditional virtual machine or dual-boot setup.
My goal was to build a Next.js app and deploy it to Vercel. I wanted my system to be able to run a Node.js server and be able to develop my app in Visual Studio Code without jumping around. I collected my notes since it was my first time and I probably will want to get my environment set up on another machine. I hope this helps you out.
Use Windows PowerShell to Install WSL 2
Open PowerShell as administrator
- Type this to install WSL
- Check the version to confirm the installation of WSL. You are looking for version 2.
wsl -l -v
- Exit PowerShell by typing exit
Install Windows Terminal
Windows updated the terminal and have provided a great way to interface with your system and subsystems. Go to the Windows Store and install the upgraded Windows Terminal.
- Open WSL by typing wsl in Windows Terminal
- Update Ubuntu: sudo apt update && sudo apt upgrade
- Install cURL: sudo apt-get install curl
- Exit wsl, close Terminal, reopen terminal, get back into WSL
Install Node.js and a Package Manager
- Install Node.js LTS: nvm install –lts
- Install latest Node,js: nvm install node
- Verify installation: nvm ls
- Install Visual Studio Code WSL on your Windows machine
- Install Node Extension Pack
Back to WSL:
- Verify Installation: command -v nvm
Create Your First Next.js Web Application
- cd ~
- mkdir NextProjects
- cd NextProjects
- npx create-next-app my-next-app
Open Visual Studio Code from Windows Terminal
You can now use the terminal tab that’s built into VS Code. To run your app, type “npm run dev” and go to “localhost:3000” in Microsft Edge. “run dev” lets you work on your app and have it running a development instance with hot-reloading, file watching and task re-running. It really speeds up the iterative process.
If you want to opt out of Next.js telemetry, type “npx next telemetry disable” in the VS Code Terminal.
Install React Developer Tools
Install React Developer Tools on the Microsoft Edge Browser so you can get detailed React feedback about your errors and connect the web development experience more tightly to Visual Studio Code.
To open Windows Explorer to manage your files:
Don’t forget that dot ^
This is a quite nice trick. You can manage the files on your WSL subsystem. This works how you want it to work. You can move files back and forth.
I found a few resources useful as I learned how to get my laptop and development environment set up. Let me know if you find any useful resources out in the wild.
- WSL Tutorial: https://learn.microsoft.com/en-us/windows/wsl/install
- Windows Terminal: https://apps.microsoft.com/store/detail/windows-terminal/9N0DX20HK701?hl=en-us&gl=us&rtc=1