Curso de Single Page Application con JavaScript Vanilla

Curso de Single Page Application con JavaScript Vanilla

Instruido por:
Oscar Barajas Tavares
Oscar Barajas Tavares
Básico
2 horas de contenido
Ver la ruta de aprendizaje
100tifi.co
Proyecto del curso
100tifi.co

Crea una aplicación web de página única y cárgala con información usando JavaScript Vanilla. Diseña una experiencia fluida para tus usuarios llamando a una API para mostrar la información y navegar entre los detalles de cada personaje.

Curso de Single Page Application con JavaScript Vanilla

Curso de Single Page Application con JavaScript Vanilla

Progreso del curso:0/16contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/16contenidos(0%)

Development

Material Thumbnail

¿Qué vamos a aprender?

01:07 min

Material Thumbnail

Introducción a SPA

04:23 min

Material Thumbnail

Configurar el entorno de trabajo

04:23 min

Templates

Material Thumbnail

Crear template de personajes

09:01 min

Material Thumbnail

Crear página de error 404

03:46 min

Router

Material Thumbnail

Crear rutas del sitio

13:02 min

Material Thumbnail

Conectar las rutas con los templates

10:27 min

Material Thumbnail

Implementar y probar las conexiones

06:20 min

Fetch Data

Material Thumbnail

Obtener personajes con la función de llamado a la API

10:21 min

Material Thumbnail

Conectar la función con la descripción de personajes

06:18 min

Deploy

Material Thumbnail

Configurar CSS para administrar elementos visuales

07:26 min

Material Thumbnail

Crear el script para enviar a producción

04:41 min

Material Thumbnail

Repaso, recomendaciones y tips para seguir aprendiendo

01:50 min

nuevosmás votadossin responder
John Ruiz
John Ruiz
Estudiante

Wenas a [email protected];

Estoy intentado sin tener exito, de porque el error que me muestra TRAVIS. He realizado todos los pasos posibles. He comprobado el TOKEN en github el archivo de .yml:
travis.jpg

Aqui al parecer hay un error en el package.json, donde dice que no hay repositorio y error con el test:
error.jpg

Pero no logro, que se genere el deploy.

Les agradesco de antemano si me ayudan a ver la luz o el porque de estos errores

Gracias.

0
Luis Diego Aguilar Ruiz
Luis Diego Aguilar Ruiz
Estudiante

Hola amigos, queria preguntar si alguien sabe que significa el error de la imagen, ya que revisado el código usando las alertas que me da la plataforma de travis, he incluso visto los comentarios de esta clase y he intentado con el código que un compañero compartió en los aportes de la clase pero sigue sin funcionar, agradeceria su apoyo.

Este es el error:
Captura de Pantalla 2021-04-26 a la(s) 10.52.41.png

Este es mi codigo:

language: node_js
cache:
directories:
- ~/.npm
node_js:

  • "12"
    git:
    depth: 3
    script:
    • yarn build
      deploy:
      provider: pages
      edge: true
      cleanup: true
      keep-history: true
      github-token: $GITHUB_TOKEN
      local-dir: dist/
      target-branch: gh-pages
      commit_message: "Deploy Release"
      on:
      branch: main

tambien intente con skip-cleanup pero me salia que no tenía que usar el skip-cleanup, por eso lo quite, pero agradeceria si alguien me pudiera ayudar o darme una idea de cuál podría ser el problema.

De antemano, muchas gracias

0
Johann Rios
Johann Rios
Estudiante

tengo este error al tratar de hacer el build en Travis. ya intenté generando un nuevo token . copié los scripts de algunos compañeros del archivo .travis.yml y nada. alguna idea de lo que pueda estar pasando?

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
The command "yarn build" exited with 2.
cache.2
store build cache
Done. Your build exited with 1.
0
Jose Luis Higuera Caraveo
Jose Luis Higuera Caraveo
Estudiante

Porque en el Index.js principal se importan las rutas de la siguiente manera:

import router from'./routes';

y no direccionando directamente al archivo index.js dentro de la carpeta routes

