PHP for Beginners Part 1
CourseIntroduction to Vagrant
CourseWhy Vagrant?
FreeVirtualization allows multiple operating systems to simultaneously share processor resources in a safe and efficient manner. One tool we can use to create a virtual environment is Vagrant. By the end of this video, you will be able to describe the advantages, and disadvantages for creating a local development environment with Vagrant, and you should be able to answer the following questions:
- Do you want to proceed with Vagrant?
- Does it sound like it will solve your problems? [yes | no]
- Do you have the necessary hardware to proceed with the lessons? Or should you stick with WAMP/MAMP?
Note: Another common tool for creating development environments today is Docker, which is becoming very popular with Drupal (and other) developers. Take a look at our Drupal Development with Docker series to learn more.
Additional resources
Note: This video is outdated. The following command:
$ vagrant init precise32 http://files.vagrantup.com/precise32.box
...now has download problems if you try it. Try this instead:
$ vagrant init hashicorp/precise64
(The written instructions below contain this update.)
Before we jump into the automation of creating a new developer environment, we need to get the building blocks we'll be working with. You will need to download and install both Vagrant and VirtualBox.
Lesson Outcomes
By the end of this lesson, you will be able to install Vagrant and VirtualBox on a host platform of OSX, or Windows; and create and destroy a Vagrant instance.
Lesson Summary
- Install VirtualBox
- Install Vagrant
- Create a new directory for your configuration scripts. e.g. Websites, or Work-environments. This folder will not contain the VirtualBox binary files, just the Vagrant configuration scripts.
- From the command line, run the following commands:
$ vagrant init hashicorp/precise64
$ vagrant up
$ vagrant ssh
Note: this command will not work for Windows. You will need to use PuTTY to log into your machine. This is covered in the bonus lesson.
- To return to your host machine, run the command:
$ exit
- To destroy the VM and remove the binary disk image:
$ vagrant destroy
This command must be run from the directory which contains the Vagrantfile for the box you wish to destroy. It will not remove any of your configuration files. To recreate the machine, use the commands in step 4.
Troubleshooting and Gotchas
- The lessons were recorded using Vagrant 1.4.3, and VirtualBox 4.3.6.
- There are some gotchas to be aware of: Linux and Windows may need a reboot because of the kernel drivers being added.
- Sometimes upgrades don't work, and re-installing is your best bet. If you have automatic software updates turned on, and Vagrant stops working for you without an obvious reason, try removing everything and re-install using the instructions in this lesson. Removing Vagrant and VirtualBox are covered in one of the extra lessons.
Additional resources
VirtualBox Downloads
Vagrant Downloads
Note: another common tool for creating development environments today is Docker, which is becoming very popular with Drupal (and other) developers. Take a look at our Drupal Development with Docker series to learn more.
In this lesson you will learn how to install a Web server on your virtual machine. Ultimately we will use a provisioning script to automate this task, but this lesson shows you the virtual machine is just like any other server you might have worked with in the past. Any time you want to add new software, you can always come back to this lesson if you (for some reason) don't want to create a recipe and re-provision your machine. Hopefully, though, by the end of this series you'll see why provisioning is a more robust solution than installing software directly.
Lesson Outcomes
By the end of this lesson, you will be able to log into your virtual machine, and use the command line to install new software.
Lesson Summary
- Navigate to www.vagrantbox.es.
- Locate a base box you would like to use. Ensure you are matching the "provider" to what you have. e.g. VirtualBox for these lessons (not VMware).
- At the command lines, initialize your new server:
$ vagrant init <box name> <box URL>
- box name: ringtail64
- box URL (mind the line wrap): http://cloud-images.ubuntu.com/vagrant/precise/current/precise-server-cloudimg-amd64-vagrant-disk1.box
$ vagrant up
Ensure your server is up and running, and then log in with the command: vagrant ssh. This command must be issued from within the directory which contains the file Vagrantfile.
Install an AMP server using the directions for your base box. We'll use the same technique as is covered in the lesson Installing a Web Server on Ubuntu.
$ sudo apt-get install tasksel
$ sudo tasksel install lamp-server
This will install Apache, MySQL, and PHP.
To confirm the server is running, use the command: pstree
.
Troubleshooting and Gotchas
- OSX can use vagrant ssh; Windows will need to install PuTTY and use ssh vagrant. Using PuTTY is covered in the bonus lesson for this series.
- If you get the error
tasksel: aptitude failed (100)
, run the following commands:$ sudo apt-get update
$ sudo tasksel install lamp-server
(I got this error on a precise32 base box with a Windows 8 host running inside of Parallels on a Mac OSX machine.)
In order to "find" our virtual server in a Web browser, we need to make a map between the two host machine, and your guest server. To do this we will use a technique referred to as port forwarding. This allows any communication from the host machine (your Web browser) to be automatically redirected to the appropriate location on your guest machine (the Web server). Fortunately this is very simple to do. In this lesson we are going to map port 4567 traffic on the host machine, onto the standard Web port, 80, on the server. This means when you access Web traffic at http://localhost:4567, it will be automatically redirected to Apache on your server. It's almost like a sleight of hand magic trick where a rabbit appears in a hat, but way cooler.
Lesson Outcomes
By the end of this lesson you will be able to correctly configure your server's network settings so that Web pages can be viewed in a browser on your host machine.
Lesson Summary
- Edit your Vagrantfile (Vagrant configuration file to set the following properties:
- Configure port forwarding
config.vm.network "forwarded_port", guest: 80, host: 4567
- Reload the vagrant instance.
$ vagrant reload
- Log into the server, confirm Apache is running. (Hint: it's not running.)
$ curl 'http://localhost:80'
- Start Apache.
$ /etc/init.d/apache2 start
- In a Web browser, navigate to:
http://127.0.0.1:4567
(Hopefully) It works!
Gotchas
This can sometimes be the tricky bit, especially if you already have a lot of custom network configuration. If this lesson doesn't work for you, you will need to do an audit of your system to find any software which might be interfering with the connection. We're going to limit ourselves to one VM running at a time (all the same ports). This is mostly because of the hardware limitations I expect you'll have. If your machine is more powerful, great! But we're not covering it in this video series.
Typically when we work with a Web server, we edit our files locally, and then "push" them up to our Web server (perhaps using SCP, rsync, Git push, or maybe even FTP). The same will be true with our Vagrant server: you need a way to get files from your host machine, to the guest server. You could either use SCP, but we will enable file sharing to make life a lot easier. With file sharing enabled you will be able to drap-and-drop files into specific directories within your Vagrant instance using your local file manager (e.g. Finder or Windows Explorer). The files will be immediately shared, and recognized by your server, allowing you to continue working on the files with your favorite IDEs and code editing tools without the upload step. Technically, enabling file sharing isn't necessary, but I think you'll agree it is a lot more convenient than SCPing files to your guest server.
Lesson Outcomes
By the end of this lesson you will be able to share files between your host and guest machines without the use of SCP. After enabling file sharing, you should be able to copy a file into the shared folder in your Vagrantfile and have it automatically appear inside the Vagrant instance. e.g. you can load a static web page created on your local machine without having to use SCP.
Lesson Summary
As long as you're using basic file sharing (no NFS), it should work "out of the box" for Windows 8, and OSX.
- Configure synced folder in Vagrantfile.
- Locate and remove:
# config.vm.synced_folder "../data", "/vagrant_data"
- In its place, add:
config.vm.synced_folder "docroot", "/var/www"
- Create a new directory using the name identified in the file Vagrantfile.
$ mkdir docroot
- Reload the vagrant instance (and restart the server). The contents of
/var/www
will appear indocroot
.
$ vagrant reload
$ vagrant ssh
$ sudo /etc/init.d/apache start
$ exit
- Edit the Web page from the host machine.
- Refresh the browser to see the changed file.
Gotchas
This lesson was recorded using VirtualBox 4.3.6 and Vagrant 1.4.3. There is a known issue for file sharing with VirtualBox 4.3.10. If you get the following error message: "Failed to mount folders in Linux guest. This is usually because the "vboxsf" file system is not available." you have encountered this bug. Consider downgrading VirtualBox to 4.3.8, or follow the troubleshooting tips in the issue queue for your particular host machine.
If you are having problems with file permissions / ownership, try editing the permisisons from the host machine, not the guest machine. This is most noticeable when you are creating a new Drupal instance and there are folders / files created automatically by the system. Vagrant won't give a warning to explain why it won't change permissions, it simply doesn't show any changes after running chommands such as: chmod +w <directory_name>
.
If you are still having problems with silent file permissions, update your Vagrantfile as follows:
- Locate the setting for
config.vm.synced_folder
- Add a server-friendly owner, by adding the following to the end:
, :owner => "www-data"
- Add a server-friendly group, by adding the following to the end:
, :group => "www-data"
If you're STILL having problems, update your Vagrantfile to give more permissive defaults.
- Locate the setting for
config.vm.synced_folder
and add the following to the end:, :mount_options => ['dmode=775', 'fmode=664']
- The final line should be something like this (all one line):
config.vm.synced_folder "docroot", "/var/www", :owner => "www-data", :group => "www-data", :mount_options => ['dmode=775', 'fmode=664']
Configuring new servers by hand is tedious and prone to error. Instead of running all the installationa commands by hand to customize our Vagrant setup, we'll use a configuration management (CM) tool to automate this process for us. CM allows system administrators to establish rules which maintain the software installed on one or many computer systems. By automating the setup of a server, configuration management ensures there are no inconsistencies between machines. It also makes it faster for your to create a virtual environment without having to manually install a Web server, like we did in a previous lesson.
Lesson Outcomes
By the end of this lesson, you will be able to explain how configuration management relates to virtual machines, and why you would want to use a configuration management tool to provision new virtual machines.
Lesson Summary
- Vagrant is a wrapper which creates virtual development environments from base boxes. It acts as a wrapper around a provider, such as VirtualBox, and configuration management software, such as Chef.
- Configuration Management: Configuration management is a process which allows system administrators to establish and maintain consistency of a computer system throughout its life against a specified set of rules. Configuration management enables consistency across one, or many, machines.
- Popular open source configuration management tools supported by Vagrant include: Puppet, Chef, and Ansible. Chef tends to be popular among Drupal developers. Puppet tends to be popular among system administrators (who are not necessarily Web developers first-and-foremost).
- Provisioning is the process of creating, or altering, a system in order to prepare it for service.
- Vagrant allows you to use one or more configuration management tools from the same Vagrantfile to provision a machine; as well as use shell scripts.
Additional resources
In this lesson we're going to do a quick comparison between the two most popular CSS preprocessors in use today, Sass ad LESS. We'll look at the similarities between these two, as well as the main differences.
This video covers some handy tips for reusing previously run commands and moving around through a line of text in the command line interface. These shortcuts make working on the command line much faster and nicer. Trying to remember all of these is not easy to do until you've used them for a while, so we also have a handy-dandy cheat sheet which you can find in the Downloads tab and refer to whenever you are in command line ninja mode. There are always new shortcuts you can learn. Another great shortcut !$.
. It's similar to !!
, but instead of repeating the last command, it repeats the last argument given. This sequence of commands shows how the shortcut could be used: mkdir sites/default/files
followed by chmod a+w !$
. That would be the same as typing out chmod a+w sites/default/files
Note: this video was originally released July 9, 2010 on Lullabot.com.
Note: In some places the command line prompt is cut-off. The YouTube version of this video doesn't have the cut-off problem. We are working on getting this fixed, but in the meantime, check out the YouTube version instead.
Command Line Basics 12: Handy Command Line Shortcuts (youtube.com)
Use jQuery selectors to locate and select elements on the page. jQuery selectors operate much like CSS3 seletors. Start out simple by selecting elements by tag, DOM id, or class name. Then get more advanced and select form elements based on their current state, and complex n-th child selectors. Additional notes: As a result of Drupal 7 using jQuery in no conflict mode, the jQuery object is not automatically assigned to the global $ symbol. The easiest way to get around this in Firebug or Webkit Inspector is to just use jQuery('element'); or do $ = jQuery; and then use the $ as per usual. If you take a look at the JS files in Drupal 7 you'll see that they almost all use an anonymous closure in order to assign the $ variable. Something like the following. (function ($) { // Add your code here and use $ as per usual. })(jQuery);
First look at basic fundamentals of jQuery's syntax and usage. Learn about using the $ function, jQuery selectors for finding elements on the page, creating new DOM elements, and browser detection. In addition to selecting elements on the page we'll introduce the basics of jQuery effects and events. Note: In D7 developers are encouraged to add a jQuery wrapper around JavaScript. (function ($) { // Original JavaScript code. })(jQuery);
When using Firebug console you need to use jQuery instead of $. >>> jQuery('.title')
Drupal 7 uses jQuery in no-conflict mode meaning you need to wrap your code in an anonymous function and pass the jQuery object into the function. This is a pretty common practice now days and is actually a better way to write jQuery in general rather than always assuming that jQuery is the $ symbol. But, it means in the console you need to use either jQuery('selector) or $ = jQuery;
In this tutorial we'll take a look at creating branches with the git branch
command, and tags with the git tag
command and explain the differences. Then we'll look at how and when they can be used and how to move changes from one branch to another using the git merge
and git rebase
commands and talk about the different ways in which those two commands effect the history of a project.
Sass partials are a way to break out your Sass code into multiple files, and then import them to be compiled into one master CSS file. This feature helps you organize your Sass code the way that makes the most sense for you while working.
When you install Compass from the command line, or with certain apps, it comes with a special file names "config.rb" which is where Compass stores the various ways you can configure it to work with your project. Not all apps will create this file for you however, and it is a good thing to create and understand. In this lesson, we'll take a look at this file and explain the most common configuration options.
Additional resources
When you install Compass, in addition to a large mixin and function library, you are also installing a command line application. The commands that Compass provides make it easy to do common tasks, very quickly from the command line — things like creating a new project, and compiling your Sass into regualr CSS. Even if you are not familiar with the command line, these are very simple to use.
Additional resources
Sass is our base tool, and Compass is almost always used with Sass. Compass provides some great tools for us, but there are a few more resources out there that are worth knowing about and taking a look at. In this lesson we'll take a quick tour of some grid frameworks designed to work with Sass, as well as another popular mixin library.
Additional resources
In this lesson we take a tour of some other tools for working with Sass and Compass. We look at some sites with good information or helpful tools to use, and a few different apps that are made to make your workflow better. We can't cover everything out there, but these are tools that we've used ourselves, or are generally popular right now. There will always be more cool things coming out to help you be more efficient when working with Sass and Compass, but these should get you looking in the right direction.
Additional resources
In this lesson we take a look at compass mixins. We concentrate on a single mixin in the Typography category to show how a compass mixin can save lots of time and make your sass file much cleaner. We will take a look at how to create a horizontal list with a single include that handles all the necessary floats, paddings, margins, and everything we normally write in CSS but is now just a mixin away.