Crear rutas del sitio

Les recomiendo instalar el plugin Relative path para buscar rápidamente sus archivos.

Para los que le sale el error en cosola, a partir de Babel 7 debemos instalar @babel/polyfill deben… para eso deben hacer lo siguiente:

1. En la terminal ejecutan npm install --save @babel/polyfill

2. Van al archivo webpack.config.js y en “entry” agregan:

entry: ['@babel/polyfill', './src/index.js'],

Despues de eso corren el comando “build” y luego el comando “start” y chequen si ya no les sale el error en consola y lo mas importante que les aparezca el header!

Una hora buscando un bug y resulta que en webpack.config.js escribí templade , en lugar de template. Odio cuando eso pasa jaja.

Me voy a hacer bolas con tanto archivo index

todo esto se parece mucho a crear componentes en React

import Header from '../templates/Header';
import Home from '../pages/Home';
import Character from '../pages/Character';
import Error404 from '../pages/Error404';

// ROUTES TO BE RENDER
const  routes = {
    '/': Home,
    '/:id': Character,
    '/contact': 'Contact',
};

//ROUTER
const router = async () => {
    // stablishing templates to dom
    const header = null || document.getElementById('Header');
    const content = null || document.getElementById('content');

    header.innerHTML = await Header();
};

export default router;```

En muchos cursos veo el problema de que avanzan mucho con el codigo sin ir mostrando resultados de a pocos, creo que asi seria mas logico para alguien nuevo como y porque suceden las cosas.

Si llegas a tener un error referido a regeneratorRuntime es debido al asincronismo. Estuve toda la tarde de viendo cómo solucionarlo y resultó ser bastante sencillo. Les sugiero que lean y comprendan bien lo que pasa para saber el por qué del proceso

¿Por qué el problema?

Babel utiliza multiples modulos pequeños para hacer funcionar ciertas de sus caracteristicas. Una cosa a tener en cuenta es que transpilar el codigo no lo hace 100% compatible con navegadores antiguos, a veces es necesario acompañarlo de polyfills (fragmentos de código que emulan una funcion del lenguaje en caso de no tenerla disponible)

Una de las cosas que no soporta Babel de por sí son las funciones asíncronas, por lo que tenemos que darles soporte a partir de una librería. El profe en la clase de preparacion de webpack instala una, pero haciendo otro proyecto no me funcionó.

Para darle soporte general a metodos del lenguaje anteriormente Babel utilizaba un modulo propio llamado @babel/polyfill, que era una combinacion de 2 modulos independientes llamados core-js y regenerator-runtime. Este fue deprecado en la version 7. Por lo que ahora nos conviene directamente importar ambos módulos

Instalación de las librerías

Primero instalan las siguientes librerías en npm o yarn:

npm install core-js
npm install regenerator-runtime

luego en el archivo principal de su aplicacion (index.js) lo importan

// CommonJS
require("regenerator-runtime/runtime");
 
// ECMAScript 2015
import "regenerator-runtime/runtime.js";

Péro ¿Por qué estos archivos?

Core-JS es una librería super util que reune un monton de polyfills que podés importar de forma general o específica. COmo buena practica, para evitar que tu programa sea pesado, se recomienda importar solamente los polyfills de los features que vayas a utilizar (ej, async, promesas, clases) Pero comó descubrí todo esto ayer lo reduzco a importarlo de forma general como hice arriba jeje 😛

Regenerator-Runtime es una librería que principalmente le da soporte a las funciones asincronas en entornos donde no son soportadas. Me imagino que tendrá otras funciones, pero principalmente se la usa por ese motivo. Realmente para que no nos de error solo es necesario ésta librería, pero acordemonos de que nuestra intención es darle soporte a todos los navegadores posibles

Sugiero entender bien el uso de ambas librerías porque son muy importantes y les será de mucha ayuda cuando sean avanzados

Enlaces para entrar en contexto (en ingles)

regenerator-runtime - npm

core-js - npm

Babel polyfill is dead. Long live core-js!

What is regenerator-runtime npm package used for?

Esta es toda la explicación, es problable que no sea 100% rigurosa, por lo que si tienen algo que aclarar o corregir, su feedback es bienvenido ^-^

si hay que reiniciar el server para que funcione correcto!

A los que tengan un error como este ReferenceError: regeneratorRuntime is not defined en consola, hagan lo siguiente:

instalar las siguientes dependencias :

npm install --save core-js
npm install --save regenerator-runtime  

Luego en el archivo index,js (el que se encuentra en el root de src), importar las siguientes librerias:

import "core-js/stable"; //importar esta lib
import "regenerator-runtime/runtime"; //importar esta otra lib
import router from './routes/index';

window.addEventListener('load', router);

Ahora entiendo porque pusimos en el fichero Home.js lo siguiente:

<a href="#/1/">

Cuando pulsemos en el link. Nos llevará a la ruta personalizada de cada Character.js
En este caso cada id corresponderá a cada uno de los personajes que metamos.

😄 No lo entendía hasta ahora…

Para los que no entienden porque el profe usa Await en la funcion Header().

1. Para esperar el Render del DOM.
2. El profe usa el evento “load” , este evento se utiliza para saber si la pagina ha cargado. Sin embargo, cuando hablamos de render en el DOM hablamos de estados.
3. Los estados son pasos que va cumpliendo el DOM hasta llegar al render final de la web, estos son:

• Loading: cargando
• Interactive: el documento ha cargado y ha sido parseado. Pero sub recursos como estilos, imagenes, scripts, frames aun no.
• DomContentLoaded, la pagina cargo correctamente. Sin necesidad de esperar que cargen los estilos, scripts y imagenes.
  (Y esto para que? Bueno aqui ya podemos acceder al DOM porque sus nodos esta fully cargados y no dependen de los estilos, es decir, el tree HTML esta listo Construido)
• Complete: La página cargó con todos los recursos, imagenes, estilos y scripts y esta a punto de lanzar el evento “Load”
  -Load: La página entera cargada y terminada.

Ahora, tenemos que esperar todos estos pasos para ejecutar esta función? No necesariamente, porque aunque sabemos que la construcción de todo esto se hace demaciado rapido. Cuando queremos acceder, nuestras funciones también acceden demasiado rapido, y podemos estar haciendo un request de algo al DOM que aun no existe.

Con await, le decimos a nuestra función. Ejecutante si y sólo si. El evento “load” ya ha sido lanzado, has un await de esto.

Aqui les muestro el LOG de los Eventos. Un imagen vale mas que 1000 palabras.

Espero les sirva de ayuda!

Avanzando super animado con el curso.

Por esto me gusta mucho TypeScript por encima de Babel, nos ayuda a resolver posibles problemas antes de correr nuestra aplicacion.
Al principio se puede sentir muy pesado o inneceario para aplicaciones pequeñas, pero vale muchisimo la pena con el tiempo, con practica se te vuelve normal y desarrollas incluso mas rapido detectando errores mas temprano.

Por que me construye la aplicacion pero no me aparece el header?

En la versión actual de Webpack, para utilizar babel hace falta crear un archivo .babelrc y crear un objeto con una especificación de como manejará nuestro código. Pero primero hay que ir a npm y:
npm i @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime babel-loader -D

    "presets": [
        "@babel/preset-env" //Estó es lo que nos permite trabajar con JavaScript moderno y babel lo transpile a versiones entendibles para los navegadores.
    ],
    "plugins": [
        "@babel/plugin-transform-runtime" // ESTE ES MUY IMPORTANTE PARA LA CLASE. Este plugin nos permite trabajar con funciones asincronas(promesas, async/await, cb) Así que si vienes del curso de Webpack, recuerda utilizar estas configuraciones. Y si no lo has hecho. agrega estas configuraciones y espero te ayude
    ]
}```