import router from'./routes/index';
0
Jesús Marcano
Jesús Marcano
Estudiante

El archivo index.js no se modificó al hacer npm run build, he estado leyendo y por allí decía que tenía que ver con que en las versiones nuevas de webpack no se modifican los códigos demasiado pequeños y livianos; Intenté hacer todo el proceso de desinstalar la version nueva e instalar la vieja y sólo conseguía errores y errores y más errores; mi pregunta es: Es necesario ir con la versión vieja, o puedo seguir así?

2
Julio Cesar Quintero González
Julio Cesar Quintero González
Estudiante

Quisiera saber es a partir de ahora, como se le hace una modificacion al gh-pages? haciendo un trigger de nuevo? si quiero cambiar algo debo hacer build antes de subirlo?

1
Magdiel Gómez
Magdiel Gómez
Estudiante

Oscar, tengo una duda, o si alguien puede ayudarme, supongamos que en el SPA no esta en el home el llamado la api, su no en otra seccion, como es un SPA al seleccionar en otra navegacion, este no se renderizara porque para eso la pagina se tiene que recargar para hacer el llamado a la API, Alguien sabe como hacer esto sin tener que recargar la pagina manualmente?

1
Juan Fernando Silva Amoza
Juan Fernando Silva Amoza
Estudiante

Request failed with status code 403
cuando le doy npm run start me aparece de esta forma y no puedo ver nada de lo que estoy haciendo…

0
Martín González
Martín González
Estudiante

No se que estoy haciendo mal pero, pero se ve que no funciona aun, lanza el servidor con el script start pero se queda cargando la pagina mucho tiempo para finalmente no cargar nada.
mi package-json va asi:

{
  "name": "100tifico",
  "version": "1.0.0",
  "description": "single page application",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack serve --open --mode production"
  },
  "keywords": [
    "javascript"
  ],
  "author": "Martín González <[email protected]>",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.13.13",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^4.5.2",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "production": "^0.0.2",
    "webpack": "^5.28.0",
    "webpack-cli": "^4.6.0"
  }
}

y mi webpack.confg.js asi:

const path = require('path'); //Nos permite acceder a donde estámos en las carpetas. Ya sea en local o en la nube.
const HtmlWebpackPlugin = require('html-webpack-plugin'); //Archivo necesario para trabajar con HTML.

module.exports = {  //Aquí se encuentra toda la configuración de lo que va a suceder. Modulo para exportar.
    entry: './src/index.js', //Punto de entrada con su dirección.Aquí vive el código inicial y de aquí parte al desarrollo.
    output: { //Donde se envía el proyecto estructurado y compilado listo para producción.
        path: path.resolve(__dirname, 'dist'),  //Creamos el lugar dónde se exportará el proyecto.
        filename: 'main.js'//Este es el nombre del archivo final para producción.
    },
    resolve: {
        extensions: ['.js'], //Extensiones que vamos a utilizar.
    },
    module: { //Se crea un modulo con las reglas necesarias que vamos a utilizar.
        rules: [    //Reglas
            { // Estructura de Babel
                test: /\.m?js$/, //Nos permite identificar los archivos según se encuentran en nuestro entorno.
                exclude: /node_modules/, //Excluimos la carpeta de node modules
                use: {
                  loader: 'babel-loader',//Utilizar un loader como configuración establecida.
                  }
            }
        ]
    },
    plugins: [  //Establecemos los plugins que vamos a utilizar
        new HtmlWebpackPlugin([    //Permite trabajar con los archivos HTML
            {
                inject: true,   //Cómo vamos a inyectar un valor a un archivo HTML.
                template: './public/index.html',    //Dirección donde se encuentra el template principal
                filename: './index.html'//El nombre que tendrá el archivo
            }
        ])
    ]
}
0
Martín González
Martín González
Estudiante

No me funciona el webpack server no me tira ningun error pero nunca deja de cargar la pagina localhost.
Alguien puede ayudarme? se ve que es una cuestion de que los modulos usados por el profesor se actualizaron. Ya probe todo lo que encontre en los aportes y sigue sin funcionarme bien lo scripts: npm run start y npm run build

1