Menu

Incorporating Anvil for Mac into your workflow

February 11th, 2014

As a front end developer it seems like we are always trying to find new ways to improve and automate our local workflow. I am sure that you probably use a CSS pre-processor like Sass or Less and may even run a task manager/runner like Grunt or Gulp. These things help our workflow in a way that allows us to be quicker and more efficient so we can focus on the fun stuff like writing code.

One part of my local workflow that wasn’t very seamless was testing the sites I developed in Internet Explorer via a virtual machine as well as my iPhone and iPad. I used to almost always post my files to a server so that I could view and make my tweaks in those browsers. Needless to say, that wasn’t very efficient. Here is where Anvil for Mac comes into play and really helped streamline that part of my workflow along with bringing other benefits to it.

What is Anvil

According to the website, Anvil is a way to “Serve up static sites and Rack apps with simple URLs and zero configuration.“, and that is exactly what it does. Put simply, when using anvil you can access your local project at a nice .dev domain from any browser on your machine. Since you control the name of the project it makes it nice to have a domain like project.dev that you can easily pull up in a browser. It also gives you a domain that you can use by other devices connected to your local network.

Installing & Setting Up Anvil

Installing and setting up Anvil couldn’t be any easier. Watch the video below and/or follow the steps below to download, install, and setup Anvil for Mac.

Video Walkthrough

Install

  1. Download the app from the app’s dedicated site
  2. Find the [highlight color=”blue”].zip[/highlight] file that you just downloaded and double click it to unzip it.
  3. Drag the app icon that you just unzipped into your Applications folder.

Setup

  1. Launch the newly installed Anvil app.
  2. Click on the anvil icon in your menu bar and click Instal Pow.
    This will open up a new terminal window and populate a script to download and install Pow. You will be asked to enter your password in order to complete the installation.
  3. Now that Pow is installed you are ready to start Anvil. Click on the anvil icon in your menu bar and toggle the on/off switch to turn Anvil on. Again, you will be prompted for your password.

Using Anvil with Your Project

Using this little app with your project couldn’t be easier now that you have Anvil installed and setup. All you need to do to use Anvil with your project is to find the folder that contains all of your project files (the folder that contains your [highlight color=”blue”]index[/highlight] page) and drag it up to the anvil icon in your menu bar. This will add the project to Anvil and assign a .dev domain name that you can now pull up your project from any browser on your computer by going to project-name.dev. You may need to enter http:// in front of the domain depending on your browser since .dev is not a recognized TLD.

Testing on iPhone, iPad, & Virtual Machines

In my opinion where Anvil really shines, and makes my life easier, is testing projects on mobile devices and the virtual machine I use to run Internet Explorer. Along with a .dev domain that you can use on your computer, Anvil also sets up a network domain that you can use on any device connected to the same network. This means that you can easily pull up your project on your iPhone or iPad without having to upload files to a server in order to test your project.

Although the network domain is not as easy to remember as the .dev it becomes very easy to remember once you have used the app on a few projects. The network domain follows this naming scheme [project-name].[computer-network-ip].xip.io. In use that might look like myproject.10.0.0.1.xip.io.

It is because of this network domain that I use Anvil for Mac and it will easily make your browser, device, and responsive testing much much easier.