Que genial! Seguramente si el reto hubiera sido detectar este bug hubiera sido un dolor de cabeza jaja

En mi caso tenia un typo en “./public…” ufff ahhhaah

Resumen de la clase:

Crear las rutas del sitio

Nos movemos a la carpeta routes y creamos el archivo index.js

import Header from '../templates/Header';
import Home from '../pages/home';
import Characters from '../pages/Character';
import Error404 from '../pages/Error404';

const routes = {
    '/': Home,
    '/:id': Characters,
    '/Contact': 'Contact',
}

// Creamos el router

const router = async () => {
    const header = null || document.getElementById('header');
    const content = null || document.getElementById('content');

    header.innerHTML = await Header();
    
}

export default router;import Header from '../templates/Header';
import Home from '../pages/home';
import Characters from '../pages/Character';
import Error404 from '../pages/Error404';

const routes = {
    '/': Home,
    '/:id': Characters,
    '/Contact': 'Contact',
}

// Creamos el router

const router = async () => {
    const header = null || document.getElementById('header');
    const content = null || document.getElementById('content');

    header.innerHTML = await Header();
    
}

export default router;

Esto de implementar templates de HTML en Js dentro del DOM es muy interesante.

Si no van con afan, les recomiendo al terminar la seccion 4, borrar la carpeta y empezar otra vez el curso, se entiende mucho mas el repetir ya que js al inicio es complicado

Yo he tenido problemas con webpack-cli porque desde la versión 4.0 ha habido cambios en su estructura de carpetas por lo que ya no es compatible con webpack-dev-server, ahora les recomiendo usar el siguiente script

"start": "webpack serve"

y agregar las siguientes lineas al webpack.config.js

devServer: {
    port: 3000,
    open: true,
  },

import router from './routes'

window.addEventListener('load', router);```

import Header from '../templates/Header';
import Home from '../pages/Home';
import Character from '../pages/Character';
import Error404 from '../pages/Error404';

//rutas
const routes = {
    '/': Home, // establecemos la ruta:hace render de Home
    '/:id': Character, // ruta con valor dinamico id: hace render en los personajes
    '/contact': 'Contact', // establecemos la ruta: y este hace render de Contact
}

//manejador(obtener valores y com utilizarlos)
const router = async() => {
    const header = null || document.getElementById('header'); // Elemento header hacia donde voy hacer el render
    const content = null || document.getElementById('content'); // Elemento content hacia donde voy hacer el render

    header.innerHTML = await Header();
};
export default router;```

Para los que NO les carga el codigo del template del header al final de este video, hagan los siguiente:

1. Instalen el plugin por linea de comando,escribanlo asi: npm install @babel/plugin-transform-runtime -D

2. Luego agreguen un archivo en la raiz del proyecto y llamenlo: .babelrc —> el punto al inicio es un indicador de que es un archivo oculto;

3. En este archivo agreguen este plugin de runtime, la forma como lo tienen que hacer lo pueden ver en el minuto 4:10 de la clase 6 llamado “Babel Loader para Javascript” , del curso de WEBPACK que tambien esta en esta escuela. En ese video, Oscar Barajas explica bien como se tiene que escribir tal plugin.

4. Por ultimo vuelva a ejecutar el codigo: npm run start

A mi me funcionó luego de tener en cuenta todo eso !!

Exitos !!

Excelente que haya aparecido ese error, es lo que vivimos día a día, lo interesante es que mientras más programamos, más sencillo es resolver estos errores.

Parezco un niño, pero me emociono mucho cuando funciono 💚

Podemos crear alias con webpack, para que sea un poco mas fácil importar las paginas y templates. Tenemos que ir al archivo de configuración de webpack y en resolve agregar una nueva propiedad llamada alias

    resolve: {
        extensions: ['.js'],
        alias: {
          '@styles': path.resolve(__dirname,'src/styles'),
          '@pages': path.resolve(__dirname,'src/pages'),
          '@routes': path.resolve(__dirname,'src/routes'),
          '@utils': path.resolve(__dirname,'src/utils'),
          '@template': path.resolve(__dirname, 'src/templates')

        }
     },****

A mi no me salio el error de ‘innerHTML’

Profe Oscar y compañeros de Platzi, despejenme de una duda, de las muchas que tengo sobre JS. Se puede hacer una app que suba archivos PDF, los descargue, administre usuarios y maneje perfiles solo con Vanilla…?? O se debe usar alguna herramienta de JS como REACT JS o Angular…?

¡MIlagro! No tuve ni un solo error esta vez. 😃

Tuve varios errores pero analizando cada linea de código pude verificar varios typos.

Un error de comillas en el header …respiro profundo. vamos bien ahora

A mi me paso que no reconocio el archivos Index.js importando de asi:

import router from './routes';

Fui más especifico:

import router from './routes/Index';

Por lo menos no fue necesaria la extension, casi se me rompe la cabeza buscando cual era el problema jeje.

ayuaaaaa me vota esto

tml Webpack Plugin: 
  Error: Child compilation failed:
  Entry module not found: Error: Can't resolve 'C:\Users\Juan Pablo\Desktop\ejer  cicio platzi\cientifico\public\index.html' in 'C:\Users\Juan Pablo\Desktop\eje  rcicio platzi\cientifico':
  Error: Can't resolve 'C:\Users\Juan Pablo\Desktop\ejercicio platzi\cientifico\  public\index.html' in 'C:\Users\Juan Pablo\Desktop\ejercicio platzi\cientifico  '
  
  - child-compiler.js:122 
    [cientifico]/[html-webpack-plugin]/lib/child-compiler.js:122:18
  
  - Compiler.js:343 
    [cientifico]/[webpack]/lib/Compiler.js:343:11
  
  - Compiler.js:681 
    [cientifico]/[webpack]/lib/Compiler.js:681:15
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [cientifico]/[tapable]/lib/Hook.js:154:20
  
  - Compiler.js:678 
    [cientifico]/[webpack]/lib/Compiler.js:678:31
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [cientifico]/[tapable]/lib/Hook.js:154:20
  
  - Compilation.js:1423 
    [cientifico]/[webpack]/lib/Compilation.js:1423:35

Aguas con los typos

Algo que no aparece en los repos de esta clase es la línea que llama el JS en el archivo HTML. 😉
Recuerden que eso puede hacerse de muchas formas, pero
<script src="../src/index.js"></script>
Puede ser una de ellas

Me sale este error, alguien por ahi que me ayude? 😦 Gracias!

¿Si quiero usar Bootstrap donde tendría que poner los scripts?

Despues de varios errores ya funciona jejeje

tengo una duda en el archivo index el profe hace un import router from ‘…/routes’; no deberia agregar /index ejemplo :
import router from ‘…/routes/index.js’;

como haces para que el indexado te salga de colores??

Genial

Wow!!! Increíble. Dudo haber podido encontrar un problema así de específico en una herramienta que he usado tan poco 😃.

Recordatorio: Siempre mirar la documentación!

Tengan cuidado cuando son confiados con el autocompletafo. Yo lo utilice para el getElementById y me colocó getElementsById jaja

Rutas

import Header from '../templates/Header';
import Home from '../pages/Home';
import Character from '../pages/Character';
import Error404 from '../pages/Error404';

const routes = {
    '/': Home,
    '/:id': Character,
    '/contact': 'Contact',
}

const router = async() => {
    const header = null || document.getElementById('header');
    const content = null || document.getElementById('content');

    header.innerHTML = await Header();
}

export default router;

Por si alguien tiene el siguiente error en consola:

Uncaught (in promise) TypeError: Object(...) is not a function
    at router

Solucion: deben de quitar los parentesis aqui:

header.innerHTML = await Header

Si tienen errores de runtime, agregar:

npm install core-js regenerator-runtime

Luego importar al ‘index.js’:

    import "core-js/stable";
    import "regenerator-runtime/runtime";

A mi no me estaba funcionando dado que en el HTML tenia los id de los objetos como ‘header’ en minúscula, y al momento de hacer el document.getElementById(‘Header’) colocaba ‘Header’ con mayúscula, por este sencillo typo no me funcionaba la aplicación, para que lo tengan en cuenta chicos.

Routes/ index.js

import Header from '../templates/Header';
import Home from '../pages/Home';
import Character from '../pages/Character';
import Error404 from '../pages/Error404';

const routes = {
    '/': Home,
    '/:id': Character,
    '/contact': 'Contact'
};

const router = async () => {
    const header = null || document.getElementById('header');
    const content = null || document.getElementById('content');

    header.innerHTML = await Header();
};

export default router;

Una vez que ejecutamos en comando npm run start.
¿Que comando debo utilizar para poder seguir usando la terminal?

asi cuando te sale más de un error jajajajajajaja

Vaya, sin ayuda de Oscar creo que hubiera sido imposible encontrar ese error, Que gran curso, A pesar de no haber realizado algunos curso ya que sigo con la carrera de Desarrollo FrontEnd, se entiende perfectamente lo que estamos haciendo

Hola! una pregunta que no me quedo claro, por que coloca la funcion router como asincrona ? muchas gracias de antemano

import router from './routes'

window.onload = router```

…A mi, despues de revisar el codigo y darle un monton de vueltas me funciono agregandole en el html el script llamando a main.js y en la consola ejecutando la opcion npx webpack

Para los que este usando webpack 5 los comandos para el package.json serían los siguientes.

  "scripts": {
    "build": "webpack",
    "start": "webpack serve --open"
  },

Si utilizan alias, no tienen que escribir esas rutas no tan friendlys para leer:
.
webpack.config.js

resolve: {
        extensions: [".js"],
        alias: {
            '@templates': path.resolve(__dirname, 'src/templates/'),
            '@pages': path.resolve(__dirname, 'src/pages/'),
            '@utils': path.resolve(__dirname, 'src/utils/')
        }

    },

routes/index.js

import Header from "@templates/Header";
import Home from "@pages/Home";
import Character from "@pages/Character"; 
import Error404 from "@pages/Error404";
import getHash from "@utils/getHash";
import resolveRoutes from "@utils/resolveRoutes";

Un gran “tip”, para los que estén haciendo éste curso. Vayan ahora mismo (abrir otra ventana), y vean el curso de webpack (nuevo). Pueden ir viendo ambos cursos (complementan), para que les ayude a resolver dudas.

import Home from '../Page/Home'
import Character from '../Page/Characters'
import Error404 from '../Page/Error404'
import Header from '../templates/Header'

const routes={
    '/': Home,
    '/:id': Character,
    '/contact': 'Contact'
}

const router = async()=>{
    const header = null || document.getElementById('header');
    const content = null || document.getElementById('content');

    header.innerHTML=await Home();
};

export default router;

Algo muy interesante que veo, es… que si el maestro se equivoca en algo js le sigue jalando. Como lo fue con --mode.

En la 4 clase al maestro le jaló el dist y en main le arrojó como si nada todo el código mientras que a mí no, ahora con esta solución que nos dio ahora si da al 100.

tenia el mismo problema lo solucione y tampoco me dio pase mas de 1 hora tratando de solucionarlo hasta que lei un comentario donde decia reinicia lo hice y me funciono XD

Ese error no lo habría encontrado nunca

Oscar es un muy buen profesor, es de los pocos cursos que he hecho que no me estrello con errores graves.

f

porque en el router también se le llama index.js ¿se puede llamar router.js por ejemplo? o es necesario el index

¿Es normal que tengamos más de un archivo index.js?

Cuando ustedes le asignan un id a un elemento de HTML, también lo pueden llamar así:

<div id="miSeccion">

//En el archivo de JavaScript lo pueden obtener así

window.miSeccion

No es buena práctica, es sólo otra forma de obtener los elementos 😄

Tengo este error y no he podido solucionarlo. Alguien podria ayudarme? Gracias.

me pase casi un día y medio tratando de encontrar un error que no se reflejaba en consola del navegador ni en la terminal, ya me había frustrado demasiado y observando mi código me percate de un typo el cual tenia puesto

 header.innerHtml = await Header();

y no funcionaba simplemente por que Html debe ir en mayúsculas de la siguiente manera

 header.innerHTML = await Header();

Quizás no iba a encontrar este error, solo por que lo comencé a comparar con el código de la clase me di cuenta

Me aparece este error:
C:\Users\patricio\cientifico>npm run start

[email protected] start C:\Users\patricio\cientifico
webpack-dev-server --open --mode development

internal/modules/cjs/loader.js:883
throw err;
^

Error: Cannot find module 'webpack-cli/bin/config-yargs’
Require stack:

• C:\Users\patricio\cientifico\node_modules\webpack-dev-server\bin\webpack-dev-server.js
  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
  at Function.Module._load (internal/modules/cjs/loader.js:725:27)
  at Module.require (internal/modules/cjs/loader.js:952:19)
  at require (internal/modules/cjs/helpers.js:88:18)
  at Object.<anonymous> (C:\Users\patricio\cientifico\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
  at Module._compile (internal/modules/cjs/loader.js:1063:30)
  at Object.Module._extensions…js (internal/modules/cjs/loader.js:1092:10)
  at Module.load (internal/modules/cjs/loader.js:928:32)
  at Function.Module._load (internal/modules/cjs/loader.js:769:14)
  at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {
  code: ‘MODULE_NOT_FOUND’,
  requireStack: [
  ‘C:\Users\patricio\cientifico\node_modules\webpack-dev-server\bin\webpack-dev-server.js’
  ]
  }
  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! [email protected] start: webpack-dev-server --open --mode development
  npm ERR! Exit status 1
  npm ERR!
  npm ERR! Failed at the [email protected] start 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\patricio\AppData\Roaming\npm-cache_logs\2021-02-08T20_35_18_960Z-debug.log

Dejo los imports por aqui por si ha alguien les sirve

import Header from "../templates/Header"
import Home from "../pages/Home"
import Charater from "../pages/Character"
import Error404 from "../pages/Error404"

Creo si no estoy mal, nativamente (sin un precompilador como webpack) un import sin la extension .js no se puede realizar, digamos JS vanilla, vanilla. xdd