Index y Layout: estructura inicial

En versiones anteriores, Laravel usaba una cosa llamada “Laravel Mix”, podemos decir que es el predecesor de Jetstream, era un sistema que ya tenía todas las configuraciones hechas para compilar todo el código SASS y JavaScript que tuvieras en tus resources, practicamente Laravel Mix fue el que sustituyó al comando php artisan make:auth jaja
.
Por cierto, el profesor al parecer ya tiene instalado un virtual host que le abre el proyecto con una url personalizada en el navegador, si ustedes quieren ejecutar el proeyecto de Laravel pueden escribir:
.

php artisan serve

Para que Laravel les haga un servidor en donde levantará a Laravel, solamente se dirigen a la URL que les da Laravel 😄

Hola,
Dejo este comentario por en caso de que a alguien le pasara lo mismo.

En mi caso, en el archivo web.php, no pude utilizar esta configuración:

Route::get('/', 'index');

Tuve que hacerlo de esta forma para que funcionara

Route::get('/', function () {
    return view('index');
});```

Sólo tuve que reemplazar la palabra 'welcome' por 'index'.

Para los que puedan tener errores con composer require laravel/jetstream y les sale un error como este

Fatal error: Allowed memory size of 1610612736 bytes exhausted (tried to allocate 4096 bytes) in phar://C:/ProgramData/ComposerSetup/bin/composer.phar/src/Composer/DependencyResolver/Solver.php on line 223

ejecuten primero php artisan y revisen que salga jetstream:install
si no sale ejecuten

COMPOSER_MEMORY_LIMIT=-1 composer update

luego ya pueden ejecutar

php artisan jetstream:install livewire

esto me funciono ya que aun continuo utilizando la version 1 de composer

Saludos
Si alguien presenta error al momento de ejecutar el comando

npm install && npm run dev

Y le sale el siguiente mensaje

 1 Carácter: 13
+ npm install && npm run dev
+             ~~
El token '&&' no es un separador de instrucciones válido en esta versión.
    + CategoryInfo          : ParserError: (:) [], ParentContainsErrorRecordException
    + FullyQualifiedErrorId : InvalidEndOfLine```

Se resuelve cambiando "&&" por ";" , así:

npm install ; npm run dev

Espero sirva. Éxitos.

Si a alguien no le funciona como a mi los componentes de tailwind que se encuentran en la clase app.css por ejemplo, lo que debe de hacer es cambiar en el views> layouts> app.blade.php

<link rel="stylesheet" href="{{ mix('css/app.css') }}">

por lo siguiente

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

Problema: “Si los CSS no se carga en Laravel 8 + Jetstream”.

Una solución podría ser reemplazar la importación de css y js de views/layouts//app.blade.php y views/layouts/guest.blade.php

<!-- Scripts -->
 @vite(['resources/css/app.css', 'resources/js/app.js'])
        

Lo reemplace por :

<!-- Style -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>

Hola PlatziNautas

• Realizare una breve explicación para aquellos usuarios que usen laragon y tengan problemas al instalar y ejecutar el comando npm install && npm run dev y le muestre el siguiente error -> Error: You are using an unsupported version of Node. Please update to at least Node v12.14

• Este problema sucede porque TailWinds usa la nueva versión de nodejs y bueno nosotros la mayoria de los usuarios de windows usamos componentes ya para usarse ustedes saben el típico next, next. Laragon por defecto viene con nodejs 12.14, por lo que debemos actualizar.

• Se lo explicare en pasos:

Paso 1: Descargar Nodejs

Debemos acceder a este link para descargar las versiones de nodejs, yo recomiendo node-v14.17.0-win-x64.zip
**link **->> https://nodejs.org/dist/latest-v14.x/ <<- luego de descargar procedemos a descomprimir.

Paso 2: Ubicar NodeJs

Debemos ubicar la ruta en nuestro computador donde esta instalado laragon, para mi caso lo instale en C:\laragon\bin\nodejs debemos copiar lo que descomprimiste dentro del directorio nodejs, si gustas le puedes cambiar el nombre.

Paso 3: Cambiar de version Node en Laragon Usando Interfaz

Debemos cambiar la versión, adjuntare una imagen que explica todo más fácil, pero dejare la descripción, podemos ubicar la interfaz de laragon y ubicar en la parte superior donde está el logo de Elefante la palabra MENU/Nodejs/Versión ahí podemos escoger nuestra versión.

• Imagen

Paso 4: Cerrar Consola y Reiniciar Laragon

Debemos cerrar todas consola donde y reiniciar Laragon en la palabra Recargar y listo eso es todo.

PD: La manera de validar si todo esta bien pues ejecuta el comando **node -v ** veras que ya instalada la versión y podrás ejecutar tu npm install && npm run dev

Eso es todo amigos!!!

Adjunto la fuente Fuente: https://www.youtube.com/watch?v=fGDUuPkKpq0

End

Si tienes este problema con “npm run dev”
.
“ERROR in ./resources/css/app.css Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): TypeError: The ‘compilation’ argument must be an instance of Compilation”

.

Revise su versión de Node(actualmente v15.7.0) y npm (v7.5.0). Si tienen ese problema es muy probable que lo solucionen instalando estas últimas versiones.

Me ocurrio lo mismo y pude solucionarlo editando el archivo webpack.mix.js, porque al principio aparece de la siguente manera:

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

