I want to share with you a pro tip to make programming on Windows a little easier with the help of the [WSL 2](https://docs.microsoft.com/en-us/windows/wsl/about).

Imagine you are developing an API, web app, website, etc. on your Windows machine under WSL2. For example, in my case, [my own website](/). I use the React framework [Next.js](https://nextjs.org/), and yarn as package manager, so if I want to start the development server to check my site I just do:

```bash
yarn dev
```

With the above command, the development server will start and listen on port `3000`. It will serve the page to every device that can reach it, as it's serving the site on the `0.0.0.0` address by default. 

![Starting the dev server of my website {priority}{859x154}](/images/articles/accessing-network-apps-running-inside-wsl2-from-other-devices-in-your-lan-1e1p/4uzme7peiaxhkbvykuuk.png) 

Then, if I visit `localhost:3000` on my Windows machine, everything works. The server returns my live website. However, what happens when I try to open my live site from my mobile phone? I navigate to `<my_windows_local_ip>:3000` and then

![The site can't be reached {589x684}](/images/articles/accessing-network-apps-running-inside-wsl2-from-other-devices-in-your-lan-1e1p/lppaoyo9copyqc1x1cki.jpg)

## The solution: forwarding ports in WSL 2 NAT

WSL 2 creates a [virtualized Ethernet adapter with its own unique IP address](https://docs.microsoft.com/en-us/windows/wsl/compare-versions#accessing-a-wsl-2-distribution-from-your-local-area-network-lan), so in fact it creates a NAT between your WSL instance and your Windows host computer. So to be able to access applications running in your WSL from within your Local Area Network (LAN), you must port forward the desired ports.

The solution is to add a port proxy in the Windows Firewall, so we open a PowerShell terminal with administrator rights and execute the following command:

```powershell
netsh interface portproxy add v4tov4 listenport=3000 listenaddress=0.0.0.0 connectport=3000 connectaddress=<the_wsl_ip>
```

You can get the WSL virtual machine IP right from PowerShell, by executing bash:

```powershell
bash.exe -c "ip -4 addr show eth0 | grep -oP '(?<=inet\s)\d+(\.\d+){3}'"
```

Or the same from within the WSL instance:

```bash
ip -4 addr show eth0 | grep -oP '(?<=inet\s)\d+(\.\d+){3}'
```

After executing the `netsh interface` command in an administrator PowerShell, the server can now be reached without further configuration needed, nor restarting the server.

![Now it works! {590x736}](/images/articles/accessing-network-apps-running-inside-wsl2-from-other-devices-in-your-lan-1e1p/qg9fd6gj3v9xo1hv1nzo.jpg)

## Bonus: a PowerShell script to simplify this task

The IP address of the WSL VM changes every time it reboots (like when you power off your Windows), so if you have already added a port proxy for an IP address, it might not work if you restart your computer.

I have created a PowerShell script to simplify this task when you need it to be done. You could also configure a Windows task to execute this PowerShell script on every reboot, if you also start WSL on boot (because WSL needs to be launched to get its IP address). Or could be a way to executing it from WSL once it starts. I'm not explaining here how to achieve this, as I don't have configured it that way. I don't usually access apps running inside WSL from my LAN, so when I need to do this, I just execute the following script in an administrator PowerShell terminal **(explanation below)**:

```powershell
$remoteport = bash.exe -c "ip -4 addr show eth0 | grep -oP '(?<=inet\s)\d+(\.\d+){3}'"
$found = $remoteport -match '\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}';

if( $found ){
  $remoteport = $matches[0];
} else{
  echo "The Script Exited, the ip address of WSL 2 cannot be found";
  exit;
}

#[Ports]

#All the ports you want to forward separated by coma
$ports=@(80,443,3000,3001,3002,3333,5000,5432,6000,8080,8081,19000,19001);


#[Static ip]
#You can change the addr to your ip config to listen to a specific address
$addr='0.0.0.0';
$ports_a = $ports -join ",";


#Remove Firewall Exception Rules
iex "Remove-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' ";

#adding Exception Rules for inbound and outbound Rules
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Outbound -LocalPort $ports_a -Action Allow -Protocol TCP";
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Inbound -LocalPort $ports_a -Action Allow -Protocol TCP";

for( $i = 0; $i -lt $ports.length; $i++ ){
  $port = $ports[$i];
  iex "netsh interface portproxy delete v4tov4 listenport=$port listenaddress=$addr";
  iex "netsh interface portproxy add v4tov4 listenport=$port listenaddress=$addr connectport=$port connectaddress=$remoteport";
}
```

What this script does is:
- Gets the IP address of the WSL VM.
- Defines the ports you want to proxy/forward. You can therefore edit the `$ports` array as you wish. Here I have written all the ports I could potentially use, so the script will be valid for multiple apps/technologies.
- Adds Windows Firewall rules to allow all inbound/outbound traffic to the WSL. Also removes old rules from previous script executions (with different IP addresses).
- Adds the required port proxies, at the same times that removes old ones from old script executions (with different IP addresses).

If this is the first time that you execute this script, or you have added a new port, you can get a lot of *not found* messages. These are normal warnings that you can safely ignore, as these occur because the script is trying to delete non-existent firewall rules (first time execution) or port proxies (when you add a new port).

I hope this serves you to improve your developer experience in WSL and make you more productive. If you want to continue improving your WSL experience, check [how to run GUI applications on WSL2](/blog/how-to-use-gui-apps-in-wsl2-forwarding-x-server-cdj).

If you have ever tried to access an app running inside WSL and weren't able to connect, here I show yo how to open ports and forward apps in the WSL NAT.

Accessing network apps running inside WSL2 from other devices in your LAN

Yes, this is yet another article about JavaScript Array methods. There are plenty of great articles about the subject around the internet, so, why did I write this one?

After interacting with multiple of my mentees over the years, either interns or junior developers, I realized most of them need a tutorial to understand JavaScript Array methods. I decided to write this article to have an example at hand that I can use to teach and guide them, and to provide a quick introduction to the most important methods. Also, this helps me to refresh my memory about some I use the less.

If you are a beginner at JavaScript or Node, I hope you'll find it very helpful. But even to experienced developers, this article may come in handy to help you brush up on things as you need. So let's start!

## First, a few considerations about arrays in JavaScript

Arrays in JavaScript are not like in other languages, such as Java. They also start at `index: 0`, but have some differences:

In JavaScript, arrays can be a collection of elements of any type. This means that you can create an array with elements of type String, Boolean, Number, Objects, and even other Arrays. That's not the case in TypeScript, where arrays can only contain elements of the same type.

```ts
// javScript Array
const jsArray = [1234, true, 'hello', { subject: 'world' }]

// TypeScript Array of strings
const tsArray: string[] = ['hello', 'world']
```

Also, JavaScript arrays are not of fixed length. You can add or remove elements to/from them at anytime, effectively updating their `length`.

```js
const array = ['🍎', '🍉', '🍒']
console.log(array.length) // 3

array.push('🍌')
console.log(array.length) // 4
```

### Creating an array

We can create an array in several ways, bust the most common ones are:

```js
// Just assigning an array with their values to a variable
const array1 = ['🍎', '🍉', '🍒', '🍌', '🥝']

// Using Array constructor
const array2 = new Array('🍎', '🍉', '🍒', '🍌', '🥝')
```
All the above creates the same array in memory. Other useful ways are [Array.of()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/of) or [Array.from()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from) methods.

### How to add and remove elements to/from an array

We can use the method [push()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) to add elements to the end of an array. If we want to add elements to the beginning of the array we must use the [unshift()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift) method instead. To add elements to the middle (or a custom index) of the array we can use the [splice()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) method.

```js
const array = ['🍎', '🍉', '🍒', '🍌', '🥝']

array.push('🥑') // ["🍎", "🍉", "🍒", "🍌", "🥝", "🥑"]
array.unshift('🍋') // ["🍋", "🍎", "🍉", "🍒", "🍌", "🥝", "🥑"]

// Add at index 2 a total of 1 element with value '🍑'
array.splice(2, 1, '🍑') // ["🍋", "🍎", "🍑", "🍉", "🍒", "🍌", "🥝", "🥑"]
```

To remove elements we can use the [pop()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop) and [shift()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift) methods, that works the oposite that previous ones. But also, we can use the [splice()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) method to remove elements from the middle of the array.

```js
const array = ['🍎', '🍉', '🍒', '🍌', '🥝', '🥑']

const avocado = array.pop() // avocado = '🥑'; array = ["🍎", "🍉", "🍒", "🍌", "🥝"]
const apple = array.shift() // apple = '🍎'; array = ["🍉", "🍒", "🍌", "🥝"]

// Remove starting from index 1 a total of 2 elements
const middle = array.splice(1, 2) // middle = ["🍒", "🍌"]; array = ["🍉", "🥝"]
```

### How to clone an array

To make a copy of an array we can use the [slice()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) method or the spread ([...](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)) operator:

```js
const array = ['🍉', '🍎', '🍒']

const copy1 = array.slice() // copy1 = ["🍉", "🍎", "🍒"]
copy1.pop() // copy1 = ["🍉", "🍎"]; array = ["🍉", "🍎", "🍒"]

const copy2 = [...array] // copy2 = ["🍉", "🍎", "🍒"]
copy2.shift() // copy2 = ["🍎", "🍒"]; array = ["🍉", "🍎", "🍒"]
```

### Array destructuring

We can get the values inside an array directly to variables using destructuring, like this:

```js
const fruits = ['🍉', '🍎', '🍒']

const [first, second, third] = fruits // first = "🍉"; second = "🍎"; third = "🍒"
const [first, , third] = fruits // first = "🍉"; third = "🍒"
const [first, ...rest] = fruits // first = "🍉"; rest = ["🍎", "🍒"]
```

In the above lines, array content won't changed. Just new variables containing the value/s destructured will be created without modifying the original array.

## Useful methods for arrays

Now, let's see some useful methods for arrays that are commonly used in JavaScript ecosystem.

### concat()
The [concat()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.
```js
const fruits = ['🍉', '🍎', '🍒', '🍌']
const vegetables = ['🧅', '🌽', '🥕', '🥦']

const food = fruits.concat(vegetables)
// ["🍉", "🍎", "🍒", "🍌", "🧅", "🌽", "🥕", "🥦"]
```
### join()
The [join()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join) method creates and returns a new string by concatenating all of the elements in an array.
```js
const vegetables = ['🧅', '🌽', '🥕', '🥦']

const vegetablesGroup = vegetables.join('') // "🧅🌽🥕🥦"
const vegetablesDashed = vegetables.join('-') // "🧅-🌽-🥕-🥦"
```
### some()
The [some()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some) method tests whether at least one element in the array passes the test implemented by the provided function. It returns `true` if, in the array, it finds an element for which the provided function returns true; otherwise it returns `false`. It doesn't modify the array.
```js
const fruits = ['🍉', '🍎', '🍒', '🍌']

const bananaExists = fruits.some(fruit => fruit === '🍌')) // true
const cornExists = fruits.some(fruit => fruit === '🌽')) // false
```
### every()
The [every()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every) method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.
```js
const fruits = ['🍉', '🍎', '🍒', '🍌']
const bananas = ['🍌', '🍌', '🍌']

const allBananas1 = fruits.every(fruit => fruit === '🍌') // false
const allBananas2 = bananas.every(fruit => fruit === '🍌') // true
```
### fill()
The [fill()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill) method changes all elements in an array to a static value, from a start index (default `0`) to an end index (default `array.length`). It returns the modified array.
```js
const fruits = ['🍉', '🍎', '🍒', '🍌']

const lemons = fruits.fill('🍋') // ["🍋", "🍋", "🍋", "🍋"]
// Fill from index 1 (included) to index 3 (excluded)
const lemonsAndApples = fruits.fill('🍎', 1, 3) // ["🍋", "🍎", "🍎", "🍋"]
```
### find()
The [find()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find) method returns the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, `undefined` is returned.
```js
const fruits = ['🍉', '🍎', '🍒', '🍌']

const cherry = fruits.find(fruit => fruit === '🍒') // "🍒"
const lemon = fruits.find(fruit => fruit === '🍋') // undefined
```
### findIndex()
The [findIndex()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex) method method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns `-1`, indicating that no element passed the test.
```js
const fruits = ['🍉', '🍎', '🍒', '🍌']

const cherryIndex = fruits.findIndex(fruit => fruit === '🍒') // 2
const lemonIndex = fruits.findIndex(fruit => fruit === '🍋') // -1
```
### filter()
The [filter()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) method creates a new array with all elements that pass the test implemented by the provided function. It does not change the original array.
```js
const fruits = ['🍉', '🍎', '🍌', '🍌']

const onlyBananas = fruits.filter(fruit => fruit === '🍌') // ["🍌", "🍌"]
const onlyLemons = fruits.filter(fruit => fruit === '🍋') // []
```
### includes()
The [includes()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) method determines whether an array includes a certain value among its entries, returning `true` or `false` as appropriate.
```js
const vegetables = ['🧅', '🌽', '🥕', '🥦']

const includesCorn = vegetables.includes('🌽') // true
const includesTomato = vegetables.includes('🍅') // false
```
### forEach()
The [forEach()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) method executes a provided function once for each array element.
```js
const vegetables = ['🧅', '🌽', '🥕', '🥦']

vegetables.forEach(vegetable => console.log(vegetable))
// "🧅"
// "🌽"
// "🥕"
// "🥦"
```
### map()
The [map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) method creates a new array populated with the results of calling a provided function on every element in the calling array. It does not change the original array.
```js
const vegetables = ['🧅', '🌽', '🥕', '🥦']

const doubledVegetables = vegetables.map(vegetable => vegetable + vegetable)
// ["🧅🧅", "🌽🌽", "🥕🥕", "🥦🥦"]
```
### sort()
The [sort()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) method sorts the elements of an array [in place](https://en.wikipedia.org/wiki/In-place_algorithm) and returns the sorted array. The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.
```js
const fruits = ['🍉', '🍎', '🍒', '🍌', '🍉', '🍒', '🍎', '🍌']

fruits.sort() // ["🍉", "🍉", "🍌", "🍌", "🍎", "🍎", "🍒", "🍒"]
```
### reverse()
The [reverse()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) method reverses an array [in place](https://en.wikipedia.org/wiki/In-place_algorithm). The first array element becomes the last, and the last array element becomes the first.
```js
const fruits = ['🍉', '🍎', '🍒', '🍌']

fruits.reverse() // ["🍌", "🍒", "🍎", "🍉"]
```

## That's it!
I hope you've found this article insightful, and that it helps you understand JavaScript arrays more clearly. I have other articles about node and JS/TS that might be useful for you too. You can [check my node articles](/blog?tags=node) or, if you don't know where to start, might [*How to convert callbacks into promises*](/blog/how-to-convert-callbacks-into-promises) can be a good next lecture.

See you!

This is a tutorial with examples and further references to fully understand JavaScript arrays and their methods, in a handbook or quick-reference guide style.

JavaScript Array methods explained with examples

If you have already read some of [my WSL related articles](/blog?tags=wsl), chances are that you are using and/or have discovered the potential of WSL 2. However, you might have experimented problems if tried to launch any graphical application within it.

Nowadays, a third-party app is required to run GUI apps, but Microsoft announced on Build 2020 that [adding Linux GUI app native support to WSL is on their roadmap](https://devblogs.microsoft.com/commandline/the-windows-subsystem-for-linux-build-2020-description/#wsl-gui). I currently use *VcXsrv Windows X Server* for that purpose, and that's the tool I will explain on this post. It's an old open-source tool that updates quite frequently. [You can check it on Sourceforge](https://sourceforge.net/projects/vcxsrv/).

## Installing and configuring VcXsrv
The first step is to download and run the `.exe` [installer from Sourceforge](https://sourceforge.net/projects/vcxsrv/). On the installation wizard, be sure to check the *Disable access control* option. This will save us time, avoiding some *permission denied* errors.

![Be sure to disable access control {priority}{508x400}](/images/articles/how-to-use-gui-apps-in-wsl2-forwarding-x-server-cdj/c9fsd1f4vlhkcqroffl4.png)

To be sure that this option is always checked, save the configuration to later launch VcXsrv using that config file.

![How to save VcXsrv configuration {501x396}](/images/articles/how-to-use-gui-apps-in-wsl2-forwarding-x-server-cdj/x370kq1k7asyda7zq8op.png)

## Setting permissions in Windows Firewall
Once VcXsrv is installed, we need to set the proper permissions on our firewall. Here, I assume you use the default Windows Firewall, but if you use a custom firewall (like a firewall provided by an antivirus), you may need to configure it manually.

When executing VcXsrv for the first time, a Windows Firewall pop-up should appear. Just be sure to give it permissions on both private and public networks.

![Setting permissions in Windows Firewall {658x476}](/images/articles/how-to-use-gui-apps-in-wsl2-forwarding-x-server-cdj/fumy6n0d8f3c1vowd3rg.png)

If the pop-up doesn't appear, or if you gave it the wrong permissions by mistake, you can just change the permissions manually. To do so, open `Windows Security` app and go to `Firewall & network protection -> Allow an app through firewall` and ensure *VcXsrv windows x server* has both permissions.

## Setting the `DISPLAY` env var
The last step is to set the `DISPLAY` environment variable on our WSL 2 Linux instance. We need to configure the Windows host's IP address as `DISPLAY` (where the VcXsrv X server is running). Also, because WSL 2 network changes on every restart, so the Windows host's IP does too, it's needed to dynamically set this value on WSL2 launch.

We can use one of the following statements to dynamically set the `DISPLAY` env var to the correct value.

```bash
export DISPLAY="`grep nameserver /etc/resolv.conf | sed 's/nameserver //'`:0"
export DISPLAY="`sed -n 's/nameserver //p' /etc/resolv.conf`:0"
export DISPLAY=$(ip route|awk '/^default/{print $3}'):0.0
```

If you run one of the above commands on your Linux terminal, then, you should see and local IP address when reading the var value. Just use whatever of the above that works correctly on your machine.

```bash
export DISPLAY=....
echo $DISPLAY # Example working output: 192.168.128.1:0.0
```

Lastly, to ensure the DISPLAY env var is updated on every restart, we should add the chosen `export` statement to our `~/.bashrc` file (if you are using bash as your command interpreter) or in `~/.zshrc` (if using zsh instead).

## Testing it out

Let's test it! First, ensure the VcXsrv is running. You can check it by looking at the icons on your task bar. You should be able to see the VcXsrv icon if the server is up and running.

![VcXsrv running on the task bar {212x72}](/images/articles/how-to-use-gui-apps-in-wsl2-forwarding-x-server-cdj/b44988fz25hfs0j6ktq6.png)

If you can't see any icon, just start the server by double-clicking on the config file you saved when installing. It will launch VcXsrv server with the configuration on that file. You can open the file with a text editor, if you want to check the configuration inside.

If you have followed all the above steps, you should be able to execute GUI apps within WSL2 already. Let's try with the `x11-apps`, some very low resources and low dependencies apps made for testing X server configurations.

```bash
sudo apt install x11-apps
xeyes
xcalc
```

![GUI apps running on WSL2 Ubuntu {880x369}](/images/articles/how-to-use-gui-apps-in-wsl2-forwarding-x-server-cdj/g9xjdjgs2v7mjd4ljzjh.png)

After executing the above commands, you should see two eyes following your mouse. Congratulations! You have successfully configured your WSL2 instance to run GUI apps.

Now what's next? If you want to know how to [write code inside WSL with VS Code and run containerized apps using Docker](/blog/how-to-be-a-productive-programmer-in-windows-with-wsl2-5185), I wrote about it too.

## Troubleshooting

I particularly had an issue trying to use the default `0.0` display as my X server. Indeed, trying to use `0.0` will make the X server to crash on my Windows machine. It took me a few hours to realize, after searching on Google for a while and trying multiple different fixing options.

If you have the same problem, may you can fix it by using the `1.0` display instead. This is how I set the `DISPLAY` value.

```bash
export DISPLAY=$(ip route | awk '/default/ { print $3 }'):1.0
```

And this is my VcXsrv `config.xlaunch` config file.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<XLaunch WindowMode="MultiWindow" ClientMode="NoClient" LocalClient="False" Display="1" LocalProgram="xcalc" RemoteProgram="xterm" RemotePassword="" PrivateKey="" RemoteHost="" RemoteUser="" XDMCPHost="" XDMCPBroadcast="False" XDMCPIndirect="False" Clipboard="True" ClipboardPrimary="True" ExtraParams="" Wgl="True" DisableAC="True" XDMCPTerminate="False"/>
```

I will teach how to run Linux GUI (Graphical User Interface) apps from within the WSL2 using an open source third party tool called VcXsrv Windows X Server.

I'm Aitor 👋

Popular Articles

Accessing network apps running inside WSL2 from other devices in your LAN

JavaScript Array methods explained with examples

How to use GUI apps in WSL2 (forwarding X server)