Ya hay curso de travis CI: https://platzi.com/cursos/travis/
Development
Configuración de Proyectos con JavaScript, Babel y Webpack
Desarrollo de Aplicaciones SPA con API de Rick y Morty
Creación de Estructura de Proyecto con Git y NPM
Configuración de Babel y Webpack para Proyectos JavaScript
Templates
Configuración de Webpack y Babel para Proyectos con HTML y JavaScript
Creación de Templates y Secciones en JavaScript
Creación de Plantilla de Error 404 en JavaScript
Router
Manejo de Rutas en Aplicaciones Web con JavaScript
Función JavaScript para Manipulación de Rutas y Hashes
Implementación de Rutas Dinámicas en JavaScript
Fetch Data
Conexión de API para Renderizar Personajes en Aplicación Web
Conexión de API para mostrar detalles de personajes en JavaScript
Deploy
Implementación de CSS en Proyectos Web con Webpack
Automatización de Despliegue con Travis CI y GitHub
Implementación de Aplicaciones con Travis CI y GitHub Pages
Desarrollo de Aplicaciones con Vanilla JavaScript
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Llevar una aplicación al mundo real es un paso crucial para todo desarrollador. Publicar tu proyecto en Internet no sólo te permite recibir retroalimentación, sino que además te obliga a adoptar mejores prácticas en la gestión del código. Así es como puedes lograrlo de manera automática utilizando herramientas como Travis CI.
Travis CI es una herramienta de integración continua que permite la automatización del flujo de trabajo en el desarrollo de software. Facilita la generación de scripts conectados a tu aplicación y repositorio, permitiendo automatizar el proceso de integración y compilación del código. Esto significa que cada vez que se detecta un cambio en una rama (por ejemplo, la rama master) se puede generar un compilado y publicarlo sin intervención manual.
Para comenzar, sigue estos pasos básicos:
Registro en Travis CI: Regístrate en Travis CI con tu cuenta de GitHub. Este servicio es gratuito, aunque también ofrece opciones de pago para empresas.
Generar un personal access token:
Travis
y asegúrate de seleccionar permisos de Repo
y admin:repo_hook
.Sincronización con tu repositorio:
.travis.yml
?Este archivo está ubicado en la raíz de tu proyecto y contiene la configuración necesaria para que Travis CI se integre con tu aplicación. Vamos a construir este archivo paso a paso:
Define el lenguaje de programación:
language: node_js
Establecer caché: Esto ayuda a reducir el tiempo de procesamiento.
cache:
directories:
- node_modules
Versión de Node.js: Selecciona las versiones con las que deseas trabajar.
node_js:
- "12"
Script de compilación: Este paso compila y prepara tu proyecto.
script:
- npm run build
Configuración del despliegue: La etapa final del script se encarga del despliegue automático.
deploy:
provider: pages
skip_cleanup: true
github_token: $GITHUB_TOKEN
keep_history: true
local_dir: dist
on:
branch: master
El desafío ahora es conectar tu repositorio local de GitHub para preparar tu despliegue con Travis CI. De esta forma, aprenderás cómo lanzar el primer build y llevar tu proyecto a producción. Ésta es solo la introducción a las poderosas herramientas de DevOps y la automatización del desarrollo.
¡No te detengas aquí! Sigue explorando más sobre Travis CI y otros sistemas de integración continua para mejorar tus habilidades de desarrollo y administración de software.
Aportes 47
Preguntas 5
Ya hay curso de travis CI: https://platzi.com/cursos/travis/
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
Aquí esta la configuración, revisen bien el identado porque me trajo muchos problemas, pero ya pude hacer el deploy
El plugin para los iconos se llama Material Icon Theme
quedó un typo en el archivo .travis.yml en target-brach debería ser target-branch.
Reto cumplido!
Para logar el reto les comparto los comando que deben escribir en al consola en el directorio de su proyecto:
ya no se usa mas travis, ahora ser cool implica usar github actions jaja
Nuevo curso a la lista de pendientes: Travis
Me gusto mucho travis, justo hice el curso respectivo! Lo recomiendo mucho!
UPDATE 2021: Ahora la web de Travis CI está en un .com -> https://www.travis-ci.com/
Mi profesor favorito…
Necesitaba los plugins jajajaja
travis.yml
language: node_js #establecer lenguaje
cache:
directories:
- ~/.npm #ubicacion de nuestro directorio
node_js: #version de node
-"12"
git:
depth:3 #va leer hasta el tercer nivel
script:
- yarn build #comando a ejecutar nuestro proyecto
deploy:
provider: pages #donde va estar alojado
edge:true #control de versiones
skip-cleanup:true #estructura de compilaciones
keep-history:true #historial
github-token: $GITHUB_TOKEN #nuestro token generado
local-dir: dist/ #directorio sobre el cual vamos a trabajar
target-branch: gh-pages
commit_message:"Deploy Release" #nombre al commint
on:
branch: master #sobre quien va actuar```
Si no sabes como sacar el simbolito de la Ñ, por descirlo de alguna manera…
presiona Alt + 126
Travis se puede usar para proyectos escalables o de frameworks para proyectos grandes? y habra alguna alternativa gratis?
No uséis https://travis-ci.org/
Tenéis que usar https://travis-ci.com/
La .org la van a cerrar y no se pueden hacer Trigger Builds.
Apartir de unos meses se usa
https://app.travis-ci.com/
Creando el Token en Githab
Actualización. Ahora deben ir hacia https://travis-ci.com
¿Cual deberia aprender primero circle ci o Travis?
Wauu no sabía de esto. Interesante la clase con travis.
Boom primera vez con Travis y estoy perdido jaja a investigar sobre Travis!
¿A alguien más le pasa que cuando le das al home te lleva a la raíz de github-page?
Ya en producción. Cuando clickeo mi logo en vez de llevarme a https://incari.github.io/RickandMorty-Spa/ me redirige a: https://incari.github.io/.
Agregué
"homepage": “https://incari.github.io/RickandMorty-Spa” al package.json y volvía correr el build pero sigue el mismo problema
reto cumplido.
REsumen de la clase:
Ahora vamos a trabajas con Travis CI , esto nos va a permitir generar un script que va a estar conectado a nuestro repositorio y asi hacer integracion continua.
Primero debemos conectarnos , iniciar sesion en
Travis CI - Test and Deploy Your Code with Confidence
Aceptar los permisos.
A continuacion en nuestro perfil de Github, en la seccion de setting→ developer setting → personal acces tocken y generamos uno nuevo.
Le damos un nombre y habilitacion estas dos opciones
Luego de ello generamos el token y nos dara una clave.
Tenemos que tener creado nuestro repositorio en Github antes de continuar con el siguiente paso.
Entra en travis ci , setting , y encontrar nuestro Repo.
Hacer click en setting. Luego crear una variable de entorno en el apartado Enviroment Variable.
Los valores son :
Luego de ello le damos el boton ADD
A continuacion debemos crear el archivo que utilizara travis para subir nuestro proyecto llamdo travis.yml
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
Nota enlaces importantes:
Para el proyecto si van a usar travis-ci.com y crear su cuenta free, al seleccionar el plan le va a solicitar la inscripción de una tarjeta de crédito. No se asusten, ya que ellos indican que lo hacen para tener un mejor control de los usuarios registrados.
Si no les funciona el link de la descripcion es porque desde el 15 de junio del 2021 dejo de funcionar, ahora sera travis-ci.com
Travis
languege: 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
Hola, si tienen problema con el enlace del Header que los envía al inicio de su GitHub, solo deben cambiar el href y usar el #
<a href="#/">
100tifi.co
</a>
No e probado Travis para hacer deploy. Pero les recomiendo bastante FIREBASE, hace básicamente lo mismo.
-Aloja tu proyecto.
-Lo aloja (Hosting)
-Permite mantenerlo en producción.
Siempre quise entender travis para poder conectarlo con Heroku
¿Puedo usar el token de github para varios proyectos en travis ci?
estupendo 😄
A MI NUNCA ME SALIO EL ICONO DE TRAVIS:V
jajaja min 5:30 … si Oscar, de verdad si te iba a preguntar por tu configuración de vs, gracias por el dato.
Para este video ya hay que tener un repositorio en Github, cierto?
El github token se va utilizar por poryecto? osea cada proyecto va tener us token? o se puede utilizar el mismo?
A ver qué tal!
Listo el reto:
Lol Tengo una super duda:
Tengo GIT BASH y cree alli la llave SSH ahi pero ahora use la Terminal para este proyecto.
Entonces cree otra llave SSH en la terminal Hyper en Windows por que no podia aacceder a de GitHub.
La pregunta es la siguiente:
Travis genera un script que va estar conectado a nuestra aplicación y nuestro repositorio para poder generar integración continua. Significa que cuando se detecte un cambio en la rama master o en la rama en la que se esté trabajando, pueda generar un compilado en un servidor en la nube y mandar estos cambios hacia el repositorio que va utilizar Github Pages para poder publicar tu aplicación.
Con esto se garantiza que cuando se este desarrollando, se podrá crear cambios, mandarlos dentro de un flujo y automáticamente publicar estos cambios sin necesidad de subirlos manualmente.
Listo!!!
Listo ya subí el proyecto a mi repositorio:
Subí mi proyecto siguiendo los pasos de Oscar, pero con una diferencia, no usé empaquetador alguno (modulos js); puro html, css y js en github pages.
https://xsrpm.github.io/miniProyectos/js/cientifico/
https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Modules
RETO CUMPLIDO
f
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?