Crear el script para enviar a producción

Hola Amigos,

Tuve un par de problemas, por si tienen algún error y les pueda servir lo que aprendí en esta clase.

1. No se olviden de subir el archivo .travis.yml a github, cuando lo haces con git add *, el archivo se ignora, así que tienes que añadirlo manualmente escribiendo git add .travis.yml

2. Revisen bien el código de .travis.yml, en el video anterior hubieron unos typos, les dejo el código que subí

language: node_js
cache:
  directories:
    - ~/.npm
node_js:
  - '12'
git:
  depth: 3
script:
  - yarn build
deploy: 
  provider: pages
  edge: true
  skip-cleanup: true
  keep-history: true
  github-token: $GITHUB_TOKEN
  local-dir: dist/
  target-branch: gh-pages
  commit_message: "Deploy Release"
  on:
    branch: master

Salu2,

Acá el mio:
Rick and Morty

Travis en el 2021 Apesta.

👋Hola chicos, si ustedes tuvieron problemas con travis al igual que ami, esto les ayudara.
Eliminen la coma “;” de edge: true del archivo .travis.yml quedándole el siguiente código ya que era un Typo.

edge: true

Guarden el archivo, hagan el commit y envíen el push a GitHub.
Luego en la pagina de Travis opriman el botton que dice Restart Build y eso es todo amigos.

Si les ayudo dale un ❤ aquí abajo.

Para que en GitHub pages el vinculo de header los redireccioné correctamente
solo pongan la ultima ruta.
Ejemplo:
Ruta completa: https://giovannihm.github.io/Single-Page-Application-JS/
Ultima ruta: /Single-Page-Application-JS

 <a href="/Single-Page-Application-JS">100tifi.com</a>

un par consejos de unos problemas que tuve 😅:

1. asegúrense de que el nombre de la variable de entorno sea la misma que colocan en la configuración de .travis.yml. Las mayúsculas y las minúsculas importan.
2. Cuando linkeen el archivo de css en el html, no lo linkeen con la ruta actual, sino como sería cuando esté en deploy. Me explico: si se paran en la carpeta “public” y lo linkean con esa referencia, la ruta sería así: “…/src/styles/styles.css” el problema es que puede que les funcione en su entorno local cuando corran npm start, pero en cuando hagan el Deploy no les va a leer el CSS, entonces lo linkean pensando en como será cuando esté en producción y sería: “./styles.css” y ya.

Espero les sirva a quién batallo con el mismo errror 😅

cientifico = 100 -tifi - co
100tifi.co

jajajaj, recien al final del curso caigo en cuenta de eso

Les comparto el código de .travis.yml para que les genere tanto error como me los generó a mí al realizar los pasos de este video.

language: node_js
cache:
  directories:
    - ~/.npm
node_js:
  - '12'
git:
  depth: 3
script:
  - yarn build
deploy:
  provider: pages
  edge: true,
  skip-cleanup: true
  keep-history: true
  github-token: $GITHUB_TOKEN
  local-dir: dist/
  target-brach: gh-pages
  commit_message: "Deploy Release"
  on:
    branch: master

CASI NO PUEDO SUBIR EL PROYECTO CARAMBA :V

Error Could not parse

Herramienta online para que verifiquen su archivo .travis.yml
https://yaml-online-parser.appspot.com/

En mi caso el archivo validado resulto:

language: node_js
cache:
  directories:
    ~/.npm
    node_js
    - "12"
  git:
    depth: 3
  script:
    - yarn build
  deploy:
    provider: pages
    edge: true
    skip-cleanup: true
    keep-history: true
    github-token: $GITHUB_TOKEN
    local-dir: dist/
    target-branch: gh-pages
    commit_message: "Deploy Release"
    on:
      branch: main

¿Cómo se arregla el botón para ir al home con ‘/’? 🤔

Esten atentos a los “tabs” ya que node: tiene que estar 1 nivel mas bajo y luego les recomiendo usar “node” en vez de “‘12’” ya que “node” te actualiza node a la ultima version y estable.
Luego la coma del primer true sobra.

language: node_js
cache:
  directories:
    - ~/.npm
node_js:
  - node
git:
  depth: 3
script:
  - yarn build
deploy:
  provider: pages
  edge: true
  skip-cleanup : true
  keep-history: true
  github-token: $GITHUB_TOKEN
  local-dir: dist/
  target-branch: gh-pages
  commit_message: "Deploy Release"
  on:
    branch: master

