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.

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

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

Adquiere en preventa y aprovecha un gran descuento TDD en Laravel

Comparte en

Creado por: Venezuela Italo Morales

Profesor de #Laravel y #PHP en Rimorsoft Online

Más información


Spatie/Laravel Permission ¿Cómo agregar campos en la tabla "roles"?

Hola, mi consulta es la siguiente:

Relacioné la tabla "roles" con mi tabla** "empresa**", es decir, en la tabla "roles", tengo el campo "id_empresa", en la vista, están los campos necesarios y el select de la empresa pero al querer guardar los datos, me arroja el siguiente error: ** "The given role or permission should use guard web instead of Empresas. "** No ...

SOFTWARE PARA CONSULTORIOS MEDICOS

Hola Amigos. soy nuevo en el grupo.. me gustaria saber si alguien tiene o tuvo algun proyecto basado en laravel, para consultorios medicos? ...

sincronización de componentes hermanos

un gran saludo a la comunidad rimorsorf... espero de su valiosa ayuda para mi problema que es el siguiente:

tengo dos componentes en el mismo nivel, el primero crea una tabla con una lista de procesos por tramitar y el segundo componente lista en una tabla los procesos que se han asignado para tramitar; cuando en la primera tabla se asigna el proceso este debe desaparecer de...

plantilla blade y vuejs2

buenas noches comunidad, por casualidad alguien sabrá si se puede integrar la plantilla de laravel blade en vuejs2 component??, gracias dee antemano...