Mes: enero 2020

Categorías
blog

Deploy Gatsby React app en Firebase

Después de crear una aplicación en React el paso final es la implementación desplegando la aplicación correctamente.

Desplegando la aplicación la haremos visible y la pondremos accesible en producción o en el entorno que hayas elegido.

En esta entrada vamos a desplegar nuestra aplicación React utilizando Firebase como hosting. (Exactamente como está montado ahora mismo esta web)

Utilizar Firebase como hosting Deploy

Vamos a ver los tres pasos que tienes que realizar para desplegar tu aplicacion en Firebase.

Estos pasos también funciona para cualquier otra biblioteca o framework como Angular o Vue.

El primer paso sería instalar el CLI de Firebase globalmente en tus módulos de node:

npm install -g firebase-tools


Con una instalación global de Firebase CLI, puedes implementar cualquier aplicación sin preocuparte por la dependencia de tu proyecto.

Cómo cualquier paquete de node que hayas instalado globalmente recuerda que debes actualizarlo de vez en cuando a una versión más nueva con el mismo comando: 

npm install -g firebase-tools

Una vez instalado en node, vamos a logearnos en Firebase, obviamente tienes que tener una cuenta en Firebase, y un proyecto creado que utilizará el hosting, si no lo tienes todavía entonces debes de hacerlo ya!
Vamos a  Firebase y creamos un nuevo proyecto.

Y ahora vamos a asociar Firebase CLI con nuestra cuenta de Google Firebase, para eso lanzamos el siguiente comando:

firebase login

Una vez que realizas el siguiente comando debes de ver una URL en su línea de comando o bien se abrirá tu navegador. Si esto no sucede, Firebase CLI puede abrir la URL automáticamente.

firebase

Elije tu cuenta de Google para crear un proyecto de Firebase y dale a Google los permisos necesarios. Deberías de ver una confirmación desde Google diciendo que tu configuración es correcta. Regresa a la línea de comandos para verificar que te has logeado correctamente.

A continuación, vamos a la carpeta del proyecto y ejecutamos el siguiente comando, que inicializa un proyecto de Firebase que se pueda usar como hosting de Firebase:

firebase init


Elije la opción de Hosting.

elegir hosting firebase


Como Google conoce los proyectos de Firebase asociados con tu cuenta después de iniciar sesión, puedes seleccionar tu proyecto de Firebase de una lista de proyectos de la plataforma Firebase:

Hay algunos pasos de configuración que puedes definir. En lugar de usar la carpeta public como predeterminada, en mi caso vamos a utilizar la carpeta public, así lo que dejamos tal y como está. Si configuras el paquete con una herramienta como Webpack, puedes elegir el nombre apropiado para la carpeta de compilación:

La aplicación de React crea una carpeta después de realizar la compilación npm run build por primera vez. En esta carpeta encontrarás todo el contenido dentro de la carpeta public , que será la carpeta que vas a realizar el deploy

En mi caso que estoy subiendo un proyecto Gatsby lanzo el comando Gatsby build para ver lo que genera y ver que todo está en orden.

gatsby build

Una vez que acaba de generar la web lanzo el siguiente comando para realizar el deploy en Firebase. 

firebase deploy

Ahora, después de lanzar el comando Firebase te dirá que todo está ok, y podrás ver tu proyecto en la página de tu proyecto seguido de web.app o seguido de firebase.com , o bien en el dominio customizado que hayas puesto desde Firebase.

En mi caso puedes ver el proyecto en el dominio malditawifi.web.app
Y listo ya tendrás tu web desplegada en Firebase.

Cualquier duda puedes dejar un comentario

Categorías
blog

Crear Sitemap en tu web Gatsby

sitemap

Hola!

En esta entrada vamos a ver como añadir un sitemap a tu web hecha con Gatsby, este sitemap te vale para cualquier proyecto hecho con Gatsby da igual si tu web está conectada a un wp o coge los datos de un xml , json etc etc.

Tener un Sitemap de tu web es útil para el SEO. A la hora de que los buscadores indexen tu sitio y no se pierdan es util que tengas un sitemap.

sitemap

Afortunadamente para ti, añadir un mapa a un proyecto de Gatsby es increíblemente fácil! muy muy simple.

Instalación

Este post asume que ya tienes un proyecto de Gatsby configurado, y que estás listo para editarlo. Si necesitas ayuda para llegar a ese punto, por favor sigue el tutorial de introducción en el post de crear una web con Gatsby

Instalar el plugin

Como probablemente te darás cuenta más temprano que tarde, ¡hay un montón de plugins útiles y oficiales de Gatsby! Siempre es una buena idea mirar a través de la sección de plugins en el sitio oficial cuando se construyen nuevos proyectos. Para nuestro mapa del sitio, haremos uso de un plugin oficial gatsby-plugin-sitemap.

Esta es la única nueva dependencia que estamos añadiendo a nuestro proyecto, así que vamos a añadirla así:

$ npm install gatsby-plugin-sitemap

Añade el plugin a tu configuración de Gatsby:

Y ahora todo lo que queda por hacer es añadir el plugin de sitemap a nuestro archivo gatsby-config.js, y opcionalmente configurarlo.

Antes de añadir el plugin, tenemos que asegurarnos de que el objeto siteMetadata tiene un valor siteUrl válido:

Editamos el fichero gatsby-config.js

siteMetadata: {
  siteUrl: `https://www.codifica.me`, 
},


Importante: ¡No te saltes este paso! Por defecto, este plugin usa el valor ‘siteMetadata’ para construir las urls de su mapa de sitio.

A continuación, un poco más abajo dentro del archivo gatsby-config.js, añadimos el plugin en nuestro array de plugins.

plugins: [
  {
    resolve: `gatsby-plugin-sitemap`,
    options: {
      output: `./sitemap.xml`,
      exclude: [`/otras`]
    }
  },
]

La forma más fácil de añadir el plugin no implica ninguna configuración extra, y creará automáticamente los elementos del mapa de sitio para cada página de nuestro sitio. Este ‘método sin configuración’ incluye todas las páginas, por lo que igual necesitas un poco de configuración adiccional.

Opciones de configuración


De acuerdo con la documentación del plugin, hay varias opciones disponibles para personalizar la generación de nuestro mapa del sitio.

consulta: (Consulta GraphQL) Esta es una consulta GraphQL utilizada para obtener los datos necesarios para generar el mapa del sitio. Se utiliza por defecto para obtener el valor site.siteMetadata.siteUrl que hemos establecido anteriormente, y todas las páginas disponibles. La consulta por defecto tiene este aspecto, y rara vez necesitarás añadir mas cosas:

query: `
  {
    site {
      siteMetadata {
        siteUrl
      }
    }
    allSitePage {
      edges {
        node {
          path
        }
      }
    }
}`

Conclusión

Los sitemaps son una parte importante de cualquier sitio web para la correcta indexación en los motores de búsqueda, y especialmente para los sitios más nuevos con un bajo número de backlinks. Es un paso que a menudo se pasa por alto, pero puede acelerar drásticamente el proceso de indexación y que así tu sitio web salga antes en los buscadores.

Afortunadamente, con Gatsby y sus increíbles plugins de sitemaps, podemos añadir sitemaps a nuestros proyectos en poco tiempo!

Categorías
blog

Crear una web con Gatsby y WordPress (Paso 1)

gatsby-image

Hola!

Hace un montón que no subo nada al blog, y como llevo unos meses viendo Gatsby js me he puesto a escribir este mini tuto de cómo crear una pagina simple (spa) con Gatsby .

Instalarlo es sencillo, vamos a utilizar npm (Node Package Manager) como gestor de paquetes y librerías con lo que instalaremos Gatsby.

Sería así:

npm install --global gatsby-cli

Hecho esto crear una página con Gatsby es así de simple

gatsby new gatsby-site

Y ahora vamos a levantar el servidor local para ver lo que hecho. 

gatsby develop

Podemos ver que la salida de los comandos nos muestra la url del servidor local, que sería la siguiente
http://localhost:8000

gatsby ini

Y aquí podríamos ver la flamante página que hemos creado.

Entrando en http://localhost:8000 puedes ver la página de presentación de Gatsby.

Se verá los siguiente:

Con esto ya podemos cerrar la computadora y bajar a celebrarlo. 😉