Hace unos días github cambio la rama master a rama main
Esto debido a que hay una conotación racista en las palabras master y slave.
Puede que sea una pequeña accion de parte de github pero es un paso más cerca de eliminar el racismo de nuestro día a día

Qué fastidio Travis, sin tarjeta de crédito no te deja usarla…

Siempre que en un curso de plazi hay que desplegar algo sale mal… la única vez que no ha salido mal es hacerlo manualmente con githubpages o con el complemento de webpack…

We are unable to start your build at this time. You exceeded the number of users allowed for your plan. Please review your plan details and follow the steps to resolution.

Hola, aquí les dejo mi proyecto.

Les comparto mi repositorio. En estas semanas voy a personalizar los estilos.

Les comparto como quedo mi proyecto, cambie el API que se usa en el curso en mi caso use el API de Marvel espero les guste y me encantaria tener su feedback.

Mi proyecto final

📌 Aquí les dejo mi repositorio:
https://github.com/RLCHuncp/SPA—RickAndMorty/tree/master

📌Demo:
https://rlchuncp.github.io/SPA—RickAndMorty/

Ahora tengo el siguiente error en la consola de travis

Entrypoint main = main.js
[0] ./src/index.js + 7 modules 3 KiB {0} [built]
    | ./src/index.js 124 bytes [built]
    | ./src/routes/index.js 707 bytes [built]
    | ./src/pages/Home.js 493 bytes [built]
    | ./src/utils/getHash.js 202 bytes [built]
    | ./src/pages/Character.js 866 bytes [built]
    | ./src/pages/Error404.js 157 bytes [built]
    | ./src/utils/resolveRoutes.js 196 bytes [built]
    | ./src/utils/getData.js 330 bytes [built]
ERROR in ./src/routes/index.js
Module not found: Error: Can't resolve '../templates/Header' in '/home/travis/build/aplysoft/spa_js_vanilla/src/routes'
 @ ./src/routes/index.js 1:0-41 16:27-33
 @ ./src/index.js
Child HtmlWebpackCompiler:
     1 asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [0] ./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html 746 bytes {0} [built]
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.

Hola! Envío mi link del proyecto. Aún no lo personalizo ni cambio el CSS a estilos propios, pero lo haré más adelante:
www.fertorresmx.dev

Cuando esta haciendo el script me sale el siguiente error en Travis:
no implicit conversion of nil into String (TypeError)
Esto sale donde esta creando las dependencias del deployment, saben a que puede deberse ese error??

Me carga un error 404 de github. => There isn’t a GitHub Pages site here.

ayuda no se por qué me sale este error.

travis no me avisó que en el plan free me iba a cobrar y me hizo descuento en la tarjeta, por otro lado les comparto mi proyecto

https://juli6464.github.io/spa-js-ricknmorty/

Les comparto mi repositorio y el deploy 😎

Actualización 2022: Ahora las ramas principale en GitHub se llaman “main” por lo tanto debemos aclarar (modificar) eso en nuestro .travis.yml:

en la última línea (21) reemplazamos

branch: master

por

branch: main

Comparto mi proyecto: https://javi-salas-dev.github.io/SPA-javascript/

Gran curso del profe Oscar. Nunca paren de aprender!!

Yo tuve muchos problemas con travis y al final no pude hacer el deploy, les recomiendo esta forma que a mi me funciono muy bien.
https://gist.github.com/cobyism/4730490

Listo. Tengo mi primera single page ampliación. Aquí

Me gusto mucho esta clase ya he escuchado de travis pero no lo había usado antes. Muy buena clase !!

Mi enlace (aunque con el diseño base)

100tifi.co

yo tambien tuve bastante incoveniente para subir.
mis recomiendaciones son:

1. Desde el año pasado en GitHub la rama principal se llama main, lo recomendable seria que ahi estaria los cambios o crear una rama master lo que seria como una mala practica, si deja todo en main deberia cambiar en el archivo .travis (branch: main)
2. antes de hacer el ultimo commit correr el comado npm run build para que se guarde todos los cambios realizado y luego si hacer el git push origin master:main

Hola amigos queria comentarles que a mi me aparecia el siguiente error en travis

Dpl does not have permission to access github.com/JulianPerez0230/RickyMorty-SPA.git using the provided GitHub token. Please make sure the token have the repo or public_repo scope.

