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


Validación de registros duplicados en tabla intermedia

Hola,

Necesito de su ayuda estoy tratando que un request valide un registro para que no sea repetido, este esta compuesto por tres llaves foraneas(instituto_id, carrera_id, campus_id). les dejo el request: ```php return [ 'instituto_id' => 'required|numeric|min:1', 'carrera_id' => 'required|numeric|min:1', ...

El auth de laravel trabaja con $_SESSION?.

el auth de laravel trabaja basado en tokens o con el objeto session de php ...

Rutas de Laravel no funcionan

Buenas a todos, tengo un problema, ultimamente, cada vez que creo un nuevo proyecto de Laravel las rutas de este no funcionan. Por ejemplo: si creo el proyecto, éste se crea, pero al agregarle el sistema de autenticación: "auth" se generan tanto las rutas en el archivo web.php y las vistas. pero si intento acceder a la sección de registro o inicio de sesión me aparece el e...

form request ajax laravel (Mostrar error de validación de formulario con ajax)

Hola, tengo una consulta por hacer. Quisiera conocer sus opiniones, sobre como mostrar los errores de validación con ajax cuando utlizo la clase Form Request. Debo decir que el mensaje de registrado con éxito si lo muestra, sin embargo los mensajes de error no los he podido mostrar. Gracias

//FORM REQUEST


public function rules()
    {
        return [
     ...