DEV Community: Gerald González Zeledón

Haciendo deploy de una app en react a GitHub Pages 🚀

Gerald González Zeledón — Wed, 10 Nov 2021 03:48:00 +0000

Hola lector! 👋, hoy te traigo otra..😖 guía de como hacer un deploy.. 🚀 pero esta vez es con react! 😎

he estado estudiando un poco esta librería y la he sentido bastante sencilla en comparación con angular, seguramente has leído, visto o escuchado algún tutorial o persona que la curva de aprendizaje con angular es muy alta y es cierto. Pero con react no dure ni una semana en aprender a crear componentes, es cierto que me hace falta mucho por aprender, pero como entrada no me parece mal esta librería. Bueno continuemos con el tema principal por el cual estas acá! 🤓

Estos son los pasos para poner nuestra app react en github pages: 👀

Paso 1

Vas a necesitar crear un repositorio en tu github

Paso 2

En este paso vas a necesitar tener un proyecto o crear uno, para ello puede utilizar la herramienta create-react-app o puedes crearla desde cero eso ya depende de usted, en esta caso te muestro el comando para crearlo con la herramienta create-react-app

gedgonz@gedgonz:~$ npx create-react-app myReactApp

Paso 3

En este paso necesitarás instalar la siguiente dependencia en nuestro proyecto gh-pages, nos vamos a nuestra terminal cambiamos al directorio donde esta nuestra aplicación creada e instalamos la dependencia gh-pages:

gedgonz@gedgonz:~$ cd myReactApp
gedgonz@gedgonz:~$ npm i gh-pages

Paso 4

En este paso configuraremos nuestro archivo Package.json con lo siguiente:

4.1 homepage

Se agregará un nuevo elemento homepage para colocar la ubicación donde estará alojado nuestro sitio(URL completa de github)

4.2 predeploy y deploy

Se agregarán estos nuevos elementos en la sección de script, esto para ejecutar nuestro build y nuestro deploy desde nuestra consola, cabe de recalcar que estos nombres(predeploy y deploy) puede definirlos como usted estime conveniente

Paso 5

Una vez que tengamos esta configuración tendremos todo listo para hacer el despliegue de nuestra aplicación en react hacia github pages.

5.1 Creando el build de nuestro proyecto

Una vez definidos los comandos en la sección de los script los ejecutaremos desde nuestra terminal preferida.

gedgonz@gedgonz:~$ npm run predeploy

5.2 Haciendo deploy hacia github pages

Una vez creado nuestro build, ya estamos listo para hace nuestro deploy!! 🤘

gedgonz@gedgonz:~$ npm run deploy

si todo ha salido bien en la terminal nos indicara que se realizó el deploy en github pages 💪☕️

Published

Nota

Si su app está trabajando con react-router-dom, será necesario agregar el basename en la etiqueta a como se muestra en la siguiente imagen, esto para que github redireccione bien las rutas.

Si tú sabes hacerlo de una forma más simple muéstrame en los comentarios, te lo agradecería mucho! 🙏

te dejo el link de proyecto donde aplico lo explicado anteriormente: reactMovie

Bueno eso ha sido todo para este post, espero que sirva de ayuda a otro como yo que busca como aprender cada día en este mundo tecnológico. 👊

Haciendo deploy de una app en angular a GitHub Pages

Gerald González Zeledón — Wed, 25 Aug 2021 21:02:37 +0000

Muchos de nosotros cuando terminamos un proyecto y este es más frontend que backend queremos compartirlo con nuestros amigos o simplemente queremos mostrarlo en nuestro portafolio, es por ello que acá te muestro una pequeña guía en donde te muestro paso a paso a hacer un deploy a un host gratuito, está vez lo haremos con GithubPages.

Paso 1

Vas a necesitar crear un repositorio en tu github

Paso 2

Vas a necesitar un proyecto angular, ejecuta el siguiente comando para crear tu proyecto

ng new app-name

Paso 3

