Fast local webdevelopment environment in macOS with docker+devilbox on virtualized Ubuntu OS

After some years with MAMP I’ve decided to switch to docker due to its flexibility and ability to become fully isolated from my macOS system. MAMP did the job but relied heavily on your resources and didn’t allow, for instance, to use different database versions for different projects; even worse, it would mandatorily update your databases to the latest version provided by MAMP, raising the risks of breaking things up.

Docker, on the other hand, allowed me to have completely independent projects, each with its version on php, sql or whatever web technology you wanted.

Then I found devilbox, which greatly speeds up the initial setup process (i.e. choosing php and database versions, providing ready to use admin tools such as phpMyAdmin, email logging capabilities, etc.).

Problem is, docker is natively Linux (on Mac it runs on its own virtualized Linux environment). And while great progresses have been made in docker for Mac, it was painfully slow: web pages just took too long to render due to files I/O operations (docker readings and writings to your website files located on you macOS filesystem). Even following some configuration recommendations, like enabling caches and even putting a side process called docker-sync to work, it just felt slow.

After some trial and errors I’ve come up with a solution that while not perfect, works good for me - allows me to keep my existing development workflow and tools of choice in macOS while taking full advantage of docker features and speed in Linux.

In summary:

  • you run macOS as main (host) OS with all your webdevelopment tools of choice (I can’t go without BBEdit);

  • you run Linux (I’m using Ubuntu Desktop 18.04 LTR) as a virtual (guest) OS using a dedicated virtualization software (I’m using VMWare Fusion 11) and there you install docker, configure devilbox, and host your website files, folders and databases;

  • on your guest OS, you install samba and configure a samba share to allow access to those files and folders from within you host OS;

  • on your host OS, you edit your hosts file to make your websites URLs work in your web browser (until I find out how to make auto-DNS work in the host OS, as it works in the guest OS) - HELP NEEDED.

DETAILED PROCESS

  1. In macOS
  • install VMWare Fusion;

  • install Ubuntu Desktop 18.04 LTR using Fusion;

  • boot into Ubuntu;

  1. In Ubuntu (as guest)
  • in Ubuntu’s terminal:

  • update system:

    sudo apt update
    
  • allow packages over https:

    sudo apt install apt-transport-https ca-certificates curl software-properties-common
    
  • install GPG key to docker’s respository:

    curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
    
  • add docker repository to APT sources:

    sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu bionic stable"
    
  • update system with docker packages from new repository:

    sudo apt update
    
  • install docker:

    sudo apt install docker-ce
    
  • install docker-compose:

    sudo apt install docker-compose
    
  • add your user to docker group (to avoid having to sudo all your docker commands):

    Su ${USER} docker
    
  • logout and login with your user again to apply group changes;

  • create a project folder to host a devilbox environment and navigate to it:

    cd ‘path-to-project-folder’
    
  • clone devilbox repository to this folder:

    git clone https://github.com/cytopia/devilbox
    
  • configure your devilbox environment file (.env);

  • create a folder with your project name (for example “mywebsite”) inside devilbox’s data / www folder and, inside this folder, create a folder called htdocs which will host your website’s files and folders;

  • navigate to your devilbox folder inside your project folder:

    cd ‘path-to-project-folder/devilbox’
    
  • start docker-compose: in the first run it will take a while since devilbox will aid docker to create you local development environment according to your .env configuration file:

    docker-compose up
    
  • open your web browser and navigate to localhost: you should see devilbox home page;

  • navigate to “Virtual Hosts” menu item in this page: you should see the folder you’ve created inside devilbox’s data / www folder as DocumentRoot and green OK stating that the URL is valid (i.e. devilbox auto-DNS is working and you have your website local URL in place;

  • navigate to this folder (data/www/project-name), right click on it and select “Local Network Share” and check the box “Share this folder”. Don’t check “allow others…” nor “Guest access”. If it’s the first shared folder, Ubuntu will offer to install all needed packages for this to work - samba in particular. Do that. PS: I am using Ubuntu file explorer (Nautilus) for this, but it could be done in terminal as well.

  • now add your current Ubuntu user to samba and add a password, to allow your host macOS to access Ubuntu’s samba shares with privileges; enter the following command in terminal and type a password for your current user:

    sudo smbpasswd -a ${USER}
    
  • restart samba service:

    sudo service smbd restart
    
  • go tu Ubuntu’s settings > network > wired and click on the cogwheel and take note of your IPv4 address (it is autogenerated by DHCP, you could make it fixed).

  1. In macOS
  • open a finder window; in the left sidebar, under places, you should see your “UBUNTU” computer; click on it and you should see “connected as guest” and the folder you’ve shared in Ubuntu via samba; click on the top right button “Connect as”, choose “Registered User” and enter your Ubuntu’s username and the password you’ve created for that user under samba. You should now see the notice “connected as [your ubuntu user]. PS: I am using NAT as Network Adapter under VMWare preferences for the Ubuntu virtual machine.

  • open you web browser: I’m using Firefox Quantum Developer Edition (used to use Chrome but Google is really messing with DNS which causes trouble with local websites). Put the IPv4 address you’ve taken note before. It should open Devilbox’s homepage. However, under Virtual Hosts, you should see an error - DNS is not working right.

  • open macOS terminal and edit your hosts file

    sudo nano /etc/hosts
    
  • add one line with the IPv4 from Ubuntu, a localhost entry and every URL in devilbox Virtual Hosts page that you wish to access. For example:

    123.456.789.000 localhost mywebsite.loc
    

And that’s it. You can now keep docker running in your Ubuntu VM, access devilbox and all sites from within macOS web browser, edit the website’s database through devilbox’s web tools, and edit files / folders in your htdocs folder (samba mount) with your editor of choice inside macOS.

If this is helpful, just give me thumbs up! A lot of search and sources were involved in putting all this together. Also, I need help: I am still trying to make my macOS work with devilbox’s auto-DNS (to avoid having to manually add every site to the macOS hosts file). Can someone help? :slight_smile:

One last thing: THANK YOU devilbox!

2 Likes

Why do you run inside your Mac Vm Ware tools? Doesn’t Docker work natively ?

I assume that your setup is slower as the native alternative.

I was sceptic initially, but then my experience proved otherwise. Even with docker sync configured, docker for Mac was very slow. I imagine that running this VM is also slower than if my machine was Linux, but it is WAY faster than Mac native. At least in my case!

Well the same goes for Windows , the WSL 2 looks promising though.

I think working on Linux directly seems the best option for Web developers, although not all developers have the same opinion. :grimacing:

Yes. I’m always on the move doing different things. So I love my MacBook with my Windows10 VM + Windows 10 Bootcamp + Linux VM :sweat_smile: