¿Qué es create-app?

create-app provee una estructura estandarizada para construir aplicaciones de frontend totalmente basadas en lenguaje JavaScript de forma fácil y rápida ofreciendo una solución out of the box en donde el desarrollador solo tiene que pensar en los aspectos de negocio de su aplicación.

Tecnologías en las que se basa

create-app está pensado para construir aplicaciones React e implementa Server Side Rendering (SSR) por defecto, Node como tecnología de Backend For Frontend (BFF) y Jest como herramienta de testing.

Módulos principales
Node.js
Express.js
React.js
Jest.js

Features

Server-Side Rendering (con React)
Client-Side Rendering (con React)
Universal React Components
ES6 Transpilation (para el cliente)
Pre-processor: SASS
Post-processor: autoprefixer
Bundling and minifying JS & CSS (Webpack)
Multiple Bundles & Code Splitting
Performance
Configurable
Modular
Seguro

Estructura general y directorios principales

├── index.js  (Entry point donde se inicializa el server)
│
├── api/ (API router y todo lo relacionado a la api)
│   ├── index.js (exporta una instancia de router de express)
│   └── demo.js
│
├── app/  (App router y todo lo relacionado a la app)
│   ├── client/ (opcional, si va a funcionar client-side)
│   │   ├── polyfills.js (client es6 polyfills)
│   │   └── demo.js (Hidratación del cliente, uno por cada page)
│   │ 
│   ├── server/
│   │   └── index.js (router principal, define las rutas a las diferentes pages)
│   │ 
│   ├── pages/ (Páginas que componen la aplicación)
│   │   └── demo/
│   │       ├── index.js (router de vista, define las diferentes rutas de la vista)
│   │       ├── controller.js (Se comunica con los servicios y renderiza la vista)
│   │       ├── view.js (contiene la vista a ser renderizada, componente principal)
│   │       └── styles.scss (todos los estilos de la vista)
│   │ 
│   ├── components/ (Componentes de react compartidos entre todas las pages)
│   │   └── Header/
│   │       ├── tests/ (Tests del componente)
│   │       │   └── header.spec.js
│   │       ├── index.js
│   │       ├── index.scss
│   │       └── README.md
│   │ 
│   ├── styles/ (Estilos globales)
│   │   ├── _common.scss
│   │   └── _variables.scss
│   │ 
│   ├── translations/ ([WIP] Pensado para futuras traducciones)
│   │ 
│   └── assets/ (Assets de la aplicación)
│       ├── fonts/
│       └── images/
│
├── services/  (Módulos compartidos entre api y app)
│   ├── transforms/ (opcional, acá se definen funciones transformadoras de respuestas)
│   └── demo.js (Clase que contiene las llamadas para obtener datos, se usa uno por API)
│
├── mocks/ ([WIP] mocks de los servicios para development)
│
├── config/ ([WIP] Configuraciones globales según entorno: prod, dev o test)
│   ├── production.js
│   ├── development.js
│   └── test.js
│
├── tests/ (Tests e2e y unitarios de cada página)
│
├── coverage/  ([gitignored] Carpeta dinámica de reportes de cobertura de tests)
├── build/  ([gitignored] Carpeta dinámica de build productivo para el cliente)
├── .babelrc
├── .editorconfig
├── .gitignore
├── README.md
├── webpack.config.js
└── package.json

¿Cómo se utiliza?

¡Es muy fácil! Sigue los pasos detallados a continuación:

Creamos un nuevo repositorio para nuestra app desde la página principal de Fundasoft en GitHub
·
Elegimos como template el de Fundasoft/create-app para nuestro nuevo repositorio
·
Marcamos la opción para incluir todos los branches del template, ponemos como owner a Fundasoft, elegimos un nombre para nuestro repositorio, agregamos una descripción (opcional) y seleccionamos la opción para que sea público
·
Creamos el repositorio y ¡listo! ¡estamos para comenzar a codear!

¿Cómo correr la aplicación?

Es necesario tener instalado Node.js v10 o superior y npm v6 o superior, para saber como hacerlo pueden ir a la página del proyecto https://nodejs.org/.

Cuando tengamos node y npm instalados nos paramos en la raíz del proyecto y ejecutamos los siguientes comandos en la consola del sistema operativo

npm install

Esto instalará todas las dependencias necesarias para que funcione el proyecto.

Cuando se terminen de instalar las dependencias ejecutamos el comando

npm run build

Esto va a buildear la app preparando los archivos necesarios para ejecutar la app. Para que automaticamente se buildee la app ante un cambio podemos ejecutar el siguiente comando

npm run watch

En otra consola ejecutamos el siguiente comando para iniciar el servidor de desarrollo

npm run start-dev

Si no dio ningún error hasta esta insancia, vamos a nuestro navegador preferido y abrimos la url http://localhost:3000/demo, veremos la app demo (como se muestra en la imagen) que hace llamadas a una API placeholder (https://api.chucknorris.io). Si, esta api devuelve chistes de Chuck Norris - Él seguramente lo aprueba - , vemos que el front tiene un botón que renueva los chistes haciendo una llamada nuevamente a la API, demostrando que la aplicación es Server Side y Client Side.

Para ejecutar los tests unitarios automáticos de la aplicación (viene con algunos de ejemplo), ejecutar el siguiente comando

npm run test:unit

¿Cómo colaborar?

Si se te ocurre una funcionalidad que estaría buena agregar o un bug que encontraste por favor levantá un issue describiendo el caso con detalle.

Si se obtiene concenso entre los mantainers del proyecto de que es algo necesario para agregar/arreglar, enviar un PR que apunte a develop con las modificaciones (acordate de linkear el issue en al PR) para su revisión.