Building a new development environment

I have been working on a lot of side projects lately. My latest thing I am going to be working on is a React Native app with push notifications using Google Cloud’s Firebase Cloud Messaging.

Before I do anything with that though, I need to get my development environment going. I have been using VSCode for a while now with Arduino and for some Python work on Rapsberry Pi so I would like to stick to using that. I also want to use Windows Subsystem for Linux since this has basically been the best thing that has happened to Windows in a long time.

Install WSL

First thing you need to do is install Windows Subsystem for Linux following the instructions from Microsoft:

https://docs.microsoft.com/en-us/windows/wsl/install-win10

You might need to enable the windows subsystem for linux as well. Open a powershell and run the following command:

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

Pick whatever flavor of linux you want from the Microsoft Store, I chose Ubuntu LTS because I like Ubuntu, it’s very well documented and long term support helps with consistency over time.

After you have installed it launch it for the first time and complete the setup as instructed. After that you should do a full update. Get a coffee while that happens…

sudo apt-get update
sudo apt-get upgrade

Install VSCode

After the installation is complete time to install VSCode. You can get that directly from Microsoft:

https://code.visualstudio.com/download

After we have installed VSCode, launch it for the first time. You might get some errors, ignore them for now. A nice but somewhat unknown feature about VSCode with WSL is that if you run VSCode from within WSL (with the command “code”) it will actually launch the native Windows executable.

Install Git for Windows

Since we want to work with source control on this project (as there will be a lot of moving parts) we need to install Git for windows.

https://git-scm.com/

Install it, these are the settings I used:

I also selected a few additional options:

  • Use Visual Studio Code as Git’s default editor
  • Use git from the command line and also from 3rd-party-software
  • Use OpenSSH (comes with Git)
  • Use the OpenSSL library
  • Checkout as-is, commit Unix-style line endings (allows WSL to work properly)
  • Use Windows’ default console window.
  • Enable file system caching
  • Enable Git Credential Manager

Configure VSCode for Bash and Git compatibility

Once the installation is complete, launch VSCode and open your settings.json file. Add the following line to change your integrated terminal from Powershell to native Bash:

"terminal.integrated.shell.windows": "C:\\WINDOWS\\sysnative\\bash.exe"

Restart VSCode and open the termianl bash should launch as your native shell. An important thing to note is, your bash prompt should look something like this:

<username>@<hostname>:/mnt/c/Users/<winusername>

This is a critical change to understand, when you are dealing with paths in windows they look like this:

C:\Users\<winusername>\

But that translates into this:

/mnt/c/Users/<winusername>$

This is your mounted C drive. So if you are keeping your files in:

C:\Users\Dude\Documents\Project1

You get to that folder by:

cd /mnt/c/Users/Dude/Documents/Project1

From this directory, I create/clone projects. Then using Bash, I cd into those directories and npm install / bundle install whatever I need. Each subdirectory acts as its own project folder. Each of these can be committed to git or branched/updated differently.

Configure WSL

We installed Git for Windows but we should also add Git into our WSL then we can work in Bash in VSCode and work from within our WSL as well (omit –global to set this as specific to a project)

sudo apt install git
git config --global user.email "you@example.com"
git config --global user.name "Your Name"
git config --global core.autocrlf input

The crlf setting is important, it causes Git to change a carriage return line feed to a linux compatible line feed. This makes sure all your code and installations don’t break. It’s important.

Quick reminder of the workflow to build a new git repository (most of this information comes from the simple guide to git)

http://rogerdudler.github.io/git-guide/

"From within your new project directory"
git init
"Do some work, add some files"
git add *
git commit -m "Commit message"

Now log into github and create a repository that matches the project folder name you chose for this new project, set it to public or private and initialize with a README if desired. Git will then give you the appropriate commands to upload your repository:

git remote add origin https://github.com/<account name>/NewRepository.git
git push -u origin master

Git will ask for your username and password and then push the code into the github repository.

Now install other tools you need like Python, Node, etc. Since we are working on React Native, we are going to install a couple different tools.

Configure environment for React Native Development

Perform all of these installations in your WSL window not from the native bash shell in VSCode. These instructions are based on the linux installation instructions from React Native’s Facebook github.

https://facebook.github.io/react-native/docs/getting-started

First we have to install Node.js, which turns out is not super easy. Regardless, follow the instructions here:

https://github.com/nodesource/distributions/blob/master/README.md#deb

