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_MISMATCH

Load 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',
        ]),
    ],
});

4th January 2021

Administration Bitbucket Development Digital Ocean Droplet Jigsaw Laravel Laravel PHP PHP Pipelines Programming Solutions Tips and Tricks Tools Troubleshooting Web Development

How to Setup CI/CD of Jigsaw Site to Digital Ocean Droplet Using Bitbucket Pipelines

I created a new personal resume site and decided I wanted to build a static site since it wouldn’t be frequently updated. I evaluated Nuxt, Gatsby, and a few others but settled on Jigsaw, a static site generator based on Laravel. I had never used it before and figured this would be a good learning experience while building something I needed. I was pleasantly surprised by how easy it is to use and setup, so kudos to the Tighten team for putting together such an elegant solution.

I wanted to get a CI/CD pipeline configured to handle the site’s deployment but couldn’t find any working tutorials, so I’m sharing my solution in case it helps others. I’m using Bitbucket for this since it’s a personal private repo, so I’m using Bitbucket Pipelines.

Instructions

After you enable pipelines for your project, you’ll need to configure a Pipelines Repository Variable in your project. Go to the settings tab in your repo, and then select Repository variables:

Add 3 variables:

USER_NAME – The SSH user name you want Bitbucket to use to connect to your server.
PRODUCTION_HOST – Your domain that Bitbucket should connect to
FOLDER – Folder Path where the site should be deployed to

Generate an SSH key (or use your own) and add it to your server under the SSH Keys tab in Pipelines:

I generated a new key and then added it to ~/.ssh/authorized_keys for the account.

Add this YAML snippet to your bitbucket-pipelines.yml in your root. This will use PHP 7.4, install rsync, node + npm, composer, and build the production version of the site to deploy to the specified folder.

The -aVP switch for rsync is to give me verbose progress feedback so I can see what’s happening. If you don’t need the detail, switch it to -a.

image: php:7.4-fpm
pipelines:
  branches:
    master:
      - step:
          name: Jigsaw Build
          script:
            - apt-get update && apt-get install -y unzip
            - apt-get install rsync openssh-client nodejs npm -y
            - curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
            - composer install
            - npm install
            - npm run production
            - rsync -avP build_production/ $USER_NAME@$PRODUCTION_HOST:$FOLDER --exclude=bitbucket-pipelines.yml --chown=www-data:www-data

I received a few errors when rsync ran. In case you run into them as well, here’s the list and fixes. The first was:

rsync: failed to set times on "$FOLDER": Operation not permitted (1)

I added --no-t to resolve that and then got a new error:

rsync: failed to set permissions on "$FOLDER": Operation not permitted (1)
which was fixed with adding the switch --no-perms. My final rsync command became:

rsync -avP --no-t --no-perms build_production/ $USER_NAME@$PRODUCTION_HOST:$FOLDER --exclude=bitbucket-pipelines.yml --chown=www-data:www-data

28th July 2020

Backblaze B2 Development Laravel Laravel PHP PHP Programming Web Development

How to use Backblaze B2 with Laravel

I am working on a Laravel project and decided to use a Backblaze bucket as it’s cheaper for storage when compared to AWS S3. I couldn’t find a tutorial on how to get it working from scratch and I tested a bunch of Laravel B2 libraries that didn’t end up working. The good news is that you don’t need a special B2 plugin and instead can use the S3 package recommended by the Laravel docs.

If you haven’t added the flysystem-aws-s3 package, add it to your project using composer:

composer require league/flysystem-aws-s3-v3

Login to your B2 account and create your bucket with your required settings. Once created, you’ll want to create a new application key with the permissions you need for your app. You should get a confirmation once it’s generated:

Open your .env file and locate the settings for AWS. You’ll need to add one key that’s not there by default:

AWS_ENDPOINT=

Match the settings in your .env from the application key to the values below.

AWS_ACCESS_KEY_ID=keyID
AWS_SECRET_ACCESS_KEY=applicationKey
AWS_DEFAULT_REGION=us-west-000
AWS_BUCKET=bucket-name
AWS_ENDPOINT=S3 Endpoint

Now you should be able to call the Laravel storage system like normal:

\Storage::disk('s3')->put('test.txt', 'test');

11th June 2019

AWS Development Laravel Laravel PHP PHP Programming Rekognition

How to Extract Text from image using Laravel and Amazon Rekognition API