El cual debe ser sustituido por el siguiente codigo:

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ]);

if (mix.inProduction()) {
    mix.version();
}

Luego en los head de las vistas se debe colocar el siguiente código

<!-- Styles -->
         <linkrel="stylesheet"href="{{ mix('css/app.css') }}">

@livewireStyles

<!-- Scripts -->
<scriptsrc="{{ mix('js/app.js') }}"defer></script>

y debe correr:

• npm run dev

• php artisan migrate

Por lo menos a mi me funciono

Para los que instalaron todo y aun no aparece en el top de welcome el boton de login y register deben entrar a welcome.blade.php debajo de body en el primer div eliminar la clase hidden.

En mi caso no me dejo correr el comando de “npm install” , puede ser obvio pero me toco instalar de la pagina de Node.js https://nodejs.org/es/ el gestor de paquetes de npm. Lo dejo por si alguien lo necesita.

En mi caso fallo la ejecución de npm usando homestead.
Para solucionarlo pueden ejecutar los comando usando yarn

yarn install

yarn run dev

Es practicamente lo mismo y funciona perfecto.

En windows: Tuve algunos problemas para ejecutar npm install y npm run dev, en caso de que le pueda servir a alguien, instalar node (última versión) y volver a ejecutar ambos comandos. Si les da

 Error: Unknown option '--hide-modules'

Entonces eliminen del package.json la opción --hide-modules y ejecuten nuevamente

Si no les carga los estilos en la vista de login hacer esto:

simplemente pegue dos líneas dentro de las vistas

resources/views/app.blade.php, guest.blade.php

en lugar de @vite así:

<link rel=“stylesheet” href="{{ asset(‘css/app.css’) }}">
<script src="{{ asset(‘js/app.js’) }}" defer></script>

Excelente que al profesor se le cancelo la instalación inicial, gracias a eso podemos ver otra forma de instalar el proyecto

Siempre que trabajes en equipo y si te traes un proyecto de un repositorio si o si te va tocar generar la llave de seguridad.
con el comando php artisan key:generate.
y se te creara una llave en el archivo .ENV

muy buena clase a mi me pasó que no cargaban los estilos y tuve que cambiar la parte del css y javascript de las vistas
app.blade.php y guest.blade.php unicamente cambie lo siguiente:

lo que tenia por default
<link rel=“stylesheet” href="{{ mix(‘css/app.css’) }}">
<script src="{{ mix(‘js/app.js’) }}" defer></script>

lo que agregué:

<link rel=“stylesheet” href="{{ asset(‘css/app.css’) }}">
<script src="{{ asset(‘js/app.js’) }}" defer></script>

si les genera error al ejecutar npm i pueden usar el siguiente comando:

npm install --save --legacy-peer-deps

Si tienen este problema pues – The Mix manifest does not exist when it does exist – o con correr npm
Instalen node.js 😃

Un capo realmente, ni si quiera se hace problema de resolver los errores sobre la marcha! 😅

Quiero personalizar los estilos css pero tengo problemas al incluir el archivo .css en blade

tengo error al momento de ejecutar npm run dev, hay que mencionar que ya le cambie y trabaje con algunas versiones de node y me salta el mismo error, actualmente estoy con la version 15 de node, estoy utilizando laragon como servidor…adjunto error.
Error: You are using an unspported version of Node. Please update to at least Node v12.14
at assertSupportedNodeVersion (C:\laragon\www\livewire8\node_modules\laravel-mix\src\Engine.js:6:15)
at executeScript (C:\laragon\www\livewire8\node_modules\laravel-mix\bin\cli.js:58:5)
at Command.<anonymous> (C:\laragon\www\livewire8\node_modules\laravel-mix\bin\cli.js:44:13)
at Command.listener [as _actionHandler] (C:\laragon\www\livewire8\node_modules\commander\index.js:426:31)
at Command._parseCommand (C:\laragon\www\livewire8\node_modules\commander\index.js:1002:14)
at Command._dispatchSubcommand (C:\laragon\www\livewire8\node_modules\commander\index.js:953:18)
at Command._parseCommand (C:\laragon\www\livewire8\node_modules\commander\index.js:979:12)
at Command.parse (C:\laragon\www\livewire8\node_modules\commander\index.js:801:10)
at Command.parseAsync (C:\laragon\www\livewire8\node_modules\commander\index.js:828:10)
at run (C:\laragon\www\livewire8\node_modules\laravel-mix\bin\cli.js:47:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: mix
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\pc_online\AppData\Roaming\npm-cache_logs\2021-02-05T21_47_13_472Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: npm run development
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\pc_online\AppData\Roaming\npm-cache_logs\2021-02-05T21_47_13_540Z-debug.log

Vamos bien!

al momento de ejecutar composer require laravel/jetstream me daba Fatal error: Allowed memory size of 1610612736 bytes exhausted (tried to allocate 4096 bytes) y no me dejaba instalar el paquete, como solución fue entrar a php.ini y buscar memory_limit = 512M y reemplazar por memory_limit = 4096M, reiniciar php. finalmente podemos ejecutar jetstream:install mediante, php artisan jetstream:install livewire.
espero les sea de su ayuda a los que les dio ese error

Oigan asi les funcione cuando instalen la primera vez, les recomiendo usar los comandos de npm para que cargue todo correctamente en cuando al colores letras diseños etc.