Tecnologías Webpack y Laravel Mix

Bienvenido a una de las series más esperadas y solicitadas en Rimorsoft, y no es para menos. La mezcla de dos grandes frameworks como lo son Laravel y VUEjs con un único objetivo que será crear un CRUD sencillo pero funcional, esto nos ayudará a entender las bases necesarias para desarrollar proyectos más avanzados uniendo ambas tecnologías.

Navega en las lecciones

Inicia sesión para poder registrar las lecciones que has completado Login

Comparte en

Para comenzar debemos realizar la instalación de un nuevo proyecto en Laravel, el comando utilizado vía composer para esto es el siguiente: composer create-project --prefer-dist laravel/laravel laravel-vue-crud.

Entonces, nuestro proyecto a utilizar se va a llamar laravel-vue-crud, con crud nosotros nos referimos a que el proyecto contará con las funciones de crear (create), leer (read), actualizar (update) y borrar (delete).

Laravel MIX

Es un sistema que podemos instalar dentro de nuestro proyecto Laravel para definir el paso a paso de compilación de la tecnología Webpack. Esto se realiza mediante un método de encadenamiento.

Pero, ¿Qué es un método de encadenamiento? Es hacer una lista de todos tus archivos javascript, css, archivos sass o archivos less para que con webpack poder agruparlos y compilarlos paso a paso.

Webpack, es un sistema de agrupación para preparar una aplicación web y luego subirlo a un servidor, es decir, que nos ayuda automatizar los procesos comunes, agrupándolos en un único archivo para poder utilizarlo en el html.

Para hacer uso de Laravel Mix primero debemos instalarlo, para usar los comandos npm tenemos que haber instalado Node.js ya que vendría a ser como una especie de composer para el FrontEnd. Entonces para instalar laravel Mix digitamos en consola el siguiente comando: sudo npm install.

Dentro de la carpeta resources/assets de nuestro proyecto, vamos a colocar localmente los archivos script necesarios para trabajar, estos archivos serian vue.js, axios.js y un archivo para nuestro propio código javascript con el nombre de app.js. Mediante laravel Mix vamos agrupar estos 3 archivos para hacer uno solo y reemplazar el archivo app.js que viene por defecto ubicado en la siguiente ruta public/js/app.js.  

Configuración del Webpack

Si nos situamos en la raíz de nuestro proyecto, encontraremos un archivo llamado webpack.mis.js. En este archivo configuramos cada uno de los scripts creados anteriormente para agruparlos en un solo archivo. Cabe señalar que ha esta configuración también podemos agregar los archivos de estilos o css a utilizar.

mix.scripts([
    'resources/assets/js/jquery.js',
    'resources/assets/js/bootstrap.js',
    'resources/assets/js/toastr.js',
    'resources/assets/js/vue.js',
    'resources/assets/js/axios.js',
    'resources/assets/js/app.js',
], 'public/js/app.js').styles([
    'resources/assets/css/bootstrap.css',
    'resources/assets/css/toastr.css',
], 'public/css/app.css');

Una vez configurado nos dirigimos a la consola y digitamos el siguiente comando: sudo npm install, esto creará el archivo unificado con todos nuestros scripts y reemplazará el archivo app.js que mencionamos anteriormente.

Práctica

Para la demostración y uso de nuestro archivo unificado, utilizaremos un código ya realizado en una práctica del curso VUEjs 2. En el html dentro de la etiqueta body copiamos y pegamos el código de aquella práctica pero con un pequeño cambio, como Laravel Mix nos ha unificado todos los scripts y estilos en un solo archivo, únicamente necesitamos llamar a ese script con esta línea <script src="{{ asset('js/app.js') }}"></script>.

<div class="row">
    <div class="col-sm-4">
        <h1>VUEjs - AJAX axios</h1>
            <ul class="list-group">
                <li v-for="item in lists" class="list-group-item">
                    @{{ item.name }}
                </li>
            </ul>
    </div>
    <div class="col-sm-8">
        <h1>JSON</h1>
        <pre>
            @{{ $data }}
        </pre>
    </div>
</div>
<script src="{{ asset('js/app.js') }}"></script>

Dentro de nuestro archivo creado para código javascript personal, pegamos las siguientes líneas de código:

<script type="text/javascript">
    var urlUsers = 'https://jsonplaceholder.typicode.com/users';
    new Vue({
        el: '#main',
        created: function() {
            this.getUsers();
        },
        data: {
            lists: []
        },
        methods: {
            getUsers: function() {
                axios.get(urlUsers).then(response => {
                    this.lists = response.data
	    });
            }
        }
    });
</script>

Para actualizar o volver a compilar nuestro archivo unificado que ha creado Laravel Mix antes de realizar estos cambios, simplemente digitamos en consola el siguiente comando: npm run dev y listo!. Podemos probar nuestro ejercicio y veremos que funciona correctamente.

Con esto logramos el objetivo de este video que era la integración de tecnología FrontEnd y Laravel, indicarte que de lado del FrontEnd también vamos a utilizar la consola, y que en vez de composer utilizamos npm (tecnología de node).

Comparte en

Creado por: Venezuela Italo Morales

CEO & Founder de Rimorsoft Online

Más información


Parámetros de tipo objeto en PHP

PHP 3 comentarios

En Rimorsoft hemos ido descubriendo cómo pasar parámetros y asegurarnos de que los tipos sean correctos. Hemos visto un ejemplo muy interesante en post de funciones anónimas, pero no es lo único que podemos hacer.

Herencia de clases - PHP

PHP 4 comentarios

Esto lo entendemos mejor si nos vamos a un diccionario y buscamos la palabra heredar, hay muchas definiciones pero la que aplica es la siguiente:

Componente VUEjs en Laravel

Laravel VUE.js 2 comentarios

Curso de componentes en VUEjs y LARAVEL 5.5, la idea es programar una interfaz que consuma datos de un backend... El componente se creará y se usará desde Laravel.

Clases y Objetos en PHP

PHP 7 comentarios

Las clases nos ayudan a definir una estructura manejable y entendible de nuestro sistema, este termino da vida a los que conocemos como programación orientada a objetos (POO en español, OOP en inglés). La teoría dice, "esto significa que tratas a tu código o partes de él como objetos de la vida real y esto podría resultar muy familiar para nosotros porque nos acerca al mundo tal y como lo conocemos". Aunque parece que esto siempre es confuso.