Setting Up Cypress on Ubuntu WSL2
source link: https://gist.github.com/pjobson/6b9fb926c59f58aa73d4efa10fe13654
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Setting Up Cypress on Ubuntu WSL2
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.
Dependencies
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
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
WSL uses its own SUBNET 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
<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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK