Es la primera vez en el curso que no me aparece ningun error. Agradecido con el de arriba!
Development
¿Qué vamos a aprender?
Introducción a SPA
Configurar el entorno de trabajo
Preparar Webpack
Templates
Crear el Home
Crear template de personajes
Crear página de error 404
Router
Crear rutas del sitio
Conectar las rutas con los templates
Implementar y probar las conexiones
Fetch Data
Obtener personajes con la función de llamado a la API
Conectar la función con la descripción de personajes
Deploy
Configurar CSS para administrar elementos visuales
Github Pages
Crear el script para enviar a producción
Repaso, recomendaciones y tips para seguir aprendiendo
You don't have access to this class
Keep learning! Join and start boosting your career
Creating a 404 error template is key to improving the user experience within a web application. This screen is displayed when a requested page is unavailable, and can be the difference between a visitor leaving frustrated and one who stays on your website. Below, we explore how to effectively implement this feature in your application.
It is essential to follow good practices when naming both the file and the constant in your code. This makes it easier to maintain and organize the project. Let's see how you can do it:
// Error404.jsconst Error404 = () => { return ( <div className="error404"> <h2>Error 404 - Pagenot found</h2> </div> );}
export default Error404;
File and constant name: Make sure that the file and constant have consistent names. In this example, both the file and the constant are named Error404
.
HTML structure: The basic structure in this case is a div
with a class named error404
, where an h2
is included to display the error message.
Function export: At the end of the code, export the function so that it can be reused elsewhere in the application.
Once the template has been created, it is vital to ensure that the browser can display this screen when necessary. Here is the process:
Structure verification: Check that everything in the Index
file is set up correctly, mainly the HTML structure inside the body
.
Generate the local development environment: Create a development environment with a script that allows you to reflect the changes in real time in the browser. Make sure to:
clear
on UNIX systems.npm start
This command will open a new tab in the browser where you can interact with your application.
Connection verification: Make sure that the application is connected correctly by checking that the HTML and scripts appear in your project. Although it will initially contain only basic structures, such as a console.log("Hello")
, it is crucial for connection confirmation.
After you have ensured that your development environment displays the template correctly, the next step is to integrate these elements into your main application. Later on, you will work on routing so that the different views connect efficiently. This will be explored in the next stages of the course.
Now that you have the basic knowledge on how to create and connect a 404 error template, it's time to apply it in your projects. Remember that being aware of best practices and maintaining a clear and organized structure will prove invaluable in your professional development. Keep exploring and learning!
Contributions 67
Questions 22
Es la primera vez en el curso que no me aparece ningun error. Agradecido con el de arriba!
PARA LOS QUE TIENEN ALGÚN ERROR AL EJECUTAR EL SCRIPT DE START:
En el script de start
del package.json
hacer el siguiente cambio, ya que en la nueva versión de webpack-cli funciona así
"start": "webpack serve --open --mode development"
alguien mas le pasa este error? 😦
Despues de toda esa configuracion, la emocion que senti cuando todo salio bien, no fue normal!!!
Eso es gracias a tan buen profesor!
Para limpiar la terminal también pueden pulsar las teclas:
Ctrl + L
me compilo bien, pero no me aparecio el hello en la consola
const Error404 = () => {
const view = `
<div class="Error404">
<h2>Error 404</h2>
</div>`;
return view;
};
export default Error404;
Wenas a tod@s;
Para los que tengan errores cuando dan en la terminal npm run start, esta es la solucion que encontre:
Cambiar en el archivo package.json el script
“start”: “webpack-dev-server --open --mode development”
por
“start”: “webpack serve --open --mode development --env development”
Dejenme saber si les funciono.
Aqui el link de la info.
<h1> Para quienes les da error </h1>
ESTE ERROR ME PASO EL DIA 21/11/2020
No se si mañana esto siga funcionando cualquier cosa comentan
Si tenes errores a la hora de usar el
npm run start
Intenta actualizar Webpack, webpack server, webpack cli, webpack-dev-server, etc (googleando se encuentra pero en ingles)
y si aun asi te da error como a mi cambia en el PACKAGE.JSON la linea que dice
"start": "webpack-dev-server --open --mode development"
por
"start": "webpack serve"
Espero les sirva, y si dejan un corazon para que la respuesta se posicione primera estariamos ayudando a mucha gente.
Saludos y no se frustren como yo jajajj
¿Cómo puedo poner el inspector de elementos en chrome en modo oscuro?
Tengo el siguiente error:
[email protected] start C:\Users\RobertDev\Documents\Cursos\5.CursoSinglePageApp\cientifico
webpack-dev-server --open -mode -development
internal/validators.js:112
throw new ERR_INVALID_ARG_TYPE(name, ‘string’, value);
^
TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type object
at validateString (internal/validators.js:112:11)
at Object.isAbsolute (path.js:353:5)
at module.exports (C:\Users\RobertDev\Documents\Cursos\5.CursoSinglePageApp\cientifico\node_modules\webpack-cli\bin\utils\convert-argv.js:34:13)
at Object.<anonymous> (C:\Users\RobertDev\Documents\Cursos\5.CursoSinglePageApp\cientifico\node_modules\webpack-dev-server\bin\webpack-dev-server.js:84:40)
at Module._compile (internal/modules/cjs/loader.js:955:30)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
at internal/main/run_main_module.js:17:11 {
code: ‘ERR_INVALID_ARG_TYPE’
}
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\RobertDev\AppData\Roaming\npm-cache_logs\2020-07-13T22_35_20_056Z-debug.log
En el editor de código abrí la pantalla dividida. De un lado el código que yo escribí siguiendo al profesor y del otro, el archivo final que se comparte en la sección de recursos.
Bueno, miré línea a línea, letra a letra. Pusé los códigos indentados igual y desde la terminal puse:
diff miArchivo.config.js archivoProfe.config.js
Y ahí lo ví.
Había escrito mal module.exports. En su lugar puse module.export sin la S final.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// module.export = { // Así estaba y no funcionaba
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
resolve: {
extensions: ['.js'],
},
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new HtmlWebpackPlugin([
{
inject: true,
template: './public/index.html',
filename: './index.html',
}
])
]
}
Para evitar el error 404 de favicon, solo escribe esta linea en el head del HTML:
<link rel="shortcut icon" href="" type="image/x-icon">
El error sucede por que no encuentra el icono que iría en la pestaña
A alguien mas en la consola de chrome le da el siguiente error?
DevTools failed to parse SourceMap:
Error: Cannot find module ‘webpack-cli/bin/config-yargs’, si alguien tuvo este error es por la version del webpack cli.
En mi caso con este comando lo solucione:
npm install [email protected]
Al dìa de hoy 5/11/2020:
Error: Cannot find module ‘webpack-cli/bin/config-yargs’, el que le haya salido esto, puede instalar: npm i [email protected] en esta versiòn y luego coloca nuevamente el comando npm start y funciona.
😃
Dejo mi repositorio en el cual podrán encontrar una rama por cada clase en adelante.
Aqui esta mi resumen de estos dos primeros modulos
es mas que nada codigo pero sirve para reforsar
notion.so
client:6 Uncaught Error: Cannot find module 'strip-ansi’
at webpackMissingModule (webpack:///(:8080/webpack)-dev-server/client?:6:81)
at Object.eval (webpack:///(:8080/webpack)-dev-server/client?:6:166)
at eval (webpack:///(:8080/webpack)-dev-server/client?:177:30)
at Object…/node_modules/webpack-dev-server/client/index.js?http://localhost:8080 (main.js:97)
at webpack_require (main.js:20)
at eval (webpack:///multi_(:8080/webpack)-dev-server/client?:1:1)
at Object.0 (main.js:130)
at webpack_require (main.js:20)
at main.js:84
at main.js:87
me sale este error en consola
Para quienes sigan teniendo el problema de npm start
o npm run start
y ya probaron de todo, esta es una solución que se da en la siguiente clase y con esto se corrije.
La solución es eliminar los corchetes que no deberían ir. Alguien ya dio la solución en las primera clases pero no sabía exactamente cómo debía quedar y en la siguiente clase lo explica.
HTTP response status codes
https://developer.mozilla.org/en-US/docs/Web/HTTP/Status
const Error404=()=>{const view=`
<div class="Error404">
<h2>Error 404</h2>
</div>
`;return view;};export default Error404;
Hola Comunidad 🤘
A la fecha de 6 de abril del 2022, estas son las versiones de Webpack que me han funcionado para realizar el curso hasta el momento.
"devDependencies": {
"copy-webpack-plugin": "^6.4.1",
"html-webpack-plugin": "^4.5.2",
"webpack": "^5.71.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.8.1"
}
Para los que como yo no les aparece el “hello” en consola, prueben agreegar esto al webpack.config.js:
devServer: {
static: './dist',
},
Yo lo agregué antes de los plugiins y funcionó. Saludos.
const Error404 = ()=>{
const view = `
<div class="Error404">
<h2>Error 404 </h2>
</div>
`;
return view;
}
export default Error404;
Un trucazo, en la parte final de las pestañas de los files abiertos damos doble click para generar un file nuevo pero temporal:
.
.
Posteriormente seleccionamos el lenguaje a html:
.
Con esto podemos escribir nuestra estructura html rapidamente y luego copiar y pegar en nuestro file js. Al cerrar la ventana del html temporal le decimos que no queremos guardar y listo!
Hola, ayuda please
Esto es lo que me sale:
[email protected] start
webpack serve --open --mode development
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
carlosarturomt-Aspire-A315-51%
"start": "npx webpack serve --open --mode development"
Hola, si a alguien le genera el error el script start, les dejo como me funciono a mi, lo hice con
npx webpack serve
fui directo a la documentación de web pack y encontré que la manera de trabajar con web pack-server es esta, espero les ayude en algo, igual les dejo la documentación.
Hoy en día ya no es necesario agregar el run para ejecutar el comando start, basta con hacer:
npm start
"scripts": {
"build": "webpack --mode production",
"start" : "webpack server --open --mode development"
Template Error404
const Error404 = () => {
const view = `
<div class="Error404">
<h2>Error 404</h2>
</div>
`;
return view;
};
export default Error404;
Para los que no les compiló, agreguen el flag --env development al script start, con eso solucinan el problema de las versiones…
Hola que tal, como podria cambiar el puerto que viene por default a uno customizable?
x localhost:8080
o localhost:customizable
gracias
Resumen de la clase:
En la carpeta pages creamos un archivo llamado Error404.js
const Error404 = () =>{
const view =
`
<div class="Error404">
<h2>Error404</h2>
</div>
`
return view;
}
export default Error404;
Continuamos con la ejecucion del proyecto.
Para ello ejecutamos el comando:
npm run start
Si tienes el siguiente error:
Error: Cannot find module ‘webpack-cli/bin/config-yargs’
Es por la version del webpack cli.
npm install [email protected]
3 horas tratando de resolver el error de cannot find module, tuve que modificar el webpack-dev-server.js
Excelente sin errores!!
Para mí fortuna todo salió bien !!
Es repetitiva la tarea de crear templates pero me agrado por que se me quedo pegado la forma en que se hace
estupendo sigamos 😄
Todo bien!
vamos al siguiente modulo!
Que geniaaaal, vamos bien
Tengo un error:
ELIFECYCLE
1
[email protected] start: webpack-dev-server --open --mode development
Exit status 1
Failed at the [email protected] start script.
Copie los archivos del profe, reinstale las dependencias npm, usé los archivos del compañero Fernando Vallejo y me sigue dando el mismo error.
Perfecto, ya he visto procedimientos parecidos como React y algunos Frameworks CSS, sigamos!
Yo tuve un problema al instalar el dev server y lo intenté instalar de nuevo pero me sigue saliendo el mismo error, adjunto la imagen del error que me sale por si alguien me puede ayudar , gracias.
Qué genial es no tener ningún error ni vulnerabilidad jajaja
{
"name": "cientifico",
"version": "1.0.0",
"description": "single page application",
"main": "index.js",
"scripts": {
"build":"webpack --mode production",
"start": "webpack-dev-server --open --mode development"
},
"keywords": [
"javascript"
],
"author": "Wilkins Brito",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.11.6",
"babel-loader": "^8.1.0",
"html-webpack-plugin": "^4.5.0",
"webpack": "^5.0.0",
"webpack-cli": "^4.0.0",
"webpack-dev-server": "^3.11.0"
}
}
cuando todo funciona de maravilla y sale ese compiled successfully, aunque no sea mucho se siente mas q bien 👏💚
Bom dia! ❤️
Listo y sin errores!!!.😁😎😃👍👌
,
compress: true,
historyApiFallback: true,
port: 3005
}
Ya completamos los Template del proyecto, ahora vamos con el Router.
Si a alguien mas le salta el error :
Cannot find module 'webpack-cli/bin/config-yargs’
yo lo arreglé cambiando “webpack-dev-server” a “webpack serve” en el Script
Hay un error de typo en webpack.config.js (falta el punto).
resolve: {
extensions: ['.js']
},
¡Gracias Jorge Llanque!
Si les falla hoy dia webpack-dev-server, simpre pueden iniciar su server en webpack en modo dev y pasando el mod env
"dev": "webpack serve --mode development --env development"```
Para la version 5 de webpack, no funciona webpack-dev-server, por lo tanto se sugiere cambiar el script de start de la siguiente manera:
"start": "webpack serve --open --mode development"
Para los que les marque error, prueben actualizando el webpack-cli a la version 4 les pedira actualizar webpack, a mi me funciono.
¿Alguien sabría porqu’e se me presenta el error al intentar correr el script de start?
dice qu eno encuentra el modulo en node_modules, ya borré la carpeta y reinstale todo de nuevo. revisé los archivos y no tengo typos, al menos si hay alguno no lo encuentro.
> 100tifico@1.0.0 start /mnt/c/Users/vrodriguez/Documents/Vilma/Otros/coding/100tifico
> webpack-dev-server --open --mode development
internal/modules/cjs/loader.js:638
throw err;
^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (/mnt/c/Users/vrodriguez/Documents/Vilma/Otros/coding/100tifico/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! 100tifico@1.0.0 start: `webpack-dev-server --open --mode development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the 100tifico@1.0.0 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! /home/vrodriguez/.npm/_logs/2020-11-30T05_28_56_560Z-debug.log
The terminal process "C:\WINDOWS\System32\wsl.exe -e npm run start" terminated with exit code: 1.
Terminal will be reused by tasks, press any key to close it.
capaz si alguno le pasa que salen mil quinientos errores en git y no les abre la pestaña de google
npm install webpack webpack-cli --save-dev
puse eso y me funciono
Me aparece err! code ENOENT
Para los que tienen el siguiente error :
Cannot find module ‘webpack-cli/bin/config-yargs’
Deben de instalar la version 3 de webpack-cli, al aprecer las nuevas versiones no son compatibles.
les dejo los pasos necesarios:
1.- ) Copia y pega en la terminal
npm install -D webpack-cli@3
2.- ) ejecuta
npm run start
y ya…! 😄
Alguien podría ayudarme con este error?
Want to see more contributions, questions and answers from the community?