Gatsby: Creación de aplicaciones con gatsby.js: ¿Cuáles son los inconvenientes?

Gracias por tus comentarios, @barbush. No me di cuenta de que 68 palabras serían demasiado.

El titular básicamente dice todo: ¿Qué inconvenientes hay cuando creo una aplicación con gatsby.js?

Sé que es posible crear una aplicación. Mi pregunta es, dado que gatsby.js está optimizado para la generación de sitios web estáticos, ¿qué inconvenientes hay? ¿Hay algo que me muerda el trasero más adelante?
Me parece bastante específico.

Woah woah woah @barbush Realmente no quiero que vigiles preguntas como esta. Si es una pregunta terrible (que no lo es), entonces es mejor ignorarla y luego regañar a la persona. No responda a preguntas como esta de nuevo.

@bolus a tu pregunta. Gatsby está diseñado para ser bastante similar para crear aplicaciones de reacción y otras configuraciones de paquetes web / reacciones. Por lo tanto, es perfectamente capaz de usarse para crear aplicaciones web. Si miras en el directorio de ejemplos, hay un ejemplo de redux. La gente lo ha usado con Apollo al parecer con bastante éxito. No es posible usar el relé con gatsby, ya que nuestro uso de graphql entra en conflicto con el de ellos, pero estoy bastante seguro de que será fácil solucionarlo en el futuro.

El principal inconveniente que conozco es que asume que estás creando "páginas", por lo que si estás creando una aplicación más simple sin páginas, entonces no te da mucho y también limitaría un poco tu libertad. En ese caso, sería mejor usar una configuración más básica como CRA.

Pero si está construyendo "páginas", gatsby es genial, ya que obtiene división automática de código y SSR estático para un arranque rápido de la aplicación.

Me encantaría escribir un documento de compensaciones más formal en algún momento, pero estoy feliz de contestar preguntas aquí mientras tanto.

@KyleAMathews : Gracias, eso es exactamente lo que estaba buscando.

Estoy planeando crear un sitio web basado en contenido (un blog, páginas de ventas, documentación, etc.) y, para simplificar, me gustaría alojar algunas aplicaciones pequeñas de una sola página en el mismo dominio.

Parece que Gatsby es ideal para esto.

también limitaría un poco tu libertad

Probablemente no sea un problema para mi caso de uso, pero ¿puede decirme qué limitaciones puedo esperar y qué tan difícil sería evitarlas?

Gracias por crear a Gatsby, por cierto, ¡Gatsby se ve realmente increíble! :)

pero, ¿puede decirme qué limitaciones puedo esperar y qué tan difícil sería superarlas?

Gatsby intenta ser lo más simple y modesto posible, por lo que probablemente no debería encontrarse con limitaciones, especialmente cuando está haciendo sitios web de contenido / página, que es exactamente para lo que está diseñado Gatsby.

Gatsby está diseñado para combinar aplicaciones web e ideas de sitios para crear lo que en nuestra mente es la herramienta de desarrollo y producción ideal para construir sitios realmente rápidos con la mayor facilidad posible.

Solo tendrá problemas cuando quiera usar React de formas que salgan del modelo de "página", por ejemplo, más aplicaciones de forma libre. Pero incluso allí, Gatsby tiene una trampilla de escape que le permite incrustar fácilmente aplicaciones dentro de un sitio más grande https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#creating -client-only-routes

Suena perfecto, ¡gracias de nuevo!

hola @KyleAMathews y @bolus

comentando aquí bc del contexto en lugar de abrir un nuevo tema jejeje

¿Qué sucede si dentro de mi /app (que es una ruta solo para el cliente), quiero crear un SPA (inicio de sesión / cierre de sesión / tablero), supongo que necesito crear un nuevo enrutador dentro de él, es correcto?

¿Qué recomiendas en este caso de uso @KyleAMathews , es posible? ¿O sería mejor usar un _enfoque más básico_ como usted dijo?

gracias

@fernandes checkout https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#creating -client-only-routes - ¡avísenos si tiene más preguntas!

hola @KyleAMathews gracias por la rápida respuesta

Jugué con Gatsby todo el sábado, verifiqué este ejemplo y redujé uno ... Lamento no ser tan brillante, podría haber dado más información al respecto.

