Install Laravel Homestead on Windows Extremely Easily

Laravel Homestead

There are tons of reasons to do laravel development on Homestead.  And though you might be convinced to use it, it is not always very simple to be “up and running” within minutes. Laravel’s official documentation on installing Homestead on Windows and Mac is pretty clear. But sometimes, the process is not as straight forward as shown in the documentation.  There are a lot of 3rd party software involved and sometimes they create problems.  I will be guiding you through the installation and configuration of Laravel Homestead while preventing the common errors from occurring.


You may already know what Laravel Homestead is and what VirtualBox and Vagrant are. But just in case you don’t know then here is a brief introduction for them.


It is a software which helps you run a different Operating System on top of another Operating System. For example you have Windows installed on your machine and you want to use a Ubuntu on it as well. You can do it through VirtualBox. As the name Implies, it creates a Virtual Box or a Virtual Machine inside which you can install other operating systems. In this case, Windows will be your Host OS while Ubuntu will be your Guest OS.


Vagrant is a utility which help us automatically manage Virtual Machines inside Virtual Box. It also help us to ship our software to others or even to the production server with same environment in which we have coded it. Most of Php developers uses Windows or Mac to code on. The main problem with these OSs is that when we ship our software to a Linux environment, it breaks. Vagrant help us ship the software along the environment in an file format known as box e.g

Laravel Homestead

Homestead is a group of software and commands for Vagrant. The official list of what’s included in it can be found here. It automatizes and facilitates the installation of required software for a Virtual Server like Ubuntu, Nginx, MySQL etc.

In short, by combining VirtualBox, Vagrant and Laravel Homestead, one will be able to provide a production environment to Laravel inside Windows or Mac. So you can have all your favorite apps and software of your favorite OS along with the  benefit of having a full fledged production level server running Ubuntu and Nginx. Now follow the following steps to get Laravel Homestead up on Windows.

Step 1: Downloading Files

The first step is getting the required software for Homestead. I used VirtualBox and as it is free, I am pretty sure most of you guys will be using it too.  Download the VirtualBox from here for Windows (click on the link for windows in the first paragraph). After downloading that, we need to download Vagrant from here.  If you have slow internet connection, you will need to download the Laravel Homestead box manually. It is more than 1 Gb in size and on slow connections, the experience can really get very annoying. I will cover that when Installing the Homestead box Later.

Step 2: Install VirtualBox and Vagrant

VirtualBox comes with its own installer which makes installation of VirtualBox very easy but problems may arise. There are a lot of reasons but some common ones are:

  1. Virtualization might not be enabled on your system
  2. There can be driver conflicts
  3. Some other programs specially Kaspersky anti-virus might cause problem

Enabling virtualization will need its own tutorial. For Driver conflicts, your best bet will be do disable the USB driver in the second step of installation. Click the Box to the left of “VirtualBox USB Support” as shown in the figure below. It will disable installation of USB drivers. (USB drivers usually terminate the installation without any specific error)

Installing virtualbox for Laravel Homestead

For the rest of steps, just click “Next” and “Yes”. Make sure that the VirtualBox is installed in the default Program Files directory so that you do not have to configure Vagrant for the path to VirtualBox.

Installation of Vagrant is even more easy. Just double click the installer and proceed with the steps provided. The installation will go smoothly. After that, open the command line utility of windows by searching for cmd in the start menu. Then type the following command in CMD

If Vagrant is successfully installed then, it will display the version number of vagrant.

Step 3: Installing Vagrant Homestead Box

Homestead Box is the a compressed archive which contains all the required software for the Virtual Machine. I will mention two methods of downloading and installing the Homestead Box. The choice to choose one depends on your internet connection speed and reliability.

Fast internet Connection:

If your internet connection is fast enough and is reliable then download vagrant by the officially provided command. It will download the homestead directly. Run the following command  in CMD.

After running the above command, you will see Vagrant downloading the homestead box with estimated completion time.

Downloading Homestead Box
Downloading Homestead Box
Slow Connection

Downloading Homestead box manually on slow connection will save you a lot of annoyance. Vagrant disconnects frequently after downloading some part of the file and will start downloading from start every time. To get around this problem, follow the following instructions.

  1. Download the latest Homestead Box manually by  going to this URL:
    . Note the bold version number, you will have to change it to the latest version of Homestead. Current version of Homestead can be found here.
  2. The downloaded file is usually of different name which is “hc-download” most of the time.  Edit its name to
  3. Run the following command in CMD:
  4. If you have downloaded the to Windows default “Downloads” folder then your path will be like this “C:\Users\YourUserName\Downloads”. Note that you will have to replace the bold “YourUserName” to your own username. Also don’t forget to prepend “file:///” to your path.
  5. Now you need to add a metadata_url file to your box’s folder. You can download this file from here.
  6. Move the metadata_url file to C://Users/YourUserName/.vagrant.d/boxes/laravel-VAGRANTSLASH-homestead. In case you have configured a different directory for Vagrant’s storage then you will need to find the boxes directory there
  7. Inside the laravel-VAGRANTSLASH-homestead directory, rename the directory “0” to the current version which is currently 0.5.0

