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

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


Actualizar registros con LARAVEL y VUEjs

Laravel VUE.js VUE.js 2 0 comentarios

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 para realmente actualizar en la base de datos utilizando la tecnología de Laravel y Vue.

Formulario para Editar con LARAVEL y VUEjs

Laravel VUE.js VUE.js 2 0 comentarios

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 ventana flotante con la función edit para preparar los datos en Vue.

Guardar datos con LARAVEL y VUEjs – Método STORE

Laravel VUE.js VUE.js 2 0 comentarios

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 hacer el al llamado al método store() del API creada en Laravel.

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

Laravel VUE.js VUE.js 2 0 comentarios

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 ventana Modal que aparece al hacer clic en el botón para crear una nueva tarea.