Lo que estoy tratando de hacer es obtener mi: https://github.com/fernandes/react-boilerplate y ponerlo dentro de /app como una ruta solo para el cliente

esta plantilla está compuesta por:
react / redux (con recarga en caliente) / react router redux

No tengo tanta experiencia con JS; tal vez es solo un detalle que me falta ... ¡gracias de nuevo!

No puedes poner a Gatsby dentro de algo como react-boilerplate. Gatsby quiere manejar la construcción y ejecutar el sitio. En su lugar, coloque partes de "aplicación" dentro de Gatsby.

sí, eso es lo que quise decir ... gatsby maneja todo mi sitio web y sus páginas, y react-boilerplate va dentro de gatsby en /app como una ruta solo para clientes ... su pila, especialmente el react-router-redux)?

Gatsby ya maneja toda la configuración de webpack / Babel / other, por lo que el proyecto bootstrap no es necesario.

@KyleAMathews Descubrí cómo hacer que mi aplicación solo para cliente con el cliente redux + apollo funcione ... muchas gracias por las respuestas 😉 👍

@KyleAMathews Me enfrento a un pequeño problema aquí, estoy usando el cliente graphql apollo dentro de las páginas de mi cliente solo, pero son solo para el lado del cliente (una vez que debe iniciar sesión), pero Gatsby intenta generar el archivo de índice en construcción; lo que, por supuesto, da un error

¿Alguna sugerencia sobre cómo omitir esta creación HTML ?

actualizar:
Estoy usando https://www.gatsbyjs.org/packages/gatsby-plugin-create-client-paths/

Creé un complemento que deletePage basado en page.path , funciona perfectamente ... no estoy seguro de si es la mejor manera, pero funciona para mi caso de uso 😄 (sí, ahora necesito crear una regla de redireccionamiento en nginx para enviar siempre a mi app/index.html , pero eso es exactamente lo que hice con mi aplicación anterior ...

Me estoy acostumbrando cada vez más a Gatsby, y debo confesar que estoy más feliz con cada progreso que hago ... ¡trabajo increíble @KyleAMathews ! 👏

@KyleAMathews Lamento molestarlo aquí, pero parece un buen lugar para preguntar sobre el enrutamiento del lado del cliente, ya que no he podido entenderlo.

Entonces, para mi caso de uso, estoy leyendo datos de firebase, pero estos datos no están TODOS disponibles en el momento de la compilación, ya que los usuarios pueden modificarlos.

Entonces, en una página de Gatsby (por ejemplo: / podcasts) puedo consultar fácilmente los datos de firebase en cDM. Pero luego me gustaría ir a la página de detalles (ej .: / podcast /: id) y ahí es donde me pierdo un poco. ¿Debo intentar delegar esa ruta al enrutamiento del lado del cliente?

Según tengo entendido, la idea de la escotilla de escape /app es tener un lugar donde pueda tener un SPA debajo, pero parece una exageración para lo que estoy tratando de hacer.

Gracias por tu trabajo en gatsby, ha sido una gran experiencia :)

@gafemoyano crear una ruta por /podcast/:id tiene mucho sentido si habrá podcasts creados por los usuarios mientras trabajan en las cosas. Una desventaja es que ralentiza TTFP para las personas que visitan las páginas de podcasts directamente, ya que ahora hay HTML renderizado en el servidor para cargarlas. Quizás también podría hacer un híbrido: renderizar de forma estática las páginas de podcast que existen en la compilación y luego crear más sobre la marcha en el navegador a medida que las personas las crean.

De interés para los que están en esta página: escribí esta nueva página de documentos sobre la creación de aplicaciones con Gatsby https://www.gatsbyjs.org/docs/building-apps-with-gatsby/

Hola @KyleAMathews, ya que esto se ha convertido en el "problema del lado del cliente" oficial, jaja, otra cosa que he estado considerando sobre este tema de podcasts, considerando que tenemos control tanto en el frontend como en el backend de los podcasts, ¿hay alguna forma de activar la reconstrucción de una página específica solamente? ? o simplemente almacenar en caché la compilación y cambiar solo lo que se ha modificado. No estoy seguro de cómo podría funcionar esto

