Clon basico de ghost implementando Reactjs

Hacer un blog !!! que gran novedad.... "muchos pensaran", lo cierto es que muchas veces utilizamos gestores de contenidos como Ghost, Wordpress, drupal entre otros, y no nos damos cuenta de la complejidad que se nos oculta por parte de los desolladores y diseñadores de interfaces por el excelente trabajo que realizan. Asi que como reto personal decidí hacer un blog con lo ultimo que aprendi en platzi (node y react), para ver que tan complejo es hacer un gestor de contenido.

En esta url se encuentra el demo https://blog-reactjs.herokuapp.com/ , para realizar ediciones del contenido en la ruta https://blog-reactjs.herokuapp.com/admin con los datos:

  • usuario: demo
  • password: demo123

El proyecto se encuentra en github, para su descarga y modificación, https://github.com/debian789/blog-react

Librerias, plugins a implementar

Lo primero que me enfrente fue en la elección de los plugin y librerías que necesitaría; en el lado del server implemente las siguientes:

  • body-parser (manejar información desde los formularios)
  • cookie-parser
  • express (core principal del manejo de rutas y liberias externas )
  • express-session (manejo de sessiones con express)
  • hjs (gestor de plantillas)
  • mongoose (Manejar las consultas y conexions a mongodb)
  • passport (liberia principal para la gestion de inicio de sesion)
  • passport-local (estrategia para la autenticación local, no redes sociales)
  • passport-local-mongoose (registro y validacion de password del registro del usuario)

liberias implementadas en el lado del cliente:

  • marked (convertir texto markdown a html)
  • react (liberia para el manejo de vistas)
  • react-dom (liberia para manipular el DOM )
  • react-router (Manejo de rutas)
  • superagent (Realizar peticiones get,post, put ...)
  • highlight.js (formatear con estilo las etiquetas code )

hasta aqui sin problemas, pero la idea era poner algo complejo la experiencia del desarrollo y utilizar el ultimo estándar de javascript, ECMAScript 6 pero para esto fuera funcional en la mayoría de navegadores y no colocara problemas el compilador de node, fue necesario utilizar los super poderes de babel y sus preset, en conclusion para la parte de compilación y estandarización del código utilice la siguientes:

  • babel-cli (poder utilizar babel en la linea de comandos )
  • babel-preset-es2015 (convertir ECMAScript6 a ECMAScript5)
  • babel-preset-react (poder interpretar el codigo de react)
  • babelify (poder utilizar babel con browserify)
  • browserify (utilizar comandos y liberias de forma avanzada)
  • stylus (preprocesador de css)

todas estas liberias fueron instaladas desde npm

Estructura del proyecto

Listo ya se tenia la idea, las liberias a utilizar, y el modelo a seguir que era Ghost, ahora solo faltaba codificar, pero antes de toda codificación es un analisis de como estaria formado el proyecto y los modulos en los que se dividiria "divide y venceras", asi que forme la siguiente estructura del proyecto:

- cliente/
- - components/
- - recursos/ 
- - static/ 
- - stylus/ 
- dist/
- public/
- server/ 
- - config/ 
- - models/ 
- - routers/ 
- - views/
- - server.js
- package.json
- Procfile
  • cliente: Se maneja toda la logica del frontend
  • components: Se maneja los componentes que se creen con react
  • recursos: Se maneja los recursos los cuales se utilizan en el proyecto, en este caso guarde el archivo de icomoon.zip, porque si necesito cambiar algún icono lo enlazo a la pagina principal de icomoon, selecciono y actualizo
  • static: Se maneja los archivos que no cambian en el proyecto, imagenes, css
  • dist: compilado de babel de los archivos del server
  • server: Se maneja los archivos de server; interacción con la base de datos, manejo de session, permisos y rutas base
  • config: Se maneja los archivos de configuración y acceso a la DB
  • models: Se maneja los modelos de las colecciones de mongoDB
  • routers: Se maneja las rutas base que gestionara node, y su logica respectiva
  • view: Se maneja las vistas publicas, privadas y de inicio de session
  • server.js: Archivo de configuración del server
  • package.json: Archivo para los parametros del proyectos y dependencias, y comandos a utilizar por npm
  • Procfile: Archivo para la gestión del comando que sera implementado en heroku

Por motivos de no alargar tanto la historia, no especificare el contenido de las carpetas te invito a mirar el proyecto en github https://github.com/debian789/blog-react

Compilar y puesta en marcha

Hay vamos, ideando, estructurando y codificando, pero falta probarlo, en este momento surgió un gran dilema, node a adoptado parte del estandar de ECMAScript6 pero no todo, especialmente el de importar los modulos, para resolver este pequeño problema esta babel y browserify...

Esta historia continuara ....