Execute these commands for the latest version of node at this time, v12.x

# Using Ubuntu
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install -y nodejs

Next we install the React Native CLI, installing Node gave us the Node Package Manager npm which allows us to install further versions of Node and Node supporting code. So now we install the React Native CLI

 sudo npm install -g react-native-cli 

After that we install the default JDK

sudo apt install default-jdk

At the time of writing the latest version of java is 1.8, so you should get the following output from the “java -version” command

openjdk version "1.8.0_212"
OpenJDK Runtime Environment (build 1.8.0_212-8u212-b03-0ubuntu1.16.04.1-b03)
OpenJDK 64-Bit Server VM (build 25.212-b03, mixed mode)

Now to extend the functionality of the WSL we want to install an Xterm system in windows. The one I have tested is MobaXTerm which you can find here:

https://mobaxterm.mobatek.net/

Download and install the home edition for windows. This will be required to launch any sort of graphical development component from WSL. So depending on your workflow and what you are developing you may or may not need to install this part. Once it is installed you will need to set your DISPLAY variable in WSL.

Navigate to your home director and edit your .profile file. At the end of the file you will want to add the following line:

export DISPLAY=:0

Now save the file and exit your linux and restart it. Now your DISPLAY is exported to the primary display on your workstation and combined with MobaXTerm this will allow graphical users interfaces to launch through your WSL. Your linux subsystem will require some extra files to make that happen though so to do that you should run the following install:

sudo apt-get install libgtk2.0-0 libxss1 libasound2
sudo apt-get -f install

Now we are going to install Android Studio within WSL to give us the full Android tools. You could actually install just the command line tools and packages, but I want to experiment with the whole suite. Download the linux distribution for your version of linux at the follow link

https://developer.android.com/studio/index.html#downloads

With your xterm running from within your WSL follow the linux installation instructions for installing Android Stuido:

https://developer.android.com/studio/install#linux

I installed android studio into /usr/local, and because it is a .sh script just adding it to your path won’t work easily. So, going oldschool here and adding a simlink to /usr/local/bin back to it to spoof an executable.

cd /usr/local/bin
sudo ln -s /usr/local/android-studio/bin/studio.sh studio

