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-dataHow 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-v3Login 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 EndpointNow you should be able to call the Laravel storage system like normal:
\Storage::disk('s3')->put('test.txt', 'test');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 = 10Laravel 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);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:
How to Copy and Paste into the Digital Ocean VNC Console
I recently signed up for Digital Ocean to test droplets for my development and linux management testing. I was securing the server and setup fail2ban, disabled the root login, and created a user account but forgot to change the user name from root to the user name I selected in my SSH client profile. I ended up locking myself out of the server and had to resort to logging into the admin panel on Digital Ocean’s website and use their browser embedded VNC client to restore my access. I quickly discovered that one of the downsides of using this panel is that you can’t copy and paste commands. Luckily there’s a workaround and you can use the browser console to do sendkeys through Javascript.
Bring up the console in the browser developer tools. Here’s a cheat sheet for keyboard shortcuts:
| Browser | Description | Windows | Mac |
|---|---|---|---|
| Chrome | Open Developer Tools and bring focus to the console | Ctrl + Shift + J | Cmd + Opt + J |
| Firefox | Open Console | Ctrl + Shift + K | Cmd + Opt + K |
| Internet Explorer | After hitting F12, you have to click the console tab. There’s no direct shortcut to the console tab. | F12 | N/A |
!function(){function t(){window.rfb.sendKey(e.shift().charCodeAt()),e.length>0&&setTimeout(t,10)}var e=prompt("Enter text to be sent to console").split("");t()}();
Update 9-21-16
Ruden and Sebastiaan’s pointed out there was a bug in the code above. This updated snippet has support for characters when using shift characters like !@#$%^&*()_+
!function(){function t(){function n(t,e){s=s.concat(RFB.messages.keyEvent(t,e))}var o=e.shift(),s=[],i=o.charCodeAt(),c=-1!=='!@#$%^&*()_+{}:"<>?~|'.indexOf(o),r=XK_Shift_L;c&&n(r,1),n(i,1),n(i,0),c&&n(r,0),rfb._sock.send(s),e.length>0&&setTimeout(t,10)}var e=prompt("Enter text to be sent to console").split("");t()}();You’ll receive a dialog prompt to enter the copy to paste in. Please note that you need to click on the VNC console and hit enter to execute the command.
If you need to enter more than one command, just hit the up arrow on your keyboard in the console to get the script again for easy reuse.
Sitecore 8 Install Error: “The name you entered is not unique.”
I was working on my business partner’s computer to help him fix errors with his Sitecore instance for his certification class. He experienced multiple issues with the Sitecore 8 installer on Windows 8 and we went the manual route of deleting Sitecore to install clean and start from scratch. In the process, we:
- Deleted the IIS website instance in the IIS Manager
- Deleted the databases used by the instance
- Deleted the root folder in the filesystem
After launching the installer again, it kept returning the error “The name you entered is not unique.” when naming the Sitecore instance to one previously used. After checking the IIS metabase and a few other typical locations, couldn’t figure out where the Sitecore installer was finding the name since we deleted everything manually. It turns out that the Sitecore executable installer creates a registry entry under HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Sitecore CMS which is used to display information in Windows Programs and Features. This registry key is also checked during the installation process and if a child key with the same name as the one being installed is found, the above error message is shown.
To fix this:
- Start -> Run (or Windows Key + R)
- Type regedit
- Navigate to HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Sitecore CMS.
- Delete the registry keys containing the information about the previously installed instance.
NOTE: You’ll need to relaunch the installer as it apparently caches the key information.
ASP.NET MVC Model Generator
In making the switch to ASP.NET MVC, I’ve moved away from using my old Data Access Layer that I’ve used for years and have opted to use Dapper as my ORM of choice in the quest for optimal performance. My DAL was actually pretty optimized for WinForms and WebForms (using straight SQL Queries and SQL parameters) but mapping it to models wasn’t something I had in mind when I created it. I’m finding Dapper takes some getting used too but it is still pretty fast. The downside is that writing the code for Models to wire it up is proving to be a little tedious.
To that effect, I wrote a little application that has helped me generate the models from a database dynamically. It’s in it’s infancy stages and something I cobbled together in less than 8 hours but it works. I’ll add more features too as time goes on if there’s enough interest or to satisfy my own needs. In the meantime, I’m open sourcing the project as it may help others and I’d love to see it become something grander if others are willing to contribute to it. There’s also some useful bits of code that others may find useful to reference like dynamically reading fields from a database, pluralization/singularization of words, amongst others.
You can find the repository on Github: https://github.com/gregvarghese/MVCModelGenerator
How to Get Browser Name and Version via JavaScript
Today I ran into a strange issue where Firefox version 28 and below rendered style widths different than Firefox 29 and above. Firefox 29 and above appear to have fixed the issue and render sizes to match Chrome/IE8+/Opera/Safari. Unfortunately, as old as Firefox 28 is, our client’s legal review team is stuck on that version as IT refuses to let them upgrade. As such, we needed to add a kludge fix to the site to add a style to fix the issue for those running older Firefox versions. JQuery removed the version support from version 1.9 so here’s a handy script that will allow you to detect the browser and version without any extra dependencies.
function get_browser_info(){
var ua=navigator.userAgent,tem,M=ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if(/trident/i.test(M[1])){
tem=/\brv[ :]+(\d+)/g.exec(ua) || [];
return {name:'IE ',version:(tem[1]||'')};
}
if(M[1]==='Chrome'){
tem=ua.match(/\bOPR\/(\d+)/)
if(tem!=null) {return {name:'Opera', version:tem[1]};}
}
M=M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
if((tem=ua.match(/version\/(\d+)/i))!=null) {M.splice(1,1,tem[1]);}
return {
name: M[0],
version: M[1]
};
}
Usage is very simple:
var browser=get_browser_info(); console.log(browser.name); console.log(browser.version);
BONUS: If you need to detect a specific version and add special classes, here’s a quick snippet that will allow you to add a class to the HTML tag using plain old vanilla.js.
var browser=get_browser_info();
if(browser.name == 'Firefox' && browser.version <= 28)
{
var root = document.documentElement;
root.className += " firefox28";
}
Safari Prompts Authorization for Video in Password Protected Folders
Using Safari 6 and trying to password protect a site with videos? You might run into issue where Safari prompts you for a password. Unexpectedly, you’ll find that you’re unable to interact with the fields to re-authenticate or even move the box to get it out-of-the-way.
If you run into this issue, check your folder structure. If your videos are in a password protected folder and inherit from the parent like below, you’ll have to move the video files out of the password protected folder to get the videos to play.
Main
—Password Protected Folder
——Videos
Your new folder structure will need to be similar to something like:
Main
—Password Protected Folder
—Videos
Once you do that, your videos should play with no issues. I’ve already reported the issue to Apple when I first encountered the issue but there’s been no fix to date.