Using Laravel Vite with MAMP
As seen in other posts, I use MAMP quite a bit for my web development environment. I know I can run docker, or any of the other platforms out there but they use more memory and resources that I’d prefer to devote to my dev tools.
I started a new Laravel project and wanted to use MAMP but Vite was throwing errors due to the SSL not matching out of the box.
When adding
@vite('resources/js/app.js')to my blade file, I’d get errors including:
This request has been blocked; the content must be served over HTTPS.I found articles saying to add –https or –host to my package json command but then I got this error:
net::ERR_SSL_VERSION_OR_CIPHER_MISMATCHLoad MAMP Pro, add your host and generate your SSL certificates. For this example, we’ll use set the host name to my-app.test, and assume you’re storing the SSL keys in the default location.
Open vite.config.js and add the following 2 lines:
import fs from 'fs'; const host = 'my-app.test';
Then add this to defineConfig section:
server: {
host,
hmr: { host },
https: {
key: fs.readFileSync(`/Applications/MAMP/Library/OpenSSL/certs/${host}.key`),
cert: fs.readFileSync(`/Applications/MAMP/Library/OpenSSL/certs/${host}.crt`),
},
},
You should now be able to run npm run dev and have no issues.
Sample full vite.config.js file for easy reference:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import fs from 'fs';
const host = 'my-app.text';
export default defineConfig({
server: {
host,
hmr: { host },
https: {
key: fs.readFileSync(`/Applications/MAMP/Library/OpenSSL/certs/${host}.key`),
cert: fs.readFileSync(`/Applications/MAMP/Library/OpenSSL/certs/${host}.crt`),
},
},
plugins: [
laravel([
'resources/sass/app.scss',
'resources/js/app.js',
]),
],
});
How to Get Laravel Debugging to work with PHPStorm and MAMP Pro 5
This has been one of the more aggravating things I’ve had to deal with in setting up software for development. I’ve followed the official documentation from JetBrains, over 30 other blog tutorials, and literally failed in getting any of them to work.
I figured out an easy way to make the setup work so I’m sharing it in case someone else finds it useful and for self-reference since I’ll probably forget how to do this again in 6 months when I start a new project.
MAMP Configuration
- Load MAMP and setup your host. Make note of the host name as you will need it to configure PHPStorm.
- Go to PHP on the left under Languages.
- On the right under Extensions, check Xdebug (Debugger).
PHPStorm Configuration
- Load PHPStorm and load your Laravel project.
- Setup your PHP executable and interpreter as per the official documentation and then resume here.
- On the top right of PHPStorm, select Edit Configurations from the dropdown.
- Click on the Plus Button on the top left of the dialog and then select ‘PHP Web Page’.
- Enter a descriptive name in the textbox. I use the host name from MAMP so it’s easy to identify visually. Click on the 3 dots with next to Server.
- Enter a descriptive name. I use the host name here as well. For the host, omit the http/https and just add the host name from MAMP.
- Click OK
- Now add your breakpoints and click on the Debugger Button on the top right and PHPStorm will load the site into the browser and break when breakpoints are hit.
Happy debugging!
Self-signed SSL certificates not working with MAMP and Chrome
I use MAMP Pro for most of my PHP development and Chrome has annoyingly been blocking the self-signed SSL certificates MAMP generates, saying the certificate is not valid and “Your connection is not private”:
Thankfully, I found an easy solve to fix this. These steps assume you’ve created a host in MAMP. You’ll need to go to the SSL tab of the host you are trying to fix and
- Check the SSL button
- Click the self-signed certificate button.
- Fill in the fields in the dialog modal and click Generate
- You’ll be prompted to save the certificate. Choose whatever location you’d like.
- Click on the circle with the arrow to open the directory where the certificate was saved.
- In the finder window that opens, double click the .crt file (be sure it’s the same file name that’s in the SSL window in case you have multiple).
- In the Add Certificate window, click Add. I testing adding it to login and system and both worked, so add whichever you prefer.
- In the Certificates Window, double click the certificate. It’s easier to filter by name if you have a lot of items.
- In the next modal window, choose Always Trust from the dropdown.
- Close out the next confirmation window, and you’ll be prompted to authenticate with your mac login to save the updates.
Go back to Chrome, and reload the page and the certificate should work now:
List of my must-have Alfred Workflows
Use a mac? You’ll want to grab Alfred App. I’m finding it an invaluable replacement for spotlight and the workflows allow me to supercharge my workflows. It’s so useful that I’ve purchased the Powerpack lifetime license.
In addition to the standard features, here are a list of the most useful workflows for dev/tech:
Kill process – by Nathan Greenstein (@ngreenstein)
I use it as an activity monitor for CPU usage, and from there I can easily force quit any process if needed. It’s easier to see all processes on the Alfred UI instead of opening Activity Monitor on your mac. There’s also the workflow Kill Application – by Sebastian Hallum Clarke (and also on his site you can find other cool workflows).
Timer – by Daniel Bader
I use this one a lot. It’s super simple and by writing “Timer” and the number of minutes, you can easily set a reminder. It’s great for anyone using the Pomodoro technique or even if you leave something on the stove and want to go back to work.
Copy SSH Public Key – By oldcai
This one saves me time when I need to deploy my SSH key on a new server. Type ‘pk [ssh key file name]’ and it’ll copy the ssh key to the clipboard.
Incognito – by Nedwood
I find myself using this when I need to test a page and bypass the cache. Type ‘incog [url]’ and it’ll launch a new chrome window in incognito mode.
Find Folder by Samvlu
Finds a folder by name. I find this is faster than spotlight in just about every search.
Smart Folders by Deanishe
List all the Smart Folders/Saved Searches (same thing) on your system and drill down into their contents. Works in much the same way as Alfred’s File Filter, but Smart Folders are also available outside Alfred and are a bit more flexible.
For example, you can configure a Smart Folder to show all video/audio/image files without having to specify each different filetype individually. If you already use Smart Folders, this workflow can save you the work of re-implementing them as File Filters.
What’s more, you can exclude specific filetypes with a Smart Folder, which Alfred cannot do.
Advanced Google Maps Search by stuartcryan
This workflow gives you some quick and dirty shortcuts into Google Maps:
Commands:
To Configure:
mapsethome <home address including street number, name, postcode> (i.e. what you would type into Google Maps)
mapsetwork <work address including street number, name, postcode> (i.e. what you would type into Google Maps)
Commands for Use:
maps <query> – Search Google maps for an address
dir <query> to <query> to <query> etc (seperate multiple addresses with ” to ” minus the quotes, and you will get a multiple location search)
dirfw Show directions from Work to address
dirfh Show directions from Home to address
dirtw <query> Show directions from query to Work address
dirth <query> Show directions from query to Home address
trafficw – Show traffic from Home to Work
traffich – Show traffic from Work to Home
StackOverflow Search by deanishe
If you use stackoverflow as much as I do, this is a must-have.
Date Calculator
I find myself needing to calculate differences between dates in my personal life a lot lately. This workflow saves me a lot of time to do that. Want to know how far Christmas is away in days? ‘dcalc 12-25-16 – now d’ returns the number of days (assuming you’re using the US short format like I am).
Wifi Control by miroman
All my Macbooks periodically have issues with wifi. I’ve never been able to figure out what’s causing it but I use Wifi Control to restart the wifi which allows me to connect successfully.
Bugnot by vitor
If you use bugmenot at all, this is a useful extension to get logins without loading a new tab. Type ‘bn domain.com’ and you’ll get a list of matching passwords to use.