Step 5: Installing the Laravel Homestead

Up till now, we have downloaded Laravel Homestead Box which is a Ubuntu OS bundled with required software. The Laravel Homestead on other hand, is a bunch of shell commands and configuration. Homestead makes you enable to access your Laravel App inside a Virtual Machine from your Windows browser. It also help you automatically share folders between your Guest OS and Host OS.

Proceed by downloading the Laravel Homestead from its GitHub repository here. You will get a zip file, unzip it to “Homestead” directory. Create one if it don’t exist. It will be better if you create that directory in the your root folder so that you can access it easily.

After this, open the command line and navigate to the newly created Homestead directory by using the following command:

Replace the path in the above command with the path to the Homestead directory on your computer. Once inside that directory, run the following command:

This will create a file Homestead.yml in a hidden directory named .homestead . It can be found at C:/User/YourUserName/ . As this directory is hidden, so you need to edit the viewing preference of your Windows to show Hidden files and Directories. In the .homestead directory, open the Homestead.yml file. Preferably use your code editor to edit this file as Notepad will cumbersome the file.

Step 6: Configuring the Laravel Homestead

Rest of the configuration is easy. The homstead.yml is already configured for a default app. The rest of the details are pretty clear and easy to follow on the official Laravel Homestead page. I will mention those which are a bit troublesome to understand:

Authorize & Keys

These variables hold the path to ssh keys which are used by Vagrant to ssh into Guest OS. Its not available on windows by default. You will need to generate them and then place them in the path you have specified in Homestead.yaml . You can generate the ssh keys by using PUTTYgen. Complete this step before proceeding further.

Folder Mapping:

Folder mapping means that your Guest OS and Host OS will share a common folder where you can keep your laravel files. Laravel Homestead configures a  a default folder in the home directory of the Host OS.  But if you want to change it then just edit the “map” by providing the absolute path to your desired folder. The beauty of folder mapping is that one can edit the code using windows software like PhpStrom while executing the code inside the a virtual environment.


Sites is a configuration array for Nginx. By default configuration, you will have a “” pseudo-domain which will point to a folder inside the “shared folder”. Any php code inside that folder will get executed when you will go to inside your browser. You should set it to the “public” folder of your laravel app. Set it to “/home/vagrant/Code/Laravel/public” for now as we will be installing laravel in that way.

Step 6: Configuring the Host File of  Windows

Your configuration is nearly complete. Now you need to tell windows to look for a specific ip when you enter in the browser. Edit it as follow:

  • Go to C:\Windows\System32\drivers\etc\hosts
  • Open the hosts file with administrative access
  • Add the following line to it. You can add it anywhere but for ease, add it at the top of the file.
  • If you have problem saving the file, then first copy the Host file to desktop, edit it and then save it.
  • After saving move it to the above mentioned path and replace the original one
  • Be careful not to save it with any extension like txt etc

Step 7: Rise and Shine Homestead

Open CMD and navigate to Homestead directory. Its the directory where we unzipped the homestead archive from GitHub. Then run the following command.

You will have your Homestead running in no time. Now go to in your browser and be ready to get an error. Most probably “No input File Found”. It is because we don’t have laravel app’s “public” folder yet. We will install laravel in the next step.

Step 8: Install Laravel

This is the last step. If you have added the ssh keys in the proper place or have used PUTTY to create them for you then proceed as follow:

  • Enter the command “Vagrant ssh” while vagrant is up
  • It will connect you to the Ubuntu OS on virtual machine
  • Navigate to the shared folder by entering this command in the CMD
  • Then run the following command
  • It will install laravel in  the Code folder. You will see a Laravel folder inside it.
  • Make sure you have already edited the “Sites” configuration inside the homestead.yaml to  “/home/vagrant/Code/Laravel/public”

When the composer installs the laravel, then head over to in your browser and you should now see a fresh installation of laravel.

You may encounter errors and problems while following the above steps but everyone do. Homestead is very easy to install and configure and after a few minutes of playing around the problems, you will be able to fix it. Let me know in the comments, if I am missing anything in the article or if you are stuck with laravel homestead. I will be publishing more articles on homestead and will like to tailor them to the beginners problems.

404 Room: The Story Behind 404 Not Found

404 Not Found

Once upon a time in a far far land (Not that far, it was in Switzerland). When there was no internet and web meant a spider web. Some young scientists were coding something for their own use in  a Laboratory know as CERN. CERN is abbreviation for Conseil Européen pour la Recherche Nucléaire (French: European Laboratory for Particle Physics). Its located at Geneva, Switzerland. They were creating protocols by mean of which computers located in different rooms could communicate with each other.  While most of protocols and technologies they developed later became the building block of current web. But one of them got more attention that is “404 NOT FOUND” error. Even non-programmers get a pretty good idea that the content they were looking for does no exist, when they see this message.

404 was number of a room at CERN. It had a computer and two to three guys working there. The computer contained a database. Querying information from that database was just a request away. Any connected computer was able to send request to 404 room. The staff then used to search for those information and send them to the computer which requested them.

Eventually, the database grew up and they started to automatize the whole process. They created programs to search for the information automatically and serve that to the users. As time passed, the number of requests for information grew. And then the system started generating strange errors. Reason was that either the requested information did not existed or their request query for the database was misspelled.

To handle that problem, they edited the program to reply “Room 404: Not Found” whenever a given request could not be fulfilled. At that very time, they gave birth to the 404 Not Found Protocol. As web grew bigger and spread out of CERN to the whole world, the 404 Not Found Protocol was adopted as one of many standard protocols.  Though, it was renamed from “Room 404: Not Found”  to “404: Not Found”.

That was a short but interesting story about the Four-0-Four. Besides 404, there were other room numbers like 200, 302 etc which pretty much explain the wired numbering of now a days HTTP request codes. They also developed the Hyper Text Markup Language (HTML) which is the only language to give structure to the web pages. The idea behind HTML was to serve text and image in one file. And to link to other such files from that file.

The guys at CERN never knew that what they are doing is going to change the world and life of humans. Web in now multi-trillion dollars industry and is continuously progressing. All this would have not been possible if the young minds at CERN adopted themselves to classical system of data exchange in form of papers.

So do whatever you think you can do and who knows one day you might be known as father of some innovation besides your own kids.

jQuery Form Clone Plugin – Form Cloning in 6 easy steps

jquery form clone

For this tutorial, we will be using SheepIt jQuery Form Clone Plugin. We will create a form and will then add the necessary JavaScript. Here are the steps:

1. Adding jQuery Form Clone Plugin:

First of all download the sheepIt Form Clone Plugin from here . Include it in your HTML after including jQuery as follow.

After adding the plugin, we will create the form template.

2. Creating Form Template:

Form template consists of 3 main parts identified by id attribute. All these parts are wrapped inside a main div.

  1. Form Template
  2. No Form Template
  3. Form Controls

First of all create your <form> tag and add all those elements which need not to be cloned.

Now add a <div> inside that form tag. Remember, your form clone template needs to be inside the <form> tag else it will not get submitted.If the form element is wrapped in the template div then whole form will be cloned which can result in multiple form clones instead of single form with cloned elements. After creating the div, identify it by id=form_clone“.

3. Form Template

Form template will resides inside the form_clone (Our main wrapper div). It consist of a wrapper div identified by an id suffixed with _template which in our case will be form_clone_template. All the form elements which are required to be cloned will reside inside this div. After adding a single <input> tag and its <label>, your code will become like this.

On inspecting the above code, you can see multiple id’s inside the form_clone_template associated with different tags. These id’s are used by SheepIt jQuery Form Clone Plugin to index them. So that when we clone the form, the plugin will auto increment the index and will add them dynamically to the page. Let’s explain the id STUFF.

Index Format

#index# is the default index format of the plugin. When page is loaded, it will be replaced by 0 (zero) for the first row of input element and as we continue to add forms, it will get incremented and will be added anywhere where the index format is specified.


Looking at the first tag viz label, we have for attribute as “form_clone_#index#_websites”. If you look at the input tag, you will find that its id follow the same pattern. With index format (#index#) inside it, the label is made sure to work only for its own input field.

Inside the <label> tag you will see an empty <span> tag. This tag is intended to show the index number as the form is cloned. E.g in our case it will be URL 1, URL 2, URL 3 and so on…


Input field holds two important attributes. Id and Name. Id has already been explained. The name pattern is important. As the cloned input field will bear same name for all row, we need to submit the data to server as an array. For that array to work, we use name attribute like name=”someName[ ]” which in our case is name=”websites[#index#]”. Name of the input field followed by a square bracket will turn the field to be submitted as array. Index format inside the brackets will give a unique key to every array element and hence will prevent loss of data by input fields sharing same key. Data submitted by such input fields looks somewhat like this.

4. No Form Template:

This template is shown when there are no input fields. It can happen if the user deletes all the cloned form elements or if you ask the form clone plugin to not show any form on page load initially. It is wrapped inside a div bearing an id=”form_clone_noforms_template”. You can add any customized message inside it and can use normal HTML and CSS to decorate it. Add it after the form template.

5. Form Controls:

These are sets of controls which can be used to clone/delete any number of input fields. For Sake of simplicity, I’ll just explain 3 of them. Create a div wrapper for the controls. Give it an id=”form_clone_controls”.  Now add three tags of any type inside it. You can use either buttons or div or any other tag as long as it bears the required ids. Here is your complete form with form clone template.

Control ids are pretty self explanatory. Now as we have completed the form clone template, let’s power up the jQuery Form Clone Plugin.

6. Powering Up The Form Clone Plugin:

Just include the  following JavaScript code snippet to your page. You can add them after you include the required jQuery core file and SheepIt jQuery Form Clone Plugin.

That’s it. You can find a working DEMO HERE. Besides to avoid any error when cloning the form, follow these tips:

  1. Watch for ids very carefully as this jQuery form clone plugin is totally dependent on it
  2. Avoid mistakes in index format. e.g #index, #INDEX#, index etc are neither same nor gonna work unless you specify them.
  3. This form clone plugin clone the form after DOM has loaded. So any validation on the cloned input fields will not work unless specified after their creation.

This was just a quick and brief tutorial about sheepIt jQuery Form Clone plugin. More posts will be coming soon explaining the api and nested form techniques . So stay tuned. For any suggestion or comments please let me know by comments.

CSS3 Animated Text Field – Quick and Easy

Animating different parts of a webpage has nearly became a trend. Modern websites tend to be more responsive in sense of giving beautiful visual feedback. There are some Jquery based animated text field libraries out there, but doing it with CSS is more cooler. Specially when CSS3 offers more robust and powerful APIs.

I recently went through a CSS inspirational library of animated text field at codrops. This library is experimental but if you know that majority of your visitors are using modern web browsers, then you can rely on it. Making your text fields animated will make your next project even more eye catchy.Animated Text Field - Yoko

The Markup:

Html markup of the input field is simple. In order to make a simple text field animated, you will have to go through following modifications:

  1. Wrap your text field in <span> with class name of the desired CSS effect.
  2. Then add your <input> text field tag. Again with the a specific class name.
  3. After <input> add a <label> tag. Its is used for the animation of text field on focus.
  4. Inside the <label> add a <span> tag to decorate and position the label of the text field.

Now you are done with the HTML. A typical markup for the above GIF of YOKO animated text field will be as follow.

Be sure, that you will have to use the default HTML attributes for <input> and <label>. Like id and for.

The CSS:

There is not much to do with CSS. It is already well written with proper class names. All you have to do is to include the file in your HTML page. And then add the proper class names to <span>,<input>,<label> and again to the child <span>. Some GIF demos which I have captured are as follow along with the class names:

 1. Haruki

Animated Text Field - Haruki

  • <span>: input input–haruki
    • <input>: input__field input__field–haruki
    • <label>: input__label input__label–haruki
      • <span>: input__label-content input__label-content–haruki
2. Hoshi

Hoshi has following animation for text fields

Animated Text Field - HoshiJust replace haruki with hoshi at the end of all class names.

3. Kuro

Animated Text Field Kuro

Same as hoshi,replace with kuro

The best thing about these animated text fields is that you can easily implement them. They are easy to switch and are more dependent on CSS. Though if you are using some jQuery library like Live Search Plugins then there are chances that things can get messy.

Also, if you don’t have adequate space to accommodate the animated text field in width and height as coded by the developer then there is probability of poor readability and animations. So try to use them on roomy pages like Login Page.

You can download the library from GitHub. If you are interested in more technical details then you can read the article on the author website above. There are about 26 animated text field effects to choose from. So download the library, experiment with it, use it and let me know if it helps : )


Laravel Ajax 500 Internal Server error – 5+ Reasons – Quick Fix

Recently I started working on project using Laravel. I kinda started loving it. The first problem I encountered was with AJAX. I was submitting a form using Ajax. When the form was submitted, the console was logged with 500 Internal Server Error. I dig the problem.I searched the Google for few hours and then I found the solution. Following are the reasons:

Laravel ajax 500 internal server error

500 internal Server Error from Zurb