I’m currently working on a project that requires extracting text from images of variable quality. I’m doing quick prototypes using PHP and Laravel, but I’ve found the documentation for accomplishing this a bit lacking. After working on it for a bit, I figured out a really simple solution and am sharing in case it helps anyone else.

This sample will send the image to the API as a blob instead of using a URL. I had tried Base64 encoding it without any luck. I discovered that using Imagick was the easiest way to make this work so the sample relies on that.

Fire up terminal and add a requirement for aws/aws-sdk-php:

composer require aws/aws-sdk-php

Add keys for your AWS access keys and region to your .ENV file:

AWS_REGION=YOUR_REGION
AWS_SECRET_ACCESS_KEY=ENTER_YOUR_KEY
AWS_ACCESS_KEY_ID=ENTER_YOUR_KEY

Create a controller, add the snippet below, and create a route to the controller. Check the URL and you should have a dump showing the array returned from AWS with all the text, bounding boxes, and information.

        //Build config array for AWS variables
        $config = array(
            'region' => env('AWS_REGION'),
            'version' => 'latest',
            'credentials' => array(
                'key' => env('AWS_KEY'),
                'secret' => env('AWS_SECRET')
            )
        );

        //Replace with path to image or uploaded image.         
        $path = '{path to image.jpg}';

        $image = new Imagick($path);
        $imdata = $image->getImageBlob();

        $client = new RekognitionClient($config);

        $result = $client->detectText([
            'Image' => ['Bytes' => $imdata],
        ]);
        
        //Dump Result
        dd($result);

28th May 2019

Development Laravel Laravel mySQL PHP PHP Programming SQL SQL Web Development

How to Execute a Stored Procedure in Laravel 5.6

I’ve been stumped on this and tried everything I can think of but I can’t get Laravel to execute a working mysql query to reorder an ordering column when deleting a row.

Here’s a sample simplified query, which works directly in mysql:

SET @number = 3; UPDATE images SET order = (@number := @number + 1) WHERE id >2 AND project_id = 10

Laravel code that doesn’t update the database but throws no errors:

$sql = 'SET @number = 3; UPDATE images SET order = (@number := @number + 1) WHERE id >2 AND project_id = 10';
DB::raw($sql);

Other things I’ve tried which throw errors including saying there’s an error in the query:

DB::unprepared($sql);
DB::statement(DB::raw($sql);
DB::statement($sql);
DB::update($sql);
DB::select($sql);

I’ve also tried splitting it the statements with no luck:

DB::statement("SET @number = 3;");
$sql = 'UPDATE images SET order = (@number := @number + 1) WHERE id >2016 AND project_id = 10';
$update = DB::update($sql);

I tried a few other things which I didn’t log in Git but I had no luck getting any of it to work. I asked for help on the forums and people told me to use Laravel’s Eloquent model to update rows one by one which is pretty inefficient. You get extra trips over the network (especially important when the code is not on the same server as the database server since you can get dropped calls), extra connections to the server, the extra overhead of processing the query on the server and in the database, etc instead of just having mysql make the update.

The recommended solution may not seem like a big deal but I’ve run into issues where client connections have been dropped mid-update and left a table partially renumbered.

As a last resort and workaround, I opted to use a stored procedure to accomplish my goal. That presented its own can of worms as searching for examples on how to execute stored procedures in Laravel 5.x was also not easy. There’s nothing in the documentation and all the examples I found didn’t work.

Here’s what worked for me with Laravel 5.6, with mySQL 5.6.38:

DB::statement('call spRenumberComments(?, ?)',  [$id, $projectid);

26th October 2016

Laravel Laravel PHP PHP Programming Solutions Terminal Tinker Troubleshooting

How to test email sending in Laravel 5.3 using artisan tinker

I’m building a Laravel app and ran into an error when trying to send mail but wasn’t getting an error back since the request was posted through ajax. If you’re trying to troubleshoot it, artisan tinker app is very useful to get more information on the error.

Fire up terminal/command line and run:

php artisan tinker

and then run the following snippet:

\Mail::raw('hello world', function($message) {
   $message->subject('Testing email')->to('test@example.org');
});

You should either see a success/null message if everything was correct, or an error with details on what went wrong.

The error I encountered required configuring 2FA in Gmail or you can choose setting the insecure app option up to send through Gmail for testing.