DEV Community

Cover image for How to configure React JS app on WSL2 Windows 10
Muhammad Azfar Aslam
Muhammad Azfar Aslam

Posted on • Edited on

7

How to configure React JS app on WSL2 Windows 10

Salut,
If you use a windows machine with windows installed on it but also want to work using Linux/Ubuntu environment. There are mainly three approaches. (There can be more)

  1. Virtual Machine
  2. Dual Boot
  3. WSL

I would recommend you WSL because of two reasons. One, the first two approaches would be required a lot of resources like RAM and Hard Drive memory, etc. WSL consumes minimal resources and secondly, it allows you to export its image and import it on another computer within minutes.

Enable Windows Subsystem for Linux

  1. Open Start on Windows 10.

  2. Search for Turn Windows features on or off and click the top result to open the experience.

  3. Check the “Windows Subsystem for Linux” option.

Image description

  1. Click the OK button.

  2. Click the Restart button.

Enable Virtual Machine Platform

  1. Open Start, Search for PowerShell, right-click the top result, and select the Run as administrator option.

  2. Type the following command to enable the Virtual Machine Platform feature and press Enter:



Enable-WindowsOptionalFeature -Online -FeatureName VirtualMachinePlatform


Enter fullscreen mode Exit fullscreen mode

Install WSL2 on Windows 10

Search for Command Prompt, right-click the top result, and select the Run as administrator option.

Type the following command to install the WSL on Windows 10 and press Enter:



wsl --install


Enter fullscreen mode Exit fullscreen mode

Another way is to go to the Microsoft store and install Ubuntu 18.04.

Once you install Ubuntu run following commands.



sudo apt update


Enter fullscreen mode Exit fullscreen mode


sudo apt-get install curl


Enter fullscreen mode Exit fullscreen mode


curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash


Enter fullscreen mode Exit fullscreen mode


source ~/.bashrc


Enter fullscreen mode Exit fullscreen mode


nvm install 16


Enter fullscreen mode Exit fullscreen mode


sudo apt-get install build-essential


Enter fullscreen mode Exit fullscreen mode

Now go to your home directory and install react js app.

cd /home



npx create-react-app my-app-on-wsl


Enter fullscreen mode Exit fullscreen mode


npm start


Enter fullscreen mode Exit fullscreen mode

You may face a permission error (mostly this occurs with the Next JS app). To resolve this error you need to give app folder permission to your user as well.
I hope this would be helpful for you guys. Do like and follow for more updates.

**

Other links:

**

  1. Custom 'Tooltip' component using Tailwind and React Js
  2. JavaScript: Falsy(False) and Truthy(True) values explanation with example

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay