This is a guide on doing Zulip Mobile development on a Windows machine using WSL.
Using WSL is not a requirement for working on Zulip Mobile. If you follow
our step-by-step main install instructions on Windows, they
should work just fine. (You'll use a mix of Git Bash and the basic Windows
Command Prompt (aka cmd.exe
) for your command line.)
However, if you'll be spending a lot of time developing Zulip Mobile, or if
you're already very familiar with the command line on Linux or macOS, it's
highly recommended that you install WSL / "Ubuntu for Windows",
and use bash
instead of cmd.exe
for your main shell prompt.
WSL is a pretty magical piece of engineering, and it gives you access to the same ecosystem of command-line tools that people on Linux and macOS have been contributing to for decades -- while integrating closely with the rest of your Windows environment.
WSL is a feature in recent versions of Windows that allows it to run programs written and built for Linux -- with no change to the programs. The exact same binary program that runs on a Linux machine, runs on WSL.
This enables you to use a bash
shell and Unix command-line environment,
while not having to dual-boot your system or suffer the performance loss
caused by running Linux in a virtual machine.
Microsoft's FAQ for WSL is short and clear, and recommended reading.
WSL requires Windows 10. (If you're on Windows 8.1 or older, an alternative approach to get some of the same benefits is Cygwin. If you try it out with Zulip Mobile, a PR to add a section to this guide would be welcome!)
These instructions are in beta -- they haven't been tested by as wide a range of contributors as most of our developer documentation. If you're trying them, we would love to hear from you in #mobile on chat.zulip.org!
Again, if you aren't already comfortable with the Linux (or macOS) command line, or just want to get things working quickly and straightforwardly, you may prefer to skip these beta instructions and instead follow our step-by-step main install instructions natively on Windows.
The recommended approach is to use the Linux side of things for command-line tasks in your workflow as the developer, including:
- the shell itself (
bash
) - common command-line utilities (
less
,grep
) yarn
You'll want to use the Windows side of things for:
- VS Code (or your favorite other editor/IDE)
- Android Studio
- the Android emulator
- the location of your development tree in the filesystem
What are the reasons to put a given piece on the Linux side or the Windows side? (See the WSL FAQ for more information on many of these.)
- The Linux command-line ecosystem (with
bash
and tools likegrep
) is far richer and more convenient thancmd.exe
; that's the major motivation for WSL itself. - WSL doesn't support GUI programs like VS Code, Android Studio, or the Android emulator. So those run on the Windows side.
- Linux programs running on WSL can read and write files that live in the Windows filesystem, but not vice versa. So putting your files in the Windows filesystem makes them convenient to access from both sides.
- Many command-line tools (including
git
andyarn
) support running on either Linux or Windows. For each such tool, you can install it on either side (and still invoke it from yourbash
inside WSL), but it may be a bit simpler to use the Linux version. - One significant limitation of WSL (as of 2018) is that doing a large
amount of filesystem I/O tends to be slow. This is a reason to do
operations like builds of the app (i.e. running Gradle), perhaps
git
commands, and perhaps the occasionalyarn install
using the Windows versions.
These are primarily one Zulip contributor's notes from setting up their dev environment on WSL. Again, if you're trying them, please come and say hello in #mobile on chat.zulip.org!
-
Update Windows to the latest version. To use WSL you'll need at least the Windows 10 Fall Creators Update, released in late 2017. (For options on Windows 8 and older, see above.)
-
Open Powershell as an Administrator and run the command below to enable WSL.
Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
-
Install Chocolatey. After installing Chocolatey, use it to install the Java SE Development Kit with, at a Windows command prompt:
choco install -y jdk8
(Or possibly now JDK 11, which is the LTS release after JDK 8. See our main install instructions for more on JDK versions; and let us know if you use one version or the other and it works for you.)
-
Install and set up Android Studio.
React Native provides instructions for this. You'll need to click the tab labeled React Native CLI Quickstart, and select the Windows and Android options when they become available (if they're not already selected).
For now, just follow the four steps under Android development environment; we'll be installing (most of) the other requirements in other ways. (You may still want to leave the tab open, though, as this document will be referenced later.)
You can optionally use Chocolatey in step 1, in place of manually downloading and executing an installer. To do so, run at a Windows command prompt:
choco install -y AndroidStudio
In step "1. Install Android Studio", follow the instructions for when you are "already using Hyper-V". WSL 2 uses Hyper-V. This means that instead of using "HAXM" for the Android emulator, you'll have it use the newer "WHPX".
-
Go to the Windows Store and type the name of the Linux distro you would like to use with WSL. These instructions have been tested to work on Ubuntu and Debian GNU/Linux. When the page for your selected distro opens, click on 'Get' to install it.
-
You will receive a notification when the installation has completed. Click on 'Launch' to open it. When it opens, you will see the message "Installing, this may take a few minutes...". Soon after that, you will be prompted to enter the username and password you wish to use.
If you haven't used a Unix-based system, you will notice that nothing shows up while you are typing your password. This is normal and expected behavior.
-
After setting up your username and password, run at the WSL Bash prompt:
sudo apt update && sudo apt -y upgrade
This will initialize your WSL installation and update your distro. This could take a while, so grab a cup of coffee. (You can paste this, and the rest of the commands in this guide, into the WSL window using your right-click button. Ctrl + V will not work.)
-
Install Node and Yarn on your Linux distribution. See our main install instructions for the current recommended versions, with links to upstream install instructions.
(Note that installation via
snap
is not currently an option, assnapd
is not available under WSL.) -
Install the React Native CLI inside WSL:
sudo npm install -g react-native-cli
-
At the WSL Bash prompt, navigate with
cd
to the folder where you would like to put yourzulip-mobile
development tree.This folder must be in the Windows filesystem, not the Linux filesystem inside WSL; see discussion above. From WSL, you can find your Windows local drives at paths under
/mnt/
: for example,cd /mnt/c/
to navigate to theC:\
drive. -
Clone the project into the chosen directory using (at the WSL prompt) the command:
git clone https://github.com/zulip/zulip-mobile
This will create the
zulip-mobile
subdirectory. -
Inside WSL, navigate into
zulip-mobile
and runyarn install
.cd zulip-mobile yarn install
If you get an error along the lines of
EACCESS: permission denied, scandir '/home/{your_unix_username}/.config/yarn/link'
run the lines below and then try
yarn install
again.sudo chown -R $USER:$GROUP ~/.npm sudo chown -R $USER:$GROUP ~/.config
You might see the message 'There appears to be trouble with your network connection. Retrying...'. This is normal. Just wait for it to keep retrying. If it fails, simply run
yarn install
again and again until it completes.Alternatively, you can install Yarn on Windows, navigate into the
zulip-mobile
folder in the Windows Command Prompt, and runyarn install
from the Windows side. -
Follow the React Native instructions (here, if you've closed the tab) under Preparing the Android device to set up the device you plan to use, whether virtual or physical.
-
At your WSL prompt, navigate into the
android
directory and run the GradleinstallDebug
task using the commands below.cd android /mnt/c/Windows/System32/cmd.exe /C gradlew.bat :app:installDebug
If it succeeded, the command will terminate with the sentence "Installed on 1 device".
Open your Android device applications menu and look for the Zulip app, with the name "Zulip (debug)".
-
Open a Windows
cmd
prompt and run the command below to set up the reverse proxy that will allow development if you are using a physical device.adb reverse tcp:8081 tcp:8081
(There's probably a way to run this same command from the WSL
bash
prompt, too. If you try these instructions out and work out how to do that, PRs welcome! ... Better yet, find a way to make it happen automatically, like it does for other platforms.) -
Back at the WSL prompt, navigate up one level, back into the zulip-mobile folder, with
cd ..
. (Unlike on Windows, the space aftercd
is required.) From here, runreact-native start
When you see the message
Loading dependency graph, done.
, open the Zulip app on your device and the final app setup will occur. When it has completed, you will see the Zulip app's initial screen.
Below are some useful tips for using WSL
You can access your Windows local drives from bash
and other Linux
programs by navigating to /mnt/<drive-letter>
.
You can run the following commands so Linux programs check for yarn
, etc., in
/usr/bin
before they check C\Program Files
and try to run the Windows
installation (which, of course, does not work in Linux).
export PATH="$HOME/bin:$HOME/.local/bin:/usr/bin:$PATH"
source ~/.profile
It's generally recommended to update your Linux distro daily or weekly. This is not, by default, automatic; you can do this by typing
sudo apt update && sudo apt -y upgrade
(This will take much less time than it did during initial setup.)
You will usually not need to restart Linux after updates unless a package named
linux-image-
is installed; even then, a restart can be delayed until you're
ready. After the restart, you'll probably want to type sudo apt autoremove
, to
clear out any old Linux images.
If you run into an error that says "JAVA_HOME is set to an invalid
directory", consider using WSLENV
to share the JAVA_HOME
environment
variable with your WSL installation. This only works if you have
Windows 10 Build 17064 or newer.
Open Powershell and run
setx WSLENV "JAVA_HOME/p"
You can also chain together several environment variables by separating them with a colon. For example:
set WSLENV "JAVA_HOME/p:ANDROID_HOME/p
Your Java SDK installation is missing the required tools.jar
file.
Follow our instructions in step 2 to reinstall the Java SDK using
Chocolatey.