Crear monorepo con creact-react-app

May 27, 2019 • ☕️ 2 minutos de lectura

ZEIT Now es una plataforma para implementar aplicaciones serverless y que nos ayuda a simplificar mucho las cosas. Necesitarás unas cuenta, puede registrarte aquí

Instalación

Para empezar instalaremos now CLI.

npm install -g now

A continuación debemos logearnos.

now login

Nos pedirá nuestro correo electrónico y nos enviará un enlace para logearnos.

Crear app en react

Ahora crearemos una aplicación de react.

npx create-react-app proyecto-nonorepo
cd nonorepo
yarn start

Configurar now

Creamos el archivo now.json para configurar el deploy de nuestra aplicación en react, siguiendo la documentación oficial.

{
  "version": 2,
  "name": "proyecto-monorepo",
  "builds": [
    {
      "src": "package.json",
      "use": "@now/static-build",
      "config": { "distDir": "build" }
    }
  ],
  "routes": [
    {
      "src": "/static/(.*)",
      "headers": { "cache-control": "s-maxage=31536000,immutable" },
      "dest": "/static/$1"
    },
    { "src": "/favicon.ico", "dest": "/favicon.ico" },
    { "src": "/asset-manifest.json", "dest": "/asset-manifest.json" },
    { "src": "/manifest.json", "dest": "/manifest.json" },
    { "src": "/favicon.png", "dest": "/favicon.png" },
    { "src": "/precache-manifest.(.*)", "dest": "/precache-manifest.$1" },
    {
      "src": "/service-worker.js",
      "headers": { "cache-control": "s-maxage=0" },
      "dest": "/service-worker.js"
    },
    {
      "src": "/(.*)",
      "headers": { "cache-control": "s-maxage=0" },
      "dest": "/index.html"
    }
  ]
}

Además debemos añadir la siguiente linea a nuestro fichero package.json

{
  "scripts": {
    // ...
    "now-build": "react-scripts build"
  }
}

Crear microservicio

Lo primero será crear un nuevo proyecto con npm e instalar las dependencias necesarias para nuestro proyecto

npm init -y
npm i express body-parser nodemailer cors --save

Ahora vemos a crear un microservicio muy simple para enviar correos electrónicos desde nuestro microservicio usando nodemailer y express.

mkdir api
touch api/index.js
cd api/

api/index.js

const express = require("express")
const bodyParser = require("body-parser")
const nodemailer = require("nodemailer")
const cors = require("cors")

const app = express()

const port = 4444

app.use(
  bodyParser.urlencoded({
    extended: true,
  })
)
app.use(bodyParser.json())

app.use(cors())

app.listen(port, () => {
  console.log("Aplicación corriendo en http://localhost:4444")
})

app.get("/api", (req, res) => {
  res.send("Bienvenido a la API")
})

app.post("/api/send-mail", (req, res) => {
  var data = req.body
  console.log(req.body)

  var smtpTransport = nodemailer.createTransport({
    service: "Gmail",
    port: 465,
    auth: {
      user: "email@gmail.com",
      pass: "password",
    },
  })

  var mailOptions = {
    from: data.email,
    to: "tu@email",
    subject: "Contacto desde un microservicio",
    html: `<p>${data.name}</p>
          <p>${data.email}</p>
          <p>${data.message}</p>`,
  }

  smtpTransport.sendMail(mailOptions, (error, response) => {
    if (error) {
      res.send(error)
    } else {
      res.send("Enviando con éxito")
    }
    smtpTransport.close()
  })
})

Añadir microservicio a now

Para añadir un microservicio a nuestro proyecto, editaremos now.json y añadiremos lo siguiente.

{
  "builds": [
    // ...
    { "src": "/api/index.js", "use": "@now/node-server" }
  ],
  "routes": [
    // ...
    { "src": "/api/(.*)", "dest": "/api/index.js" }
  ]
}

Por último solo tenemos que hacer deploy con mediante now

now