Setting Up a Webdev Environment on Windows

29 Jul 2015

Developing on OSX is a dream. I love my Macbook and I love developing on it. However, I’ve always been a PC enthusiast and most of my time is spent on my desktop computer. I stick with Windows as my main operating system when I’m not developing because Linux offers a subpar gaming experience, and my entire music library resides on iTunes, which is not supported on Linux. I have happily turned this computer into a Hackintosh before for a few months when I started out web development, but rather than dual-boot into Linux/OSX, I decided to give virtualization a try.

Why use VMs?

Simply put, my Windows machine completely outclasses my Macbook. The screen real estate and dedicated mouse/keyboard really speeds up my development. Futhermore, as a formal avid gamer, I’ve grown very accustomed to Windows and I just prefer to use it as my main OS. Dual booting is a completely viable option, save for the fact that I would have to boot back into Windows to play a game or listen to my music. I already have OSX on my Macbook in case I want to have a dedicated environment, so spinning up a VM seems to be a great choice for my development needs.

Vagrant and Virtualbox

Vagrant and VirtualBox are AMAZING. Everyone claims it takes minutes to set up an environment and get started right away with development. It took me about 2 hours because I had no idea what I was doing and couldn’t find a clear guide to set everything up. Plus a virtual environment has some slight kinks to work out versus using a dedicated OS.

Getting started is pretty simple. You’ll need to install Vagrant, VirtualBox, and I personally prefer to use MTPuTTY to SSH into my virtual machine. MTPuTTY is a GUI for PuTTY that allows for multiple tabs and automated login. Once you have everything installed, a whole list of Vagrant boxes can be found here. I decided to install the ubuntu/trusty64 box: vagrant init ubuntu/trusty64; vagrant up --provider virtualbox

vagrant init

Here you can see my server running in VirtualBox. virtualbox

Your server should now be running! To shut down your server, you can run “vagrant halt” in PowerShell/cmd, and “vagrant up” to run it again. You can SSH into your virtual box using PuTTY with hostname 127.0.0.1 and port 2222. Username/password is vagrant/vagrant. putty

Perfect! We’re now in our environment: shell

It was really that easy. We now have a clean environment to work in. There’s a few hurdles I had to go through to get my environment functioning exactly the way I want to. First I wanted to set up a shared folder. Simply go to the folder you ran “vagrant init” in and open up Vagrantfile. Uncomment and alter this line to: config.vm.synced_folder "shared", "/home/vagrant/shared"

Now if you create a folder named “shared” you will now have shared access between your host and guest machines. That way whatever projects you’re working on can be opened locally using Sublime/Atom on your Windows machine can be worked on directly in that folder. You can then use PuTTY to run commands in your VirtualBox environment. Next, to test your application you’d need to forward some ports. In my Vagrantfile again, uncomment and alter this line to: config.vm.network "forwarded_port", guest: 3000, host: 3000

This way port 3000 on your guest machine will be forwarded to port 3000 on your host machine and you can locally use your web browser to access your application on that URL. Perfect! Next, configuring the VM to work properly with git. Simply follow the instructions on this article to set up SSH keys. Afterwards, add this to your ~/.profile (Ubuntu uses this instead of bash_profile) to only log in once per box startup. You can look up SSH forwarding if you wish to bypass this and automatically log in. eval `keychain --eval id_rsa`

keychain

Now you only have to log in once per startup. Not bad. Now your dev environment is all set up. Just one more note with npm and Vagrant. By default symlinks are disabled to avoid creating symlinks across your VM into your host computer. You can choose to look up enabling symlinks on Vagrant because npm install will give you an error. npm install error

Alternatively you can run “npm install –no-bin-links” and your packages will install properly. So far I don’t have any problems since I’ve set this up yesterday with my current project using nodejs. I’ll update this blog post or make another one if I come across any other problems running this VM.

Continue Reading →

Deep Dream

09 Jul 2015

Can robots dream? According to Google, they can. Trippy “deep dream” images like this are recently being posted all over the internet.

Continue Reading →

Visual Data of a Relationship Over a Year

20 May 2015

Dan and I were discussing about how we should create a webapp that tells you who is the better boyfriend/girlfriend in a relationship. This reminded me of a reddit post by /u/Prometheus09. Inspired by what he did with his Whatsapp data, I decided to do the same thing using my Skype logs.

Continue Reading →

Playing With Friends on Agar.io

14 May 2015

Agar.io right now is one of the most popular browser games. You start off as a small blob, eating pieces smaller than you to grow, allowing you to eat other players who have a smaller mass than you. My classmates and I have been playing this game from time to time, however it was pretty difficult to play on the same server. Agar.io allows you to connect to a server in the same region, but you cannot specify which server and you’ll get thrown into a random room. This is incredibly frustrating when you’re trying to play with friends and you have to try over and over again to join the same room as your friends.

Continue Reading →

Broadcasting with Faye

27 Apr 2015

My partner and I are working on an application that allows people to collaborate in real time on an online music playlist. To achieve this goal, we utilized WebSockets to broadcast our changes across multiple browsers. WebSockets makes communication possible between users’ browsers and a server. This allows us to make changes on a host playlist and update other clients with new changes. The Ruby gem Faye is a publish-subscribe messaging system that enables clients to send information in real time, such as chat messages. This is how we accomplished the chatbox and playlist updates using Faye.

Continue Reading →

Page 2 of 4

Author

Brian Choy

Brian Choy

GitHub
LinkedIn
Google Plus