posible relacionado con https://github.com/gatsbyjs/gatsby/issues/3444

comentó acerca de una API de caché de clave / valor para almacenar en https://github.com/gatsbyjs/gatsby/issues/3260#issuecomment -352856214, tal vez si tenemos el diseño + contenido de la página para asegurarnos de que nada tenga cambios (en los datos y visual)

@KyleAMathews ¡ Gracias por su respuesta! Así que déjame ver si entiendo correctamente. El enfoque es delegar una ruta al código del cliente para renderizar, ¿verdad? Entonces no debería intentar definir mis rutas estáticamente en gatsby-node.js como:

` // page.matchPath is a special key that's used for matching pages
  // only on the client.
  if (page.path.match(/^\/podcasts/:id/)) {
    page.matchPath = "/podcasts/:id";

    // Update the page.
    createPage(page);
  }

Sino más bien use lo que se muestra en el ejemplo:

''
// page.matchPath es una clave especial que se usa para las páginas coincidentes
// solo en el cliente.
if (page.path.match (/ ^ / app /)) {
page.matchPath = "/ app /: ruta";

// Update the page.
createPage(page);

}

And on app/index.js I would define my routes by importing from ReactRouter directly:

importar {Switch, Route} desde 'react-router-dom'
const AppIndex = () => (

Lo que me permitiría visitar / app / podcasts /: id y renderizar PodcastDetails, ¿dónde podría acceder a la parte: id de la ruta para obtener los datos en el componente?

Perdón por molestarlo con un escenario tan simple, simplemente no pude resolverlo con los ejemplos existentes. ¿Quizás deberíamos incluir un ejemplo de aplicaciones híbridas si es algo bastante común que la gente hace con gatsby? Estaría dispuesto a ayudar con eso si fuera necesario.

Gracias nuevamente por su tiempo construyendo y apoyando esta biblioteca @KyleAMathews .

La parte app de la ruta en el ejemplo es arbitraria. Puede usar el nombre que necesite, por ejemplo, podcasts .

Un sitio de ejemplo sería genial :-) espero que tenga tiempo pronto. ¡Invite a cualquier otra persona que lo siga y que ya haya resuelto este problema para compartir un código de muestra!

He probado y tengo un código de muestra aquí.

Pero todavía tengo algunos problemas.
Uno que describí aquí
En resumen, cuando construyo para producción y entro a una ruta bajo el directorio /app/ , por ejemplo, localhost:9000/app/posts/1 y actualizo el navegador, obtengo una página 404 en blanco.
Cuando actualizo la página en localhost:9000/app/ funciona bien.
Tal vez mi configuración prefixes para gatsby-plugin-create-client-paths sea ​​incorrecta.

module.exports = {
  ...
  plugins     : [
    {
      resolve: `gatsby-plugin-create-client-paths`,
      options: {prefixes: [`/app/*`]},
    },
    ...
};

Y otro problema es (no estoy seguro de que sea un problema) que no puedo envolver mis <Route /> con <BrowserRouter> .
Cuando construyo para producción (el desarrollo funciona bien), aparece un mensaje de error que dice "el historial del navegador necesita un DOM", creo que es porque Gatsby se ejecuta en un entorno de nodo y no tiene navegador, por lo que no tiene window etc.

Finalmente eliminé la envoltura <BrowserRouter> y funciona bien.
Soy nuevo en React, por lo que no estoy seguro de que sea la solución adecuada al problema.

Me encantaría recibir ayuda :)

@danielemesh Hola Daniel. No he tenido tiempo de volver a trabajar en mi aplicación gatsby, pero lo que puedo ver en su código fuente es que ha colocado el directorio /app/* dentro de /pages .
No estoy seguro de dónde se supone que debe ir, trataría de ponerlo en el directorio src/ .

¡Déjame saber si funciona!

¡Salud!

@gafemoyano lo probó, no funcionó :(
Gatsby no lo reconocerá ...

¡Gracias!

Me enfrenté a algunos complementos, así que decidí escribir el mío (100% prestado del original), para poder, afortunadamente, resolver mi problema y aprender a escribir complementos de gatsby.

Extraje de una aplicación, espero que ayude a resolver sus problemas, el problema se enfrentó bc dentro de app tiene consultas graphql que no deben manejarse en SSR, solo en el navegador

@KyleAMathews ¿Qué quieres decir con un sitio de ejemplo? ¿Quieres agregar algo? Puedo trabajar en esto ...

gatsby-config.js

plugins: [
    `app-layout`, // I set my layout
    {
      resolve: `app-client-only`, // I handle app pages
      options: { prefixes: [`/app/*`] },
    },
  ],

plugins / app-layout / gatsby-node.js

// Implement the Gatsby API “onCreatePage”. This is
// called after every page is created.
exports.onCreatePage = ({ page, boundActionCreators }) => {
  const { createPage } = boundActionCreators;

  if (page.path.match(/^\/app/)) {
    // It's assumed that `app.js` exists in the `src/layouts/` directory
    page.layout = "app";
  }

  return true;
};

plugins / app-client-only / gatsby-node.js

// Prefixes should be globs (i.e. of the form "/*" or "/foo/*")
const validatePrefixEntry = prefix => {
  if (!prefix.match(/^\//) || !prefix.match(/\/\*$/)) {
    throw Error(
      `Plugin "gatsby-plugin-client-only-paths" found invalid prefix pattern: ${
        prefix
      }`
    )
  }
}

exports.onCreatePage = ({ page, store, boundActionCreators }, { prefixes }) => {
  const { createPage, deletePage } = boundActionCreators
  const re = {}
  prefixes.forEach(validatePrefixEntry)

  return new Promise(resolve => {
    // Don't set matchPath again if it's already been set.
    if (page.matchPath || page.path.match(/dev-404-page/)) {
      resolve()
    }

    prefixes.some(prefix => {
      if (!re[prefix]) {
        // Remove the * from the prefix and memoize
        const trimmedPrefix = prefix.replace(/\*$/, ``)
        re[prefix] = new RegExp(`^${trimmedPrefix}`)
      }

      // Ensure that the path ends in a trailing slash, since it can be removed.
      const path = page.path.match(/\/$/) ? page.path : `${page.path}/`

      if (path.match(re[prefix])) {
        page.matchPath = prefix.replace(/\*$/, `:path`)
        if (path != '/app/') {
          // <<<<<<<<<<<<<<<<< here is my modification >>>>>>>>>>>>>>>>>>>>>>>
          // do not try to process on SSR, user needs to be logged to
          // consume GraphQL API and render `app` pages correctly
          deletePage(page)
          // <<<<<<<<<<<<<<<<< here is my modification >>>>>>>>>>>>>>>>>>>>>>>
        }
        // createPage(page)
        return true
      }

      return false
    })

    return resolve()
  })
}

Así que no estoy seguro de si este problema está 100% relacionado con @KyleAMathews , pero no importa lo que haga, mis 404 de ruta solo para el cliente inicialmente, luego comienzan a cargar (y los usuarios se van antes de que comience a cargar)

pages / app / index.js:

import CreateSchedule from './components/CreateSchedule'
import ViewSchedule from './components/ViewSchedule'
...
  <ApolloProvider client={client}>
        <Provider store={store}>
          <Switch>
            <Route exact path="/app" component={CreateSchedule} />
            <Route path="/app/:id" component={ViewSchedule} />
          </Switch>
        </Provider>
      </ApolloProvider>

gatsby-node.js

exports.onCreatePage = async ({ page, boundActionCreators }) => {
  const { createPage } = boundActionCreators

  // page.matchPath is a special key that's used for matching pages
  // only on the client.
  if (page.path.match(/^\/app/)) {
    page.matchPath = '/app/:path'

    // Update the page.
    createPage(page)
  }
}

También probé el complemento gatsby-plugin-create-client-paths sin suerte.

Mi componente CreateSchedule funciona bien sin 404ing: https://www.appointmentscheduler.org/app

El problema está en la ruta / componente ViewSchedule: https://www.appointmentscheduler.org/app/1b42d8e8-66b5-4a8d-a0b5-fd4bb13bed09

Ah, y el 404 solo ocurre una vez construido: el servidor de desarrollo no tiene este problema

¿Algunas ideas?

@ Frozenmd Necesita enrutamiento del servidor para eso. Si usa netlify, puede instalar gatsby-plugin-netlify y generará la configuración de enrutamiento del servidor automáticamente (veo que tiene netlify-identity-widget; no estoy seguro de si eso significa exactamente que lo está usando para servir su sitio)

¡Increíble!
¡Gracias @pieh!
Parece que el inicio de netlify que usé (https://github.com/konsumer/gatsby-starter-bootstrap-netlify) no tenía 'gatsby-plugin-netlify' en gatsby-config.js

Agregar eso e implementar ha solucionado este problema 😄

@KyleAMathews un problema adicional potencialmente con el uso de Gatsby parece ser la probabilidad de respuestas 503 (denegación de servicio) de los servidores donde está alojada la API, debido a la naturaleza de Gatsby succionando la API completa a la vez Acercarse. Actualmente estoy experimentando esto con el alojamiento de GoDaddy; cuando ejecuto 'gatsby development', parece que el límite máximo de conexiones simultáneas se alcanza instantáneamente. ¿Es esto de hecho lo que está pasando? Funciona muy bien a nivel local (desacoplado Drupal> Gatsby), pero no cuando está alojado en GoDaddy. Cualquier consejo muy apreciado.

@ cf73, ¿ ha intentado apuntar su DNS de GoDaddy a algo más apto para Gatsby como Netlify?

@ Frozenmd para aclarar, el CMS sin cabeza de drupal está alojado en GoDaddy; el sitio de Gatsby todavía se está ejecutando localmente. así que, a menos que te haya entendido mal, no veo cómo Netlify podría ayudar.

@ cf73 https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-drupal/src/gatsby-node.js probablemente podría usar algún tipo de cola (estamos usando better-queue en otros lugares) en lugar de Promise.all para limitar la solicitud simultánea a algo más manejable. ¿Cree que podría implementarlo?

@pieh sí, vi el uso de better-queue, suena como una solución decente. Sin embargo, me temo que no puedo hacerlo yo mismo: me tropecé aquí tratando de resolver el error 503 para un gran proyecto de cliente en el que estoy trabajando, para el cual me encantaría usar Gatsby. los plazos son ajustados, así que si no hay una solución para esto en las próximas horas o como máximo al día siguiente, tendré que buscar otro enfoque. ¿Alguien puede sugerir lo que podría hacer al instante (incluido el cambio de alojamiento si es necesario) para resolver esto? ¿Existe un flujo de trabajo probado de drupal + hosting + Gatsby?

@ cf73 Lo siento acerca de los plazos: si pudiera compartir la configuración de su sitio de drupal, tendría un sitio para probar los cambios (ya sea públicamente aquí o en privado en discordia: https://discordapp.com/invite/0ZcbPKXt5bVoxkfV con PM para yo - mi mango es grajen3), vería si puedo hacerlo yo mismo hoy

@pieh eso sería increíble, gracias !!

@KyleAMathews Me enfrento a un problema desesperado mientras trabajo en el sitio de un cliente, que estoy seguro de que es fácil, pero me falta algo. Stack es Drupal JSON-API para graphiql de Gatsby. No me permite pasar argumentos a los nodos (ver adjunto). Por lo que puedo decir, ¿esto se debe a que el esquema de Drupal de Gatsby no está completamente desarrollado? ¿O me estoy perdiendo un paso? Cualquier ayuda urgente y muy apreciada !!

La consulta debe ser:

NodeArticle(id: { eq: GUID }) {
  id
  ...otherFields
}

También puede filtrar allNodeArticle por la identificación, pero si solo está seleccionando una cosa, es más limpio consultar NodeArticle directamente.

@KyleAMathews ¡ muchas gracias! ¿Puede indicarme alguna documentación en la que esté cubierto? No me he encontrado con esto hasta ahora ... ¿es exclusivo de cómo Gatsby habla con Drupal, o un comportamiento estándar central de GraphQL que me acabo de perder? ¿Podría ser una idea para promover cualquier documentación específica de la fuente como esta de manera más visible junto con el complemento de fuente?

Esta es la función principal de gatsby (filtrado a nivel de consulta raíz), no específica de drupal. Los complementos de origen no pueden definir el esquema graphql: esta es una tarea que realiza gatsby core en función de los datos "sin procesar" proporcionados por los complementos.