Desplegando tu aplicación React.js con Apache

Estás empezando React.js y su create-react-app y quieres desplegar en un servidor Apache tus desarrollos más recientes?
Pues eso me ha pasado a mí. Aquí pueden ver mi aplicación de reminders.

Ahora que lo he conseguido, no se me ha podido ocurrir otra cosa que compartir con vosotros los sencillos pasos que hay que seguir para desplegar tu aplicación React.js en un servidor Apache. Es trivial.

Lo primero será tener nuestra aplicación, para ello usaremos la herramienta que mencionamos anteriormente:

Bien, ahora ya tenemos nuestra aplicación.
El siguiente paso será construirla:

Una vez que ya tenemos nuestra aplicación lista para ser desplegada en producción, vamos a seguir dos pasos más:

  1.  Copiar el contenido que se ha generado en la carpeta ‘build‘, dentro de la carpeta de nuestro servidor.
  2.  Añadir un ‘.htaccess‘ que nos permita el correcto funcionamiento:

Una vez realizados estos pasos ya tendremos nuestra aplicación lista en producción. Efectivamente, es así de simple.

ONE MORE THING

Bueno, la verdad es que puede que aún no hayamos terminado. Podríamos decir que esto es así de simple si nuestra aplicación reside en la carpeta raíz de nuestro servidor web. Ahora bien, si vais a subir vuestra aplicación en un directorio dentro de la misma, como en mi caso (/reminders), entonces tenéis que realizar un paso más.

La cuestión es que la generación del código fuente de React.js asume que nuestra aplicación estará alojada en la raíz de nuestro servidor. Eso implica que las dependencias de nuestro HTML estén definidas de la siguiente manera:

Si os fijáis, todos los enlaces (href) empiezan con el carácter ‘/’.
Pues bien, lo único que os faltará por hacer para que vuestra aplicación funcione correctamente será reemplazar dicho carácter, de ésta forma nuestros recursos serán buscados en la carpeta dónde esté alojada la aplicación.

Y ahora sí, eso es todo! Aunque, evidentemente, el “problema” comentado en este último paso puede ser resuelto de distintos modos.

Gracias!