Tag: frontend

Webpack Dashboard + Laravel Mix

Posted on by davidaaronyoung | Leave a Comment on Webpack Dashboard + Laravel Mix

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: UI Component Form Field Validation

Posted on by davidaaronyoung | Leave a Comment on M2: UI Component Form Field Validation

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 by davidaaronyoung | Leave a Comment on PWA: Service Worker

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

Angular: Environment Variables

Posted on by davidaaronyoung | Leave a Comment on Angular: Environment Variables

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

        // ...

    }

    // ...

}

M2: Add a CMS block to your layout

Posted on by davidaaronyoung | Leave a Comment on M2: Add a CMS block to your layout

Add a CMS block to your layout XML:

<referenceContainer name="containerName">

    <block class="Magento\Cms\Block\Block" name="block_name_in_layout" as="block.name.in.layout">

        <arguments>

            <argument name="block_id" xsi:type="string">block_identifier</argument>

        </arguments>

    </block>

</referenceContainer>