Setting Up Cypress on Ubuntu WSL2

Deprecated

Per @samali0996 's comment below: https://gist.github.com/pjobson/6b9fb926c59f58aa73d4efa10fe13654?permalink_comment_id=4487157#gistcomment-4487157

The new WSL Win10/11 should support this natevly. Thanks for posting the update!

Support

Edit: I no longer have access to a Windows dev environment and don't really have much interest in setting one up, you can reply, but I can't offer you any support on any of this. I recommend reading the Deprecated notice and going from there.

License

As this is becoming more popular, I am officially licensing it as Public Domain, please do whatever you want with it. Sell it, modify it, steal it... I'm not concerned.

https://en.wikipedia.org/wiki/Public_domain

Notes

No clue why the directions for this are buried deep in WLS issues. This is how I setup my Cypress on Ubuntu WSL2 working for both on and off VPN with some corp firewall.

Before executing any command, be sure to read and understand it, I ask you to run two shell scripts which I wrote. You should review any shell script provided by anyone before blindly running it. I'm not doing anyting bad, but I advise you to check for yourself.

Setup WSL2 & Install Linux

This is outside of the scope of this document, read this doc for more info: https://pureinfotech.com/install-windows-subsystem-linux-2-windows-10/

Dependencies

This is for Ubuntu, it should be similar for other distros.

sudo apt install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev \
     libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb \
     x11-apps build-essential ca-certificates libcurl3-gnutls    \
     libcurl4 libcurl4-openssl-dev
mkdir ~/bin
echo "export PATH=~/bin:\$PATH" >> ~/.bashrc

Install Certs

Inside a firewall sometimes it is a PITA to get it to recognize certifications. I made a script to add the certs from github domains. If you're not behind a firewall and you can route to github hosts, then you do not need this.

cd ~/bin
wget --no-check-certificate https://gist.githubusercontent.com/pjobson/c7983da02ddb81c2c7457775111a4266/raw/90d23250c3466b7a39a76c2082591bd4880b7f5d/install_certs.sh
chmod +x install_certs.sh
sudo ./install_certs.sh

Install Node

This uses tj/n which is what I like. You can use nvm or install from binary or source, those are outside of the scope of this document.

curl -k -L https://git.io/n-install | bash
source ~/.bashrc
n lts
node --version
npm --version

Install X-server

Download and install vcxsrv: https://sourceforge.net/projects/vcxsrv/

Setup DISPLAY Environmental Variable

If you're unfamiliar with what this is, I recommend reading this article: https://askubuntu.com/questions/432255/what-is-the-display-environment-variable

WSL uses its own virtual network and has a different IP than Windows, so you need to tell WSL to use your Windows IP address and display.

In WSL, run:

netsh.exe interface show interface

Mine returns this at home while on the VPN:

Admin State    State          Type             Interface Name
-------------------------------------------------------------------------
Enabled        Connected      Dedicated        Ethernet 3
Disabled       Disconnected   Dedicated        Ethernet 2
Enabled        Connected      Dedicated        Wi-Fi
Enabled        Connected      Dedicated        vEthernet (WSL)

Whereas at work off the VPN it returns:

Admin State    State          Type             Interface Name
-------------------------------------------------------------------------
Disabled       Disconnected   Dedicated        Ethernet 3
Disabled       Disconnected   Dedicated        Ethernet 2
Enabled        Connected      Dedicated        Wi-Fi
Enabled        Disconnected   Dedicated        Ethernet
Enabled        Connected      Dedicated        vEthernet (WSL)

In this example, my VPN connection is Ethernet 3 where as my non-VPN connection is Wi-Fi. In my case I need to use the IP for the VPN while at home and the IP from the Wi-Fi at work. I'm not 100% sure why this is, but I dislike Windows, so whatever.

I wrote a script which will output the display based on VPN or Default.

cd ~/bin
wget --no-check-certificate https://gist.githubusercontent.com/pjobson/3c5c23edd8e49cef7816372f4931f564/raw/8121f630571c8391f031d378f9381590ecbda003/getdisplay.sh
chmod +x getdisplay.sh
~/bin/getdisplay.sh 'VPN Interface' 'Default Interface'

Note: If you're not on a VPN and just to use a single interface, you can just pass it twice. The script is written for my specific use case, so it will always require two.

~/bin/getdisplay.sh 'Default Interface' 'Default Interface'

Of course change the VPN Interface and Default Interface to whatever yours are.

Mine for example is:

~/bin/getdisplay.sh 'Ethernet 3' 'Wi-Fi'

This should output something like this. If it returns nothing, you probably are using the wrong interfaces.

10.10.10.10:0.0

Edit .bashrc, add the following, again making the interfaces your own.

# set DISPLAY variable to the IP automatically assigned to WSL2
export DISPLAY="$(~/bin/getdisplay.sh 'VPN Interface' 'Default Interface')"
sudo /etc/init.d/dbus start &> /dev/null

Edit dbus file

sudo vi /etc/sudoers.d/dbus

Add:

<your username> ALL = (root) NOPASSWD: /etc/init.d/dbus

Source your bashrc

source ~/.bashrc
echo $DISPLAY

This should again display something like:

10.10.10.10:0.0

Start X Server

Open XLaunch from start menu.

Config:

Select: Multiple Windows (default)
Select: Start no client (default)
Check: Disable access control
Uncheck: Native opengl
Save configuration on startup folder, location: %AppData%\Microsoft\Windows\Start Menu\Programs\Startup

Windows Firewall

Start -> Run

 	%windir%\system32\WF.msc

Right-Click Inbound Rules -> New Rule...

Rule Type: Program
Program -> This Program Path: %ProgramFiles%\VcXsrv\vcxsrv.exe
Action: Allow the Connection
Profile: Check all
Name: VcXsrv

Test It

Just run one of the x11-apps installed at the top.

xeyes

Should open the xeyes application.

Install Cypress

General:

cd code_path
npm init

If you're NOT behind a firewall:

npm install cypress --save-dev

If you are behind a firewall, you need to get the zip file and point NPM to use it.

# Version -------------------------------------------------VVVVV
wget --no-check-certificate https://cdn.cypress.io/desktop/9.5.3/linux-x64/cypress.zip -O ~/cypress.zip
CYPRESS_INSTALL_BINARY=~/cypress.zip npm install cypress --save-dev

If you get a certificate error, disable strict-ssl in npm.

npm config set strict-ssl false

Then start it.

./node_modules/.bin/cypress open

Frequently I'll temporarily add the path to it to my PATH.

export PATH=./node_modules/.bin/:$PATH

cypress open

AWS EC2 Notes

I wanted to add a note that you can forward traffic from your AWS EC2 instance through WSL to the X Server in Windows.

In your WSL create a ~/.ssh/config file and add:

Host <AWS_HOST_IP_ADDRESS>
        HostName     <AWS_HOST_IP_ADDRESS>
        User         <AWS_HOST_USERNAME>
        IdentityFile ~/.ssh/<AWS_HOST_PEM_FILE>
        Port         22
        ForwardX11   yes

Host *
        IdentitiesOnly=yes
        PreferredAuthentications=publickey
        Compression yes
        ServerAliveInterval 30
        ServerAliveCountMax 1200
        LogLevel INFO

Then you can ssh to your EC2 host inside WSL. From your EC2 install xorg-x11-apps and run xeyes, this should open that app within your Windows x-server. You should be able to run cypress headed from your EC2 and have it open in Windows.

pjobson/setup_cypress_wsl2.md