(May 20, 2019 – Unfortunately KVM on WSL still isn’t possible. I will keep trying this in the future. I have left this part of the documentation in for that time, but you can jump ahead to Build your first Application. Might try Vagrant as well and use it within WSL to push to external KVM server
https://char.gd/blog/2017/how-to-set-up-the-perfect-modern-dev-environment-on-windows WSL 2 will fix this issue.)

We will probably want to install KVM for increased performance as per Android Studio’s recommendations. For our version of Ubuntu the instructions are below:

https://linuxconfig.org/install-and-set-up-kvm-on-ubuntu-18-04-bionic-beaver-linux

The listed instructions don’t work exactly with WSL so I modified the installation (excluding libvirt-clients) to the following command:

sudo apt install qemu-kvm libvirt-daemon-system bridge-utils virt-manager

Once the installation is complete, we need let Ubuntu know that you are going to share your Ethernet connection using a bridge. This will require discovering which ethX interface you are using for your primary network. Run a “ifconfig -a” and find the ethX entry with the same IP as your primary network connection in Windows. Once you have found that, edit your /etc/network/interfaces file and add the following lines (our example uses eth1):

iface eth1 inet manual

iface br0 inet dhcp
        bridge_ports eth1

Build your first Application

Once you have walked through the install Android Studio will launch for the first time. Create a new basic application and open it. That will cause Android Studio to download and install the latest version of gradle and integrate it with your development environment. Once that is complete it will complete a build of your test application. After that you can setup a physical deployment target for testing. This is a bit tricky!

As you can see above, no connected devices are showing. You can get this to work but in a non-intuitive way. To connect to a physical device android studio relies on Android Debug Bridge (adb) and the version of adb needs to exactly match in both WSL and in Windows.

You can check the version in both shells using the command “adb version”. It might not work immediately in powershell and you may have to add it to your path. What you will likely find is that the version in your powershell and the one in WSL are not the same. They need to be the exact same version.

My Linux version was not the latest and the package installed through apt-get universe was not the latest, so I had to manually install the latest and change those executables in /usr/local/bin

wget https://dl.google.com/android/repository/platform-tools-latest-linux.zip
sudo unzip -d /usr/local/sbin platform-tools-latest-linux.zip
sudo mv platform-tools /usr/local/
cd /usr/local/bin
sudo mv adb .off.adb
sudo mv fastboot .off.adb
sudo ln -s /usr/local/platform-tools/adb adb
sudo ln -s /usr/local/platform-tools/fastboot fastboot

At this point my Linux version of adb was reporting 1.0.41

I wound up having to install the package manager Chocolatey
https://chocolatey.org/ and using that to manage the versions of ADB in powershell. This command installed Chocolatey from within an Administrator Powershell

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

Then I restarted my powershell and installed the correct (latest) version of adb using this command:

choco uninstall adb
choco install adb

Once those versions match, you can shut down the adb server in WSL using the command “adb kill-server” and you can start the adb server in powershell by calling “adb devices” Which should list your attached android device (as long as Developer tools are unlocked and you have allowed access on the Android device). If you run the adb version command in WSL you should see the exact same output for your device.

Now you can compile and run your app in Android studio to the connected device. I will keep trying to make WSL work but this is a reasonable way to test using WSL as your entire development environment.

Interestingly, the windows native BASH shell in VSCode inherits all the configuration we have done above too. That means, from within VSCode you can launch android studio from the terminal, you can use react native cli, manage all your source through Git, and you can use any other linux subsystem tools that you install, all through VSCode.

Configure to build React Native Applications.

First thing we should do is install a couple supporting packages. Specifically yarn (execute these lines, 1 at a time):

curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -

echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

sudo apt-get update

sudo apt-get install yarn

Now we have to set up some environment variables for React Native to work in our WSL environment. Add these lines to your $HOME/.profile

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tool

Once these variables have been added you can execute “source $HOME/.profile” and “echo $PATH” to verify the variables have been added to your executable environment.

Creating your first React Native app

Now that everything is set up you can move into your development directory and start a brand new project by typing the following command:

react-native init <Project Name Here>

This will kick off creation of a project folder and the automated download of all required libraries etc. There may be warnings about core packages being out of date or missing dependencies. These appear to be safely ignored (I might learn otherwise as I start building more react native apps!).

Assuming that everything installed correctly and your test device is properly connected and visible from Android Studio as shown earlier you can now execute your react native project with the following commands.

cd NewProject
react-native run-android

This should fire up a JS server, kick off a multi-threaded build, the first time it may take a while, after it is fast.

If the build fails, make certain ADB in PowerShell is running the daemon for USB devices and not the one in WSL.

Once that is corrected, run the react-native run-android command again. This time you should be greeted with (If it returns to a prompt, the app won’t run properly, RN should be running in the shell):

And on your device:

Congratulations! You have just built your very first application in React Native on WSL using VSCode for all your development. Now go drink a stiff drink, that was a lot of work.

What’s new, and side gigs.

I haven’t updated this blog in forever and I really think I should be using it. Though I think now it is going to be more focused on dumping my own ideas to a screen, rather than writing for anyone else to consume. With that being said, I won’t work hard to edit what I am writing I will just write it. There might be errors, there might be undocumented details but at least there will be something!

I have been working on some side projects while I work my day job and spend time with my family (so many kids)! I realized I don’t really write any of the things I am doing down, so I think it’s time to start sharing things I am doing.

While these articles will be available for everyone to read they really are for me so I can recreate things I have done, or be slightly consistent. Maybe they will be useful to someone else as well.

Was the passing of Steve that tragic?

Anyone who stumbles on this website, might look at my last post and think. Wow, he stopped writing when Steve Jobs passed away, he must have taken that seriously. Nope, sorry everyone, I just got busy with life. But I am back again!

Electronic memes for 2011-06-24

  • Hoping for the same forward thinking this morning that we saw in yesterday's keynote. #tcon11 #ualberta #yegit #
  • Keynote by Michael Argast from Telus. He is new, I hope Telus hasn't eaten his soul yet. 🙂 #tcon11 #ualberta #
  • Today's talk is highlighting why I felt the RIM talk yesterday felt dated. BB features aren't competitive any more. #tcon11 #ualberta #
  • Mobile antivirus may be a backward step but it is inevitable. There will always be a need as hacks will always exist. #tcon11 #
  • Hmm looks like the #tcon11 tag doesn't like me today. My tweets don't seem to be showing up. #ualberta #ualbertait #yegit #
  • Wonder how many faculty break IT policy? #tcon11 #
  • Social media crime hunt is the new age of Darwin! Let the criminals get themselves caught! #tcon11 #ualberta #yegit #
  • Great opening talk! I hope the next talks are just as excellent. 🙂 #tcon11 #
  • At @chrisj_moore talk about city of Edmonton IT. Interesting parallels to #ualberta IT planning needs. #tcon11 #
  • Design fail L2-190 unless you are 5 feet tall you are in the way of the projections in this room at the podium. #tcon11 #
  • Indexed and artificially intelligent open data center jointly developed between U of A and City of Edmonton. #suggestion #tcon11 #
  • At VPIT talk #tcon11 we do need a complete cultural change at #ualberta so that people accept new technology quickly and easily. #
  • Rate of technological change is so great that popular tech will change completely between 1st and 4th year in urgad study #tcon11 #ualberta #
  • Campus IT needs to collaborate with cell carriers so campus cell coverage is pervasive! All mobile tech needs to work! #tcon11 #ualberta #
  • VPIT: United we grow, divided we status quo. Nice. 🙂 #tcon11 #ualberta #ualbertait #
  • Absolutely! Can you get others to think too? RT @mcguiganj How to do more with less? It's easy.. think! #tcon11 #
  • Bad form Technocon, scheduling a tour during lunch, then when people return no food is left. Very bad! #tcon11 #ualberta #fail #
  • #tcon11 closing keynote. Fundamental difference. The government would be "collecting" your information. You "volunteer" it to Facebook. #

Electronic memes for 2011-06-23

  • Good breakfast at Technocon but dissappointed in swag bag inconsistency. #tcon11 #yegit #
  • Robin Winsor good opening keynote at #tcon11 a bit of a taste of TED talks of the past. #
  • Technocon talk by Robin Winsor gets better and better I wonder what he thinks of a massive joint open data initiative with #ualberta #tcon11 #
  • Robin Winsor talk about big data at #tcon11 has he been thinking about entirely virtualizing the cloud software and infrastructure #ualberta #
  • Ok sitting in "This too shall pass – and other change myths" at #tcon11 excited to hear what is said. Things never change right?! #sarcasm #
  • I decided to buck the trend and sit at the front in "this too shall pass" #tcon11 They are putting out paper and pens #interactive #ualberta #
  • "This too shall pass" This is going to be interesting. #changemgmt #tcon11 #ualberta very experienced speakers! #
  • "This too shall pass" so most places are about linear thinking just to get an answer. Breaking the rules might make things better! #tcon11 #
  • "This too shall pass" Ideas get dropped when communication breaks down and patterns are all that exist! #tcon11 #ualberta #
  • Ok just learned in "this too shall pass" that not everyone has a problem with change. Maybe it is just #ualberta fears change! #tcon11 Ooooh #
  • User management as a service UMaaS at #tcon11 this should be interesting Another example of IT becoming transparent! #ualberta #
  • Yes absolutely!! RT @jordanshodges When policy fails…. Try thinking. 🙂 #tcon11 #funny #
  • Groups can't afford to stay in the data center business. Progression to the cloud just makes sense. #tcon11 #ualberta #
  • Wow UMaaS with full workflow management really does implement on demand computing! #tcon11 #ualberta #
  • Whoa! Completely control end point computing access from within your HR application?! Amazing! #integrationwin #tcon11 #ualberta #
  • Definition of irony RIM guy talking about balancing needs of clients with RIMs current performance in the consumer market. #tcon11 #ualberta #
  • Dragons and laser beams to protect infrastructure?! I need to upgrade!!! #tcon11 #ualberta #
  • Nick Dawson RIM "mobility and smartphones are the present" will he talk Augmented Reality? #AR #tcon11 #ualberta #
  • Booyaa called it! I see Augmented Reality on his slide! #AR #tcon11 #ualberta #
  • Bandwidth providers better realize, yes you can charge for use but be realistic or you will fail in the face of competition. #tcon11 #wind #
  • "don't give away the keys to the kingdom????!!!!" wait what did RIM do in certain other countries recently when pushed? COME ON! #tcon11 #
  • Kudos for Nick Dawson handling the country privacy question. But what did RIM really say to them? I lack trust. #tcon11 #ualberta #
  • Good time at #tcon11 today. I hope tomorrow is as enlightening as today was. #ualberta #ualbertait #yegit #