Índice

• Requisitos previos
• Paso 1
• Paso 2
• Paso 3
  • Opción #1 (Recomendada)
  • Opción #2 ("Rápida")
• FAQ

Requisitos previos

• Una cuenta en IBM Cloud
• IBM Cloud CLI
• Node.js >= v8.10.0 (*)
• (Opcional) Yarn

(*) Recomendado para probar localmente; no es necesario para deployar a IBM Cloud

Paso 1 - Create it

Empecemos sin dolores de cabeza: con create-react-app:

$ npx create-react-app platzi-react-ibmcloud

En caso de que tengas npm <= 5.2 probá con esto:

$ npm i -g create-react-app
$ create-react-app platzi-react-ibmcloud

También vamos a necesitar express para este proceso.

$ npm i -S express

Y para consumir menos memoria en IBM Cloud, necesitaremos un paquete más... Ya vas a ver por qué

$ yarn add if-env
o
$ npm i -S if-env

Paso 2 - Build it

Tenemos que crear un archivo para que se encargue del "lado de servidor (*)" que React no se ocupa (yo lo llamé server.js pero, hey, es un mundo libre, nombralo como quieras). Después, modificar el package.json (a ese no le podemos cambiar el nombre, sorry) y agregarle el comando que deployará hacia IBM Cloud.

server.js

const express = require("express")
const http = require("http")
const path = require("path")
const app = express()

app.use(express.static(path.join(__dirname, "build")))

app.get("/", (req, res) => {
	res.sendFile(path.join(__dirname, "build", "index.html"))
})

const server = http.createServer(app)
const PORT = process.env.port || 3000

server.listen(PORT)
server.on("listening", () => {
	console.log(`Servidor escuchando en el puerto: ${PORT}`)
})

¿Te acordás de if-env que te dije de instalar? Bueno, acá lo usamos:

package.json

{
	"name": "platzi-react-ibmcloud",
	"version": "0.1.0",
	"private": true,
	"dependencies": {
		"express": "^4.16.4",
		"if-env": "^1.0.4",
		"react": "^16.7.0",
		"react-dom": "^16.7.0",
		"react-scripts": "2.1.3"
	},
	"scripts": {
		"start": "react-scripts start",
		"build": "react-scripts build",
+		"postinstall": "if-env NODE_ENV=production && npm run build || echo Avoiding post install",
+		"deploy": "npm run build && node index.js",
		"test": "react-scripts test",
		"eject": "react-scripts eject"
	},
	"eslintConfig": {
		"extends": "react-app"
	},
	"browserslist": [
		">0.2%",
		"not dead",
		"not ie <= 11",
		"not op_mini all"
	]
}

¡Y probá si funciona!

$ npm run build
$ npm run deploy
or
$ yarn build
$ yarn deploy

Y si no funciona, cloná este repositorio ¯\_(ツ)\_/¯

(*) Si querés aprender más de Express.js hay un curso en Platzi

Paso 3 - Push it!

Primero debemos iniciar sesión con ibmcloud login. Recomiendo que antes entren en su explorador a IBM Cloud e inicien sesión antes de ejecutar estos comandos.

$ ibmcloud login
API endpount: https://api.ng.bluemix.net	// Recomendado

Email>
Password>					// No aparece nada a proposito
Authenticating...
OK

$ ibmcloud target --cf
Targeted Cloud Foundry (https://api.ng.bluemix.net)
Targeted org <tu-mail>
Targeted space dev

Y ahora estamos listos para hacer deploy de nuestra aplicación. Acá hay dos maneras:

Opción #1 (Recomendada)

Crear un archivo manifest.yml en el cual especificaremos todos los detalles para que IBM Cloud entienda qué le estamos dando:

manifest.yml

---
applications:
  - name: platzi-react-ibmcloud
    memory: 256M
    command: npm run deploy

También vamos a crear un .cfignore (similar a .gitignore) para que no se pusheen nuestras dependencias a Cloud.

.cfignore

node_modules
build

¡Y ahora por fin!

ibmcloud app push

Este comand busca un archivo manifest.yml en el directorio. Y si lo encuentra, lo lee y procede a subir nuestros archivos y compilarlos hacia Cloud.

Opción #2 ("Rápida")

ibmcloud app push <nombre-de-app>

Tengan paciencia, y esperen a un mensaje así (como mucho, tarda 5 minutos):

name:              platzi-react-ibmcloud
requested state:   started
instances:         1/1
usage:             128M x 1 instances
routes:            platzi-react-ibmcloud.mybluemix.net
last uploaded:     Sun 06 Jan 03:23:57 -03 2019
stack:             cflinuxfs2
buildpack:         SDK for Node.js(TM) (ibm-node.js-6.14.4, buildpack-v3.24-20181128-1339)
start command:     npm run deploy

     state     since                  cpu    memory      disk      details
#0   running   2019-01-06T06:26:19Z   0.0%   0 of 128M   0 of 1G

Si no aparece, bueno... Cloná el repositorio y reintentalo con otro nombre, o creá un Issue.

FAQ

"¿Es necesario un tutorial para esto?"

Obvio que hay muchas guias ya hechas (acá hay una, acá otra...) pero esta es una solución que quise compartirles. Son libres de probras otras, según a gusto de cada uno, o jugar con algún framework que les ayude mejor (como Next.js, GatsbyJS, etc.)

"En now.sh o Heroku puedo hacerlo fácil"

Totalmente de acuerdo, y podés seguir tu vida con esas plataformas si querés.

Pero si buscás escalar tu desarrollo (integrando servicios varios, como una base de datos o Inteligencia Artificial de manera "más seria" o eficiente), hacer tu aplicación más segura o simplemente para probar algo distinto, este es el camino adecuado para hacerlo.

"Me parece demasiado complicado IBM Cloud para un simple create-react-app"

I've been there. Todo tiene una razón de ser, y no es distinto en el mundo de la tecnología. Y aunque asuste al principio todo esto, a medida que aprendas y te metas en Cloud, vas a notar las grandes virtudes y por qué tantas empresas eligen IBM Cloud.

create-react-app ya lo conocemos, pero lo que no conocemos es Cloud Foundry y sus ventajas/desventajas, Docker en la nube... Necesitamos ampliar nuestro conocimiento, y este es un buen punto de partida.