Install Gulp on Windows and Laravel Homestead

I know that Windows machine is not ideal for web development, but I often use one. As I am always learning new stuff, I decided to test drive Homestead the other day. Everything went fine until I had to install Gulp on the Windows machine.

I spent hour trying to find the proper solution and am presenting a solution that worked for me and how I managed to install Gulp on Windows in a step by step form below.

I am also including the steps for installing the Homestead, too, as I also have some tips that many people on Windows will appreciate.

Installing and configuring Homestead

Before continuing with Homestead installation, you have to install VirtualBox and Vagrant, so go ahead and install those if you don’t have it installed. Be sure to restart when asked, so that the proper environment variables can be set.

Laravel Homestead is an official, pre-packaged Vagrant box that provides you a wonderful development environment without requiring you to install PHP, a web server, and any other server software on your local machine. Of course, it isn’t meant to be used for Laravel framework only.

Before we go any further, I suggest a great shell for Windows called Cmder, and suggest that you download it and install it.

Now, please follow the steps in Laravel Homestead site, so I don’t repeat them here.

I will show you my Homestead.yaml file here and explain some important parts:

[code lang=”php”]
ip: "192.168.10.10"
memory: 2048
cpus: 1

authorize: /Users/Dell XPS 15/.ssh/id_rsa.pub

keys:
– /Users/Dell XPS 15/.ssh/id_rsa

folders:
– map: /code
to: /home/vagrant/code

sites:
– map: homestead.app
to: /home/vagrant/code/homestead/public

variables:
– key: APP_ENV
value: local
[/code]

As you can see, IP in VM is set to 192.168.10.10, so we need to match that in VirtualBox (on Windows it is set to 192.168.10.1 in VirtualBox, which can raise problems). So, pen up VirtualBox and go to File — Preferences — Network — Host-Only Networks and edit your adapter to IPv4 address of 192.168.10.10.

Furthermore, I had problems with using backslashes in Homestead.yaml file, so use forward slashes instead in your paths.

Now, open up your console and run vagrant up. And read all of the docs in Laravel Homestead site.

If you are getting timeouts when VM is starting, you probably have to enable the virtualization in your BIOS, so consult your computer manufacturer site on how to do that.

Now, open C:\Windows\System32\drivers\etc\hosts as an Administrator and add this line on bottom:

[code lang=”php”]
127.0.0.1 homestead.app
[/code]

Save the file and close. Now, if you add any index.php file to your /code/homestead/public with anything in it, you can test if everything works by pointing your browser to http://homestead.app:8000

Prerequisites to installing Gulp

Ok, some important things need to be done before installing Gulp:

1. Set up VirtualBox.exe and VBoxManage.exe to be Run as Administrator (right click on the file, Compatibility tab, Run as Administrator checked, Apply) !!!
2. Set up your console app (cmder or whatever you use) to always Run as Administrator !!!
3. Set up NODE_PATH user environment variable to %AppData%\npm\node_modules

Installing Gulp

I presume you have node installed, if not, install it.

Open up your console application and run (on your local machine, NOT INSIDE VIRTUAL MACHINE!!!):

[code lang=”javascript”]
npm install -g gulp
[/code]

This will install Gulp.js globally on your system. It will enable you to run the gulp command in your command prompt. Try to run gulp and you should see something like no gulpfile found.

First, create a package.json file in root of your project and add an empty object in it like this:

[code lang=”javascript”]
{

}
[/code]

Awesome. Now navigate to your project folder and run (again on your local machine!):

[code lang=”javascript”]
npm install gulp gulp-sass gulp-autoprefixer –save-dev
[/code]

This will install gulp locally and pull all the dependencies.

And that’s it. You should of course create a gulpfile.js and do something, but you are now ready to use Gulp on Windows inside Homestead successfully.