The  commonest reason for laravel ajax 500 internal server error is missing CSRF token. Specially in Laravel 5. In laravel 5, CSRF token is required on all forms. People usually forget submitting the token with ajax request. Submitting token-less ajax request results in Internal Server Error.

To fix missing CSRF token,  just add a hidden field in the form and BOOM!! .Here is the code for you to add to your form:

1. For Blade Template Users:

2. For non Blade Users:

3. Directly as ajax data:

That’s it, it will solve your problem most of the time. Other reasons that can give you Laravel 500 Internal Server Error problem might be:

Wrong Route:

You may be submitting ajax data to wrong route type and even wrong url (404). So first double check the path you are submitting to. Second, check whether the route accepts “Post” or “Get” data type. Because submitting post data via Get method or vice versa will results in Laravel ajax giving 500 Internal Server Error.

Data Type Returned:

If you are returning Boolean and your ajax code is set for Json or any other data type then chances are that you will stumble up on the internal server error. Try to set data type for all ajax response to json. If you are using jQuery then set dataType to xml, json, script, or html like this:

Cross Domain Configuration:

If you are using ajax for cross domain requests then be sure that you are sending proper headers. In case of jQuery, just set the crossDomain variable to true.Alternatively set dataType to “jsonp”


To be honest, .htaccess contributes to 80% of the web’s 500 internal server errors. Regardless of laravel and ajax. Check your .htaccess file for any error specially after you have edited it.

Syntax Error

If your php file has some error and your hosting provider has configured there servers to give 500 internal server error on all php errors. Then examine your file line by line and find the little bug troubling you.

Directory Permission

In case if the storage directory is not writable by Laravel then it will throw a 500 internal server error. Though this error will occur on all requests to the framework regardless of whether it’s through ajax or not. To fix that, run the following two commands through the command line tool on Ubuntu:

The “laravel” in the above command is the name of the directory where Laravel is installed. For other Linux distros, search for the commands to change the permissions of a directory to make it writable.

The most important thing in fixing your error is to find the cause. If your ajax request gives you 500 internal server error then log the response to console. Alternatively, you can submit a regular form and can see the response of the files. Laravel has good error handling library and it show in details the causative agent.

If your Laravel ajax internal server error still persists, then please let me know in the comments. I will be more than happy to help

Dress Color Mystery Finally Resolved

So I have been saying that the dress is gold and blue like very few people and no one was believing. Well, eyes can be deceived but when it comes to Photoshop then i don’t think computers are color blind. I will prove that the dress is gold and blue in following steps:

1. First pick the colors from the dress in Photoshop or using any color picker tool.

I added the picture of the dress to Photoshop and first picked the color from the blue area aka white.dress-color-is-blue

If you look at the bottom of the color panel in the photo, u will see a hex code of the color. its #8693c0Now let’s get to the gold area which people think as black.


Now check the color is the second screenshot, showing a brownish color with a hex code of #7e6e4a. Visually, from screenshots, its proved that the dress is gold and blue now let’s prove it mathematically.

2. Comparing the color codes with that of black and white.

So you still think the dress is black and blue or gold and white. Let’s compare the color codes:

1. Color Code for black is #000000

When u want to give black color to anything in computer, your software uses the code #000000. Now if the dress was of black color then Photoshop would have given me black color code which is #000000 but it gives me brownish gold which is #7e6e4a 

2. Color Code for White is #ffffff

As said above, when u want to color something white, your software will use the color code #ffffff like this #ffffff. But using the color picker on the so called white area gave me the color code #8693c0 . This is definitely bluish or lavender Like, for your sake of convenience,  I have applied the color codes to themselves. Hence proved that majority of world needs some special glasses, specially guys like waheed sohail, iftikhar shinwari and asim ali 😀 Don’t worry no one knows them so don’t bother. Happy commenting 🙂


What is the real color of the dress that broke the internet?


The mystery is finally resolved. Click here to know


Tonight, I was setting with some idiotic friends (no offence to Waheed Sohail :P) and he showed me a dress and asked for its color. The dress probably looks Gold and blue but majority says that its either gold and white or blue and black. Well after doing some research, I found that its the angle of your screen which gives You a different color. Not sure about this? Here is the picture:

1425008415925855Now just tilt your screen and You will see the different type of color which your friends are reporting.

Taking the advantage of this, some people gave lame scientific explanations for this while other said that it is a new type of color blindness. Interesting fact is that this is just a normal dress wearing a price tag of $77 and there is nothing special in it. Its just a bad photography and the excitement of peoples which led to its virility.   Let me know if tilting the screen give u some strange color like green and orange 😀