Professional Development · Technology

Running A Web Dev Project Built for Mac on Windows

This post covers how to run a web development project (application) that was build for Mac OS on Windows. I will be using Windows Subsystem for Linux (WSL), which is a new feature added in Windows 10 that allows you to run Linux operating systems in a terminal from your Windows desktop.

Step 1: Install WSL: I used the URL here and followed the manual steps because I did not want to upgrade my OS and was already on Windows 10 19041.1083. Windows 10 19041 or higher is required for ARM64 systems. You can find your OS build under Settings -> About.

I then downloaded and installed Ubuntu 20.04 from the Microsoft store. I launched the Ubuntu terminal and setup my UNIX password and was good to go!

Step 2: Update Linux: The next you’ll want to do is update the Linux OS with the latest packages available using the command:

sudo apt-get update && sudo apt-get upgrade -y && sudo apt-get upgrade -y && sudo apt-get dist-upgrade -y && sudo apt-get autoremove -y`

Step 3: Install RVM: The project I was interested in uses Ruby on Rails as the backend, so my first step was to install a Ruby version manager. RVM was recommended and I installed it per here: http://rvm.io/

I actually found that gpg2 did not work for me to install the keys, so I used gpg. No problems.

Step 4: Download the Git package: The project I was interested in resides in a private repository on Github. I tried cloning from the Ubuntu terminal with the command git clone git@github.com:org/repo.git but I kept getting Permission denied (publickey). I looked at troubleshooting steps here but still couldn’t get SSH access even after adding a SSH key to my Github profile and having the repo owner verify the permissions of the group I was in. So my best option was to manually download the files from Github and move them to the Linux subsystem. That’s easy be C is automatically mounted in WSL to /mnt/C. I found it worthwhile to create a symbolic link to the working Windows folder for easy access with the command: ls -s /mnt/c/Users/username/ ~/winHome. Then I used the (recursive) copy command to copy the downloaded repository files from my Windows folder to a working folder on Ubuntu as so: cp -r /winHome/app /home.

Step 5: Install Ruby: Only needed if your project uses Ruby. I was prompted to run rvm install "ruby-2.5.7" the first time I navigated to the local application folder.

Step 6: Install Homebrew: Common package manager for Mac OS. I installed using the command here. https://brew.sh/ Be sure to run the additional steps listed at the end of the install output to add Homebrew to your PATH. Otherwise Ubuntu won’t find the brew command.

Step 7: Run brew bundle: The command bew bundle unbundles and installs all packages needed for the project.

Step 8: Run npm install: In the client folder of the project, run the command npm install to install all the client side dependencies.

Step 9: Add Remote Development Extension to Visual Studio Code: If you use Visual Studio Code like I do, you can install an extension to your Visual Studio Code Windows application that will allow you do develop directly with the Ubuntu files. You should be prompted to add Remote – WSL to VS Code the first time you open it after installing WSL.

Step 10: Add VS Code to Sudoers: In order to write to files from VS Code, you’ll need to add the application to list of sudoers (users with superuser permissions) in Ubuntu. The list of sudoers is maintained in /etc/sudoers so you’ll want to edit that file, with nano for example: sudo nano /etc/sudoers. Then you’ll add the VS Code path to the list of secure paths, e.g., secure_path="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/snap/bin:/mnt/c/Programs/Microsoft VS Code/bin"

From there development and running the application is just like you’re running it from Windows. Very cool!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s