davidaaronyoung.com - Snippets

Upgrading from Magento <=2.2.x to 2.3.x

Posted on March 2, 2019 by davidaaronyoung | 2 Comments

At some point you’re going to want to upgrade your Magento project from 2.0/2.1/2.2 to the latest 2.3.x release to take advantage of new functionality and many improvements. There are a few manual changes that get in the way of the standard composer update that you’re used to. Thankfully, to accommodate this obstacle a tool was included in the codebase to automate these changes for you.

Prep:

# Create a fresh Magento 2.3 project via composer (or clone the repo and switch to a 2.3 tag/branch, or grab the script by itself..) composer create-project --repository=https://repo.magento.com/ magento/project-community-edition=2.3 m23base

# Change working directories to the upgrade tools directory in your new project
cd m23base/dev/tools/UpgradeScripts

Execute:

# Run the 2.3 upgrade assistant against the root of the Magento project you’re intending to upgrade
php -f pre_composer_update.php — –root=/path/to/magento-installation –repo=https://repo.magento.com/

Output:
– Updated composer.json
– Updated update/composer.lock
– Updated update/dev/tests

Change working directories to the root of the Magento project you’ve begun updating and complete the remaining steps.

cd /path/to/magento-installation

# Update Magento and all dependencies
composer update

# Clear the cache
rm -rf /var/cache/*
rm -rf /var/page_cache/*

# Remove any generated code
rm -rf /var/generation
rm -rf /generated/code/*

# Run Magento upgrade scripts
php bin/magento setup:upgrade

# Reindex after upgrade
php bin/magento i:rei

# Flush cache after reindex
php bin/magento c:f

Reading:

Documentation:
– https://devdocs.magento.com/guides/v2.3/comp-mgr/cli/cli-upgrade.html#upgrade-cli-script

Debugging: Cannot add foreign key constraint

Posted on May 10, 2018May 10, 2018 by davidaaronyoung | Leave a Comment

Backstory:

I was working late to get a feature “working” before heading off to sleep. Somewhere in between autocomplete and matching definitions to Magento core files I had prepped my setup script. But upon running php bin/magento setup:upgrade instead of being all set I was greeted with a foreign key constraint issue to debug.

Foreign key constraint from the UpgradeSchema.php in question:

->addForeignKey(

$setup->getFkName(self::CUSTOMMODULE_STORE_PIVOT_NAME, 'store_id', 'store', 'store_id'),

'store_id',

$setup->getTable('store'),

'store_id',

\Magento\Framework\DB\Ddl\Table::ACTION_CASCADE

)

So I went back to UpgradeSchema.php to take a closer look at things. I compared what I’d written to vendor/magento/module-store/Setup/InstallSchema.php since that’s the table I was creating my constraint agaisnt and realized that I’d set store_id on my pivot table to TYPE_INTEGER where it should have been TYPE_SMALLINT.

->addColumn(

'store_id',

\Magento\Framework\DB\Ddl\Table::TYPE_SMALLINT, //<-- I assumed this was going to be an integer, oops.

null, ['unsigned' => true, 'nullable' => false, 'primary' => true],

'Store ID'

)

Simple mistake, simple fix. I updated the type definition, re-ran setup, and was back in business. But the output was not that helpful and I was curious how to get better information about what actually went wrong in the event it wasn’t as apparent. And after a quick search here we are, log in to mysql from CLI and check the INNODB Engine Status logs.

Debugging:

ERROR 1215 (HY000): Cannot add foreign key constraint

mysql -u whomever -p

mysql> SHOW ENGINE INNODB STATUS;

The piece of the log we’re interested in for this use case is the aptly named latest foreign key error section.

------------------------ LATEST FOREIGN KEY ERROR ------------------------ 2018-05-08 21:57:58 0x700001222000 Error in foreign key constraint of table ... ... //The table name and query are output here but not relevant as it was output when the error was thrown during setup:upgrade. See below for the real issue: ...

Cannot find an index in the referenced table where the referenced columns appear as the first columns, or column types in the table and the referenced table do not match for constraint. Note that the internal storage type of ENUM and SET changed in tables created with >= InnoDB-4.1.12, and such columns in old tables cannot be referenced by such columns in new tables. Please refer to http://dev.mysql.com/doc/refman/5.7/en/innodb-foreign-key-constraints.html for correct foreign key definition.

TLDR; double check your column definitions. Make sure the data type and attributes match where appropriate. For example: This DOES mean both ID columns should be unsigned but DOES NOT mean your pivot table’s ID column should be auto incrementing. Put this in your memory bank and hopefully you’ll find it useful while debugging at some point.

SO to a stackoverflow answer from 2013 for still being helpful – https://stackoverflow.com/questions/15534977/mysql-cannot-add-foreign-key-constraint

More articles/tips/tool for debugging here.

Webpack Dashboard + Laravel Mix

Posted on May 7, 2018May 8, 2018 by davidaaronyoung | Leave a Comment

Adding webpack-dasboard to your Laravel project only takes a few steps whether you’re just getting started or trying to further optimize your application. This tutorial assumes that you’ve at least gotten as far as setting up your project and installing all its dependencies.

Step 1: Add webpack-dashboard to your project as a dev dependency:

npm install webpack-dashboard --save-dev

Step 2: Next update the scripts section of your package.json by changing the following entry:

"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",

.. to something this (the color “`-c“` and title “`-t“` can be changed to whatever you’d like):

"hot": "webpack-dashboard -c blue -t 'Laravel Webpack Dashboard!' -- cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --progress --config=node_modules/laravel-mix/setup/webpack.config.js",

Alternatively if you need to use https with a local trusted cert:

"hot": "webpack-dashboard -c blue -t 'Laravel Webpack Dashboard!' -- cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --https --cert '/etc/apache2/ssl/server.crt' --key '/etc/apache2/ssl/server.key' --inline --hot --progress --config=node_modules/laravel-mix/setup/webpack.config.js",

Step 3: Now update the Laravel Mix webpack configuration “`./webpack.mix.js“` to import the dashboard plugin, near the top, and then initialize it by adding to the configuration, located near the bottom of your file:

let DashboardPlugin = require('webpack-dashboard/plugin');

//...

mix.webpackConfig({

// ...

  plugins: [

    new DashboardPlugin(),

  ],

//...

});

Step 4: Start up the webpack-dashboard and dev server by running:

npm run hot

Your output should look similar to the following..

Webpack dashboard output for Laravel Mix

Now visit your site as normal and continue working in your assets directory!

Some caveats:

Hot reloading of SASS isn’t supported though you can mix(‘stylesheet’) and refresh as necessary. Browsersync could be an alternative but likely wouldn’t play nicely with this hot reload setup.

More info here:

M2: Composer Bash Alias

Posted on May 1, 2018 by davidaaronyoung | Leave a Comment

At times you may need to quickly spin up a new, clean Magento 2 install. To simplify this process I added an alias for creating a new Magento 2 environment with composer. If you’re using Oh-My-Zsh as well then its as simple as nano ~/.zshrc and adding the following to the bottom of your configuration.

alias newm2="composer create-project --repository-url=https://repo.magento.com/ magento/project-community-edition ."

newm2 bash composer alias

Once you’re all set up you can run newm2 in any folder and this will automatically grab whatever the latest version is from Magento’s repo and create a new composer based env for you to continue testing/debugging/etc.

If you use any other shell this will still work but you’ll need to locate the proper configuration file for registering your alias (eg ~/.bashrc).

M2: OPCache GUI

Posted on April 1, 2018May 8, 2018 by davidaaronyoung | Leave a Comment

Now you can easily view the statistics for PHP OPcache in your Magento admin panel. TCMP OPcache GUI displays current memory usage / hit rate / configuration values. You can optionally enable the display of all cached scripts, including details about them, and a quick reset link for the menu (Stores > Configuration > TCMP Studio > OPcache).

Installation:



composer require tcmp/opcache

php bin/magento module:enable TCMP_OpCache

php bin/magento setup:updgrade

php bin/magento setup:static-content:deploy

Example:

TCMP OPcache GUI Example

More Information:

Supports: Magento 2.x (System Requirements) / PHP 7.x (OPCache Documentation)
The source: https://github.com/theycallmepepper/m2-opcache-gui
Packagist listing: https://packagist.org/packages/tcmp/opcache

Charts built with Chart.js
Version for Magento 1 (and inspiration for this version): https://github.com/SchumacherFM/Magento-OpCache/

M2: Marketplace EQP Code Standards + PHPStorm

Posted on March 26, 2018March 27, 2018 by davidaaronyoung | Leave a Comment

What is MEQP?

Magento EQP Coding Standard is a set of rules and sniffs for PHP_CodeSniffer tool.

It allows automatically check your code against some of the common Magento and PHP coding issues, like:

– raw SQL queries;
– SQL queries inside a loop;
– direct class instantiation;
– unnecessary collection loading;
– excessive code complexity;
– use of dangerous functions;
– use of PHP superglobals;
– code style issues
– and many others.

Read more about it and see the source: Github: Magento Marketplace EQP

How do I use it?

This tool can be run via CLI against any extension by giving it the path but you can also more tightly integrate it into your development workflow with the following steps:



cd /path/to/your/docroot

mkdir meqp && cd meqp

git clone https://github.com/magento/marketplace-eqp.git .

composer install

Next open up PHPStorm and navigate to Preferences > Languages & Frameworks > PHP > Code Sniffer

You can set it to use the version of PHP_CodeSniffer installed with composer in the steps above. Just use “/path/to/your/docroot/meqp/vendor/bin/phpcs” as the path.

Next navigate to Preferences > Editor > Inspections > PHP > PHP Code Sniffer Validation

– Check “Show warnings as” and “Show Sniff Name”
– Choose MEQP2 from the down ( or MEQP1 for Magento 1.x code )
~~Originally posted as:~~
~~– Choose Coding Standard Custom~~
– Set your path tp the ruleset: “/path/to/your/docroot/meqp/MEQP2/ruleset.xml”

Thats it, now you can write your code according to Magento’s standards! You should see notifications right alongside your code indicating the issue and the sniff that is triggering it.

Updated for clarity and accuracy 3/25/2018.

M2: UI Component Form Field Validation

Posted on March 7, 2018May 8, 2018 by davidaaronyoung | Leave a Comment

When building custom forms you’ll need to validate a few different types of data. Thankfully there are a number of validation rules already at your disposal in Magento’s core.


<!-- ... abbreviated usage example - vendor/module/view/adminhtml/ui_component/example_form.xml -->
<field name="title">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Title</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="sortOrder" xsi:type="number">20</item>
                    <item name="dataScope" xsi:type="string">title</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                        <!-- ... additional rules go here -->
                    </item>
                </item>
            </argument>
        </field>
<!-- ... abbreviated usage example -->

A list of available rules from vendor/magento/module-ui/view/base/web/js/lib/validation/rules.js:

min_text_length
max_text_length
max-words
min-words
range-words
letters-with-basic-punc
alphanumeric
letters-only
no-whitespace
zip-range
vinUS //US VIN Numbers
dateITA
dateNL
time
time12h
phoneUS
phoneUK
mobileUK
stripped-min-length
email2
url2
credit-card-types
ipv4
ipv6
pattern //REGEX
validate-no-html-tags
validate-select
validate-no-empty
validate-alphanum-with-spaces
validate-data
validate-street
validate-phoneStrict
validate-phoneLax
validate-fax
validate-email
validate-emailSender
validate-password
validate-admin-password
validate-customer-password
validate-url
validate-clean-url
validate-xml-identifier
validate-ssn
validate-zip-us
validate-date-au
validate-currency-dollar
validate-not-negative-number
validate-zero-or-greater
validate-greater-than-zero
validate-css-length
validate-number
validate-integer
validate-number-range
validate-digits
validate-digits-range
validate-range
validate-alpha
validate-code
validate-alphanum
validate-date
validate-identifier
validate-zip-international
validate-state
less-than-equals-to
greater-than-equals-to
validate-emails
validate-cc-number
validate-cc-ukss
required-entry
checked
not-negative-amount
validate-per-page-value-list
validate-new-password
validate-item-quantity
equalTo
validate-file-type
validate-max-size
validate-if-tag-script-exist
date_range_min
date_range_max

PWA: Service Worker

Posted on January 8, 2018January 8, 2018 by davidaaronyoung | Leave a Comment

An important piece of installing a service worker in your application is the ability to update it. Here a brief example of registering the service worker and then instructing it to check for an updated version.



    if ('serviceWorker' in navigator) {

        window.addEventListener('load', () => {

            navigator.serviceWorker.register('/service-worker.js').then(registration => {

                // Check for updates

                registration.update();

                console.log('SW registered and update called: ', registration);

            }).catch(registrationError => {

                console.log(registrationError);

            });

        });

    }

Docs:
– Service Worker Lifecycles – Manual Updates

Syncing Forks Without Merge Commits II: CLI

Posted on January 6, 2018January 8, 2018 by davidaaronyoung | Leave a Comment

# Add an upstream remote for the repo that you just forked from git remote add upstream https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git # Fetch the branch info git fetch upstream # Check out the local branch you'd like to sync up # Set it to track against the local master so we can push/pull with shorthand git checkout master --set-upstream=origin/master # merge in the changes from the upstream repo # at this point you should fast-forward and be in sync with the remote branch git merge upstream/master

# push the local sync up to your repo # since we set this to track origin/master already there is no need to specify git push

Docs:
– Configuring A Remote For A Fork
– Syncing A Fork

Angular: Environment Variables

Posted on January 6, 2018 by davidaaronyoung | Leave a Comment

Add your variable and make sure that you configure each environment.



// ./public_html/src/environments/environment.ts or environment.prod.ts

export const environment = {

    production: false,

    apiUrl: 'https://example.apiurl.dev'

};

Then import the environment variables and use where necessary.



// ./public_html/src/app/example.ts

import {environment} from '../environments/environment';
export class Example {

    public envOptions = {

        apiUrl : environment.apiUrl

        // ...

    }

    // ...

}

Proudly powered by WordPress
Based on Start Bootstrap - Landing Page
Colored with Bootswatch
Carousel by Slick
Parallax using parallax.js
Service worker using workbox