Al hacer alrededor de otras tres llaves me di cuenta que en al seleccionar los scopes existe ahora uno mas que de los que le aparecia al profesor., por lo que decidi no seleccionarlo y me funciono a la perfección. Espero que a alguien mas le sea de ayuda.

travis realmente es una herramienta muy poderosa tuve problemas para conectar con mi repositorio pero con la ayuda de esta pagina puede resolver :

https://yaml-online-parser.appspot.com

el codigo cambio mucho mas que todo se elimina las lineas

y termina de esta manera:

language: node_js
cache:
directories:

• ~/.npm
  node_js:
  • 12
    git:
    depth:3
    script:
    -yarn build
    deploy:
    provider: pages
    edge: true
    keep-history: true
    github-token: $GITHUB_TOKEN
    local-dir: dist/
    target-branch: gh-pages

f

LOS ESTILOS ESTÁN ROTOS

Si quieres pasar de esto:

A esto:

Debes cambiar

                <article class="Character-item">

por

                <article class="Characters-item">

dentro de /pages/Home.js

¿A alguien más le salió este error?

The provided GitHub token is invalid (error: GET https://api.github.com/user: 401 - Bad credentials // See: https://developer.github.com/v3)```

Vaya casi no lo logro pero con ayuda de los comentarios de los compañeros fue posible, aqui mi repo https://christiandevel.github.io/SingleApplication-Page-SPA-Rick-Andd-Morty/

No me esta generando el branch: gh-pages

![](

No entiendo este error

Para que GitHub Pages direccione correctamente las rutas recuerden poner al inicio de cada una un ./. Ejemplo:

./#/${character.id}/

aqui esta el mio …

Que genial ésto! Me encantan las cosas extra que uno aprende en cada curso y que ayudan a ser un mejor desarrollador… Justo me encuentro ésta belleza: https://platzi.com/clases/travis/ 💓

Fantastico curso. 😄

Wauu esto de travis es genial. Solo te encargas de realizar el push a la rama y el automátiicamente actualiza el gh-pages.

comparto mi repositorio con el trabajo finalizado:
https://jcolorado19.github.io/curso-spa/

Le hice muy peqeños ajustes al css pero después lo mejoraré 100%.

Aqui esta el mio

Gran curso! Ahora a seguir profundizando en más temas! 😄

Alguien sabe porque la ruta sale así https://mauroquinteros.github.io/spa-vanillajs/#/2/
a mí me gustaría configurar la ruta para que salga de este manera https://mauroquinteros.github.io/spa-vanillajs/2 que se me hace más sencillo para el usuario.
Espero que alguien me ayude soy nuevo en esto

100tifico

Genial esto. No veo la hora de ponerme a hacer más SPA para practicar más 😮

ERROR in ./src/index.js
Module not found: Error: Can’t resolve ‘./routes’ in ‘/home/travis/build/AbejaCruz/SPA-Vanilla/src’
@ ./src/index.js 1:0-30 3:31-37 4:38-44
Child HtmlWebpackCompiler:

ERROR in Entry module not found: Error: Can't resolve '/home/travis/build/AbejaCruz/SPA-Vanilla/public/index.html' in '/home/travis/build/AbejaCruz/SPA-Vanilla'

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.

Increible, super bien explicado por Oscar

Me arroja el siguiente error en travis cuando ejecuto el trigger custom build

Alguien sabe que puede estar pasando?

Oh no! You tried to trigger a build for aplysoft/spa_js_vanilla but the request was rejected.

https://github.com/aplysoft/spa_js_vanilla

Para configurar un dominio con GitHub debo pagar ¿verdad?

A MI SALIO EL SIGUIENTE ERROR 😭

Worker information
There was an error in the .travis.yml file from which we could not recover.
Unfortunately, we do not know much about this error.
Please review https://docs.travis-ci.com, or contact us at [email protected] with the error ID: 3def003e8000481686b4401d2b956ddc

REPO

https://github.com/jhondil/proyecto_spa

Hola, les comparto el resultado SPA utilizando Web Components.

https://angelozam17.github.io/100tifi.co/

Hay ta’ compas:
https://andres87mx.github.io/curso-spa-vanilla-js/
xD

que genial es travis ci

A mi me dio un error 😦
Mi .travis.yml:

language: node_js
cache:
  directories:
    - ~/.npm
node_js:
  - "12"
git:
  depth: 7
script:
  - yarn build
deploy:
  provider: pages
  edge: true
  skip-cleanup: true
  keep-history: true
  github-token: \$GITHUB_TOKEN
  local-dir: dist/
  target-branch: gh-pages
  commit_message: "Deploy Release"
  on:
    branch: master

El error que me sale al momento de hacer deploy:

$ git clone --depth=3 --branch=master https://github.com/JZafrag/platzi-spa.git JZafrag/platzi-spa
Cloning into 'JZafrag/platzi-spa'...
$ cd JZafrag/platzi-spa
$ git checkout -qf 7e1dc1a4451d1a75bbe213ec84d9a3efd0dc694e
fatal: reference is not a tree: 7e1dc1a4451d1a75bbe213ec84d9a3efd0dc694e
The command "git checkout -qf 7e1dc1a4451d1a75bbe213ec84d9a3efd0dc694e" failed and exited with 128 during .
Your build has been stopped.

Genial !!!

Hola, quería compartirles un typo del profe en el archivo styles.css, revisen las clases del Home.js ya que algunas son “Character” y en styles.css están escritas “Characters” con la “s” al final y esto afecta a los estilos y al responsive.

Para arreglar el tema del regreso al Home, en el archivo Header.js pueden colocar en el ancla lo siguiente:

<a href="/#">
          100tifi.co
        </a>

Si tienen el mismo error de Typo en el build de travis, asegurar que el nombre del archivo yml de travis sea el mismo que configuramos en settings.

Excelente curso!!!

Excelente!!!

Aquí el mío: Rick and Morty

Pronto le dedicaré más tiempo y lo puliré 😃

Chicos si alguno tiene problemas con el parse de yarn aca les dejo una web donde te indica donde esta el error

Espero que les sirva !

Listo ya me quedo el script de deployer enlazado a github Pages:
![](

Subi una version como la del profe, ahora voy a agregarle mis propios estilos.

no me sale la opcion de hablitar a un lado del boton de settings alguien sabra que pasa ?

recuerden que tienen que confirmar su email para tener activada la opción de “Trigger Build”.

Lo hice, lo hice, , mis problemas fueron el token con travis pues el nombre tiene que estar igual. importante y no me cargaron los css pero le cambie el link en public a "./styles.css 😄[(https://suracedeno.github.io/CursoSPAplatzi/)

Por fin, jajajajaja tuve que mirar mucho por que tenia muchos errores de typo.

Me apareció un error al hacer build en travis, “No Gemfile found skipping bundle install”, despues de investigar, travis por fin me dejo construir, se soluciona cambiando language: generic en el archivo .travis.yml

yo como no la pude subir a github pages lo subi en otro lado
miren

Alguien sabe porque no avanza?

PARA COMPILAR CON TRAVIS LE QUITE EL SKIP_CLEANUP

Parece que la ultima version de travis no necesita el comando skip_cleanup

Asi quedo mi codigo del yml

language: node_js
cache:  
  directories:
    - ~/.npm
node_js:
  - '12'
git:
  depth: 3
script:
  - yarn build
deploy:
  provider: pages
  edge: true
  keep-history: true
  github-token: $GITHUB_TOKEN
  local-dir: dist/
  target-branch: gh-pages
  commit_message: "Deploy Release"
  on:
    branch: master

Y esta es la pagina de mi proyecto

https://codingjairomerea.github.io/practiceSPA/#/1/

Hola tengo una pregunta un poco “tonta” pero subi mi proyecto pero no veo la carpeta dist ¿porque?

Hola compañeros, hace poco GitHub ya no hace la rama por default con el nombre master, ahora lo hace con el nombre main, Travis ya también te da la opción por default de utilizar la rama main. Pero como este curso es de antes de eso y, si están siguiendo los pasos tal cual, tal vez se encuentren con el problema de que algo sale mal cuando hacen el trigger y puede ser por la rama que están ocupando. Solo asegúrense se que están llamando la misma rama en Travis que la que tienen en GitHub con su proyecto. Para crear una rama nueva con el nombre de master solo tienen que ir a la línea de comandos y escribir:

git branch nombrenuevo

por ejemplo: git branch master

y para cambiarse a esa rama:

git checkout master

Desde ahí hagan su git push.

O simplemente háganlo todo desde un principio con la rama main.

Hola… a alguien mas no le cargan los estilos?