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.
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 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.
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.
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.