How to setup WML and React native environment on Windows 10

Why am I writing this?

Hi 👋, I am Faria Ejaz and this is my first blog. During corona virus pandemic, I switched to my new job where I got a chance to work on a project that is available on Web(react js), iOS (react-native), Android (react-native), using mono repo structure, short for mono-repository — a repository that usually contains multiple related projects into single repository.

https://medium.com/@erzhtor/javascript-monorepo-with-lerna-5729d6242302

Along with that they were using Symlinking, symlink term is used for such a file that contains a reference to another package or file . To achieve symlinking they were using wml.

WML listens to changes in some folder (using Watchman) and copies changed files into another folder. — Wix

WML is the new addition to my knowledge and its installation along with setting up react native environment on windows 10 was quite a great hassle.

It took me 2 days and so to complete the setup with the help of my colleague. So I thought of sharing my setup struggle with you all so that none of you have to go through the pain I suffered.

Following are the steps to follow but always remember Google should be your first go-to place if you face any issue while following these steps.

Install WML on Windows 10:

1. Since watchman works fine on OSX / Linux rather than on windows 10. Follow Linux Installation Guide for Windows 10 ; install Ubuntu and update its packages.
2. Install Facebook’s Watchman on Linux Ubuntu .By following watchman guide steps , the watchman should be installed in your ubuntu machine , if there were no errors displayed on any of these steps.

Trouble Shooter 1

https://datascience.columbia.edu/automating-search-silent-software-bugs

Trouble Shooter 2

watchman pkg-config appears to be missing (not available to autoconf tools) please install the pkg-config package for your system.

Trouble Shooter 3

./autogen not working on Ubuntu to install watchman for react-native

Solution:

Before cloning watchman repo. You will need to install libssl-dev, autoconf, automake , libtool and python-dev

here are the commands:

$ cd ~
$ git clone https://github.com/facebook/watchman.git
$ cd watchman/
$ git checkout v4.7.0
$ sudo apt-get install -y autoconf automake build-essential python-dev libssl-dev libtool pkg-config //must install to get rid of bugs 
$ ./autogen.sh
$ ./configure
$ make
$ sudo make install

3. Install node JS and npm inside Ubuntu using following commands

$ sudo apt-get update
$ sudo apt-get install nodejs
$ node -v
$ sudo apt-get install npm
$ npm -v

4. Install wml inside ubuntu

npm install -g wml 
wml --version 
//if you get permission denied issues then enter commands with sudo prefix like sudo npm install -g wml

Trouble Shooter 4

Solution:

if you face permission denied related issues that i was usually countering then try to enter your command with sudo prefix like sudo npm install -g wml

Once the installation is completed. In the root directory of your project run following commands to add your required project directory to wml.

wml add packages/commonpackages/mobile/node_modules/@monorepo/common
#run wml
wml start

Setting up React native environment on Windows 10:

you can follow official react native doc. Now when everything is installed successfully in your machine now you have to run wml start inside ubuntu and react-native run-android inside vs code integrated terminal or external terminal depends on your choice simultaneously. But my app was crashing every time i run react-native run-android and i had no idea why is this happening so stack overflow came to my rescue and i was able to see my new project for the first time running on virtual android device.

Trouble Shooter 5

Solution:

https://stackoverflow.com/questions/38701115/windows-android-react-native-server-crashes-very-often/38831876

Conclusion

I hope you will find this helpful and do comment down the issues you faced during installation along with their solutions so that other people can also benefit from your experience.