Tecnologías Webpack y Laravel Mix

↑ Me gusta (0)

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. 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).

1

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...

2

Controllers, Routes, Views, Database para el CRUD

En este video vamos a comenzar formalmente con la preparación del proyecto para realizar el CRUD utilizando VUE y Laravel. Se realiza la cre...

3

Conexión VUEjs y Laravel - API

En este video vamos a crear el código necesario para iniciar el API, como primer paso utilizaremos datos de ejemplo (seeder) y configuramos...

4

Lista de datos con Laravel y VUEjs

En este video veremos realmente la integración de Laravel y Vue, el objetivo será crear el diseño con su tablas, los botones, el título y la...

5

Eliminar registros con VUEjs y LARAVEL

Ha llegado la hora de adentrarnos un poco más en el funcionamiento del CRUD y en este video vamos a trabajar con la letra D, es deci...

6

Notificaciones con TOASTR - Uso de Jquery, Laravel y Vuejs

En este video vamos a culminar el proceso de eliminación de un registro, haciéndole saber al usuario que la acción se ha realizado con éxito...

7

Formulario de creación con ventana Modal - Laravel y Vuejs

Vamos a dedicarnos en el diseño para preparar la vista de nuestro formulario de creación, utilizando la tecnología de Bootstrap con una vent...

8

Guardar datos con LARAVEL y VUEjs – Método STORE

En este video vamos a continuar con el formulario de creación para añadir una nueva tarea a nuestra base de datos, utilizando Vue para h...

9

Formulario para Editar con LARAVEL y VUEjs

Vamos a preparar el terreno para la edición de un registro de nuestra lista de tareas, es decir crearemos el formulario y su respectiva vent...

10

Actualizar registros con LARAVEL y VUEjs

Tenemos que continuar con el proceso de edición de un registro y es por esto que en este video vamos a crear el bloque de código necesario p...

11

X-XSRF-TOKEN LARAVEL, VUE y AXIOS

Este video será el Bonus número 1 dentro de esta serie y en el cual vamos aprender un poco sobre seguridad y como Laravel nos ayuda en ese s...

12

Paginación usando VUEjs y LARAVEL - Parte 1

Video Bonus número 2, en el que vamos aprender paso a paso cómo realizar la paginación de varios registros de la base de datos en una lista,...

13

Paginación VUEjs y LARAVEL Computed Property - Parte 2

Video Bonus número 3, en el que vamos a continuar con la práctica de la paginación de varios registros utilizando Laravel y Vuejs, enfocándo...

14

Paginación VUEjs y LARAVEL Cálculo de páginas - Parte 3

Video Bonus número 4, vamos a continuar con la programación de la propiedad pagesNumber para obtener los números de página con cálculos...

15

Paginación VUEjs y LARAVEL Cálculo de páginas - Parte 4 (FINAL)

Video Bonus número 5, donde vamos a continuar básicamente con la creación del html o diseño de la paginación, utilizando los métodos y varia...

16

CRUD en Laravel y VUEjs - Despedida

Último video y despedida de la serie Crud en Laravel y Vuejs, corto resumen de todo lo visto a lo largo de los videos y corrección d...