#12 Docker Desktop hints, populating a Google Map with Laravel, and more

Welcome to the 12th Andy's Web Dev Tips newsletter! Here's a few things from the last couple weeks:

Docker Desktop makes debugging containers easy

If you installed Docker the way that I did, you probably have the Docker Desktop app available on your computer. Up until recently, I never really paid attention to it. It was always just something running in the background while I used terminal commands for everything revolving around spinning up containers, seeing their status, and managing logs.

Well, I’ve been doing things the hard way apparently, because the Docker Desktop app is incredibly robust. Not only does it show you container networks that you have running, you can click on one to view a real-time dump of all logs associated with containers in that network. You can then drill down deeper and see the logs, environment details, and resource usage of an individual container.

This has come in super handy for me when I’m in the middle of debugging say, an Nginx timeout or some obscure MySQL error. No more running exec commands to get back pieces of logs, when it’s all just a click away!

Populating a Google Map with Vue and Laravel

Last week I published another new video, this time combining both Laravel and Vue to show how you can populate a Google Map with pin points related to saved data in a MySQL database. The goal was to create something that you’d see on a restaurant’s website, showcasing a variety of locations on a map while displaying hours and address info if one of those pins is clicked.

The video isn’t a super long one, about 25 minutes, and it goes over everything needed for this demo. From building up a simple Laravel API and seeding a database with location data, to creating the Vue app rendered in a Blade template and pulling in locations using axios and our API.

Use mkcert for trusted local ssl certificates

I stumbled across the mkcert app about a month ago, and it’s completely changed my local web development setup. I used to use self-generated SSL certificates to enabled https on my development sites, and it worked good enough. But the problem was that Chrome and many other modern browsers reject those certificates as invalid, and constantly display a red insecure badge on the URL while you’re on that site.

That’s where mkcert comes in. It creates a local certificate authority on your machine, and then validates certificates against that authority for development site URLs that you specify. If you use one of these generated certificates in your Nginx or Apache configuration, you’re greeted with zero errors when loading up the site! Browsers consider the certificates valid, and you’re not subject to any alerts or console errors.

I’ll be creating a walk-through article on dev.to detailing more information about how to get started and a few use cases that might be helpful. Keep an eye out for the link when it’s ready!

Specifying which containers to bring up with docker-compose

In my video on how to create a local dev environment for Laravel with Docker, I add containers for services like artisan and composer into the docker-compose.yml file. Those are then brought up and initialized when spinning up the network with docker-compose up, even though they’re only used as commands using docker-compose run.

In order to solve that and simplify my environment a little, I’ve started using the methodology of specifying which container(s) I want to bring up when I run docker-compose up. All you have to do is list out the names of the service(s), with a space between them. Additionally, any containers that are specified in a depends_on heading, will be brought up automatically!

Using this, I’ve rewritten the instructions for using the docker-compose-laravel repo, and instead of bringing it up with docker-compose up I’m now using docker-compose up site. This spins up the nginx, php, and mysql containers, while leaving artisan, composer, and npm alone. Those can then be brought up individually for one-off uses with docker-compose run. The best part about this method is that we can then use the Composer container to install a fresh copy of Laravel without having to have anything installed on our local system!

Today I learned

This little helpful hint comes from Manuel Matuzović on Twitter. If you create an event listener in JavaScript, and want it to only fire once, you can specify once: true as an option at the end of the addEventListener method.

That’s it for now! If you have any questions about the above, or have something you’d like me to check out, please feel free to let me know on Twitter.