Gatsby.js + React.js

Hace unos meses me encontré proponiendole a un ingeniero la posibilidad de llevar su aplicación IoT más allá de un simple gateway que recibe bytes crudos. La propuesta fue una plataforma SaaS la cual se especializaría en la visualización de los datos obtenidos por medio de distintos sensores. Esta información es dinámica y eso significa que se deben de tomar decisiones importantes en la arquitectura del servicio por instalar.

Entre todas las opciones y posibilidades opté por utilizar Gatsby.js ya que es una herramienta con la que estoy bastante familiarizado y permite un SEO óptimo para el lanzamiento de productos. Sin embargo hacía falta la parte dinámica de la plataforma y, afortunadamente, había escuchado sobre la posibilidad de unir la generación de sitios web estáticos de Gatsby.js junto a las rutas del lado de cliente de React.js.

Para realizar esto sólo inicialicé un repositorio con gatsby new mi-app-dinamica y en el archivo llamado gatsby-node.js es necesario escribir el siguiente pedazo de código

gatsby-node.js

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

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

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

Este snippet lo obtuve del tutorial para autentificación de usuarios en la documentación de gatsby. Básicamente todo aquello que viva dentro de la ruta https://example.com/app/* será tratado como una aplicación de React.js.

Para tratar el tema de las rutas por lo regular se utilizaría algo como react-router, sin embargo Gatsby.js ya utiliza por default @reach/router, por lo que es necesario instalarlo en el proyecto mediante npm i @reach/router.

Finalmente es necesario crear el archivo /src/pages/app.js. Se pueden obtener los mismos resultados que se esperarían de React.js dentro de este componente. Como ejemplo del código podríamos escribir algo así:

app.js

import React from "react";
import { Router } from "@reach/router";
import "bootstrap/dist/css/bootstrap.min.css";
import Dashboard from "../modules/Dashboard";
import Signup from "../modules/Signup";
import Login from "../modules/Login";
import PrivateRoute from "../modules/PrivateRoute";
import NotFoundPage from "../pages/404";
import { AuthProvider } from "../contexts/AuthContext";

const App = () => {
  return (
    <AuthProvider>
      <Router>
        <NotFoundPage default />
        <Signup path="/app/signup" />
        <Login path="/app/login" />
        <PrivateRoute as={Dashboard} path="/app" />
      </Router>
    </AuthProvider>
  );
};

export default App;