Instale Angular CLI gh-pages (https://www.npmjs.com/package/angular-cli-ghpages)

Hay una herramienta a su disposición que puede utilizar para implementar fácilmente su aplicación angular en gh-pages, la herramienta angular-cli-pages.
La herramienta angular-cli-pages se usa como un comando en la CLI angular con el propósito de la implementación.

Para instalarlo, ejecutemos este comando en nuestra terminal

npm i angular-cli-ghpages
ng add angular-cli-ghpages

Nota:

Este comando instalará angular-cli-ghpages globalmente en su sistema operativo. No es necesario que lo instale de nuevo en caso de que necesite usarlo en el futuro, no es necesario ejecutar nuevamente el primer comando una vez este instalado globalmente.

Paso 4

Implementar en gh-pages

Después de crear la aplicación, ahora puede implementarla en Github Pages usando la herramienta angular-cli-ghpages

Ejecute el siguiente comando en su terminal para implementar la aplicación, asegurese de escribir correctamente el nombre de su proyecto y que se encuentre dentro de las diagonales //

ng deploy --base-href=/RickAndMorty/

Paso 4.1 (opcional) *

Por si el comando anterior no llegase a funcionar, existe otro comando que crea la rama y la sube al repositorio de la misma forma. Debes asegurarte de tener instalada la dependencia angular-cli-ghpages globalmente, como se describe en el paso anterior, y luego ejecutar este comando.

ngh --dir=dist /RickAndMorty --no-silent

Paso 5

Una vez que desplegué su aplicación angular diríjase a su repositorio y en la sección de settings

de clic en la siguiente sección para obtener la url de la pagina

le mostrara la url y ya podrá acceder a ella para ver su app

Nota

GitHubPages dura al rededor de 30 segundos en aplicar los cambios y mostra la app, siga los pasaos a como se inidcan para que no resiva el 404 de github

te dejo el link del proyecto del ejemplo: Rick&MortyApp

Espero esto te ayude en tus implementaciones y pruebas. Saludos!!

Haciendo deploy de una app en angular a heroku

Gerald González Zeledón — Wed, 31 Mar 2021 22:24:34 +0000

¿Qué es Heroku?

Heroku es uno de los PaaS más utilizados actualmente en entornos empresariales, debido a su fuerte enfoque en simplificar el despliegue de aplicaciones. Además, te permite manejar los servidores, sus configuraciones, el escalamiento y la administración. En Heroku, solo debes especificar qué lenguaje de backend estás utilizando o qué base de datos vas a emplear, y luego puedes enfocarte únicamente en el desarrollo de tu aplicación.

Ahora te mostraré los pasos para desplegar tu aplicación Angular en Heroku.

Paso 1

Vas a necesitar algo para servir tus archivos, y para eso utilizaremos Express. También necesitaremos una 'ruta' para configurar nuestro servidor (a menos que prefieras codificarlas directamente).

npm install --save express path

Paso 2

Ahora, si queremos que Heroku construya nuestro proyecto en sus servidores, necesitamos decirle dos cosas.

Cómo construir nuestro proyecto, y
Con qué versiones de Node.js y npm funciona nuestro código.

Puedes hacer esto agregando la siguiente configuración en el archivo package.json.


"scripts": {
    ...
    "postinstall": "ng build --prod"
  },
  "engines": {
    "node": "8.11.3",
    "npm": "6.1.0"
  },

Recuerda reemplazar las versiones de Node.js y npm por las que tienes instaladas.
Puedes averiguarlas con el siguiente comando:


node --version
npm --version

Paso 3

De forma predeterminada, Angular separa las implementaciones que considera son solo para 'desarrollo'. Sin embargo, dado que Heroku está construyendo nuestro código, debemos asegurarnos de que pueda ejecutar esos módulos.

Para hacer esto usted puede mover @angular/cli, @angular/compiler-cli, typescripty "@angular-devkit/build-angular": "~0.6.8"__ __ * de nuestros devDependencies a las dependencias. O podemos hacer que Heroku instale esos módulos por su cuenta.

Personalmente, prefiero la primera opción, ya que te permite especificar las versiones. Sin embargo, si prefieres la segunda opción, deberías agregar lo siguiente debajo de postinstall.

 "preinstall": "npm install -g @angular/cli @angular/compiler-cli typescript",

Paso 4

Crea nuestro archivo de servidor. En el directorio principal de tu aplicación (el que contiene el package.json), crea un archivo llamado server.js y agrega lo siguiente:


const path = require('path');
const express = require('express');
const app = express();

// Serve static files
app.use(express.static(__dirname + '/dist/MY_APP_NAME'));

// Send all requests to index.html
app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname + '/dist/MY_APP_NAME/index.html'));
});

// default Heroku port
app.listen(process.env.PORT || 5000);

Recuerde reemplazar MY_APP_NAME (ambos) al nombre de su aplicación.

Paso 5

Ahora, para crear un Procfile para decirle a Heroku "cómo" queremos que se ejecute nuestra aplicación. En su directorio de proyecto (el mismo que contiene el package.json) cree un archivo llamado Procfile y coloque lo siguiente

 web: node server.js

Paso 6. Paso final

Ahora podemos compilar nuestra aplicación npm install y ejecutarla con 'node server.js'.
Si todo funciona, ahora deberíamos ver un sitio de trabajo en http: // localhost: 5000

Para empujar a heroku, asumiendo que tienes el cli instalado.
Si no es así (https://devcenter.heroku.com/articles/heroku-cli#download-and-install)

 heroku create
 git add .
 git commit -m "initial heroku deploy'
 git push heroku master

Hecho!. Ahora debería ver un enlace de despliegue. Ábrelo y deberías ver tu sitio.