Skip to content

Latest commit

 

History

History
225 lines (195 loc) · 9.24 KB

README.md

File metadata and controls

225 lines (195 loc) · 9.24 KB

reactjs-appstructure

Traducciones

Comenzando

Clonar el repositorio en un directorio local. Ver la sección «despliege» (deployment) para notas de como correrlo en un ambiente productivo.

Pre-requisitos

  • Node.js 8+ (LTS) Instalación de nodeJS:
$ sudo apt-get update
$ sudo apt-get install nodejs
  • Npm 3.10+ Instalación de npm:
$ sudo apt-get install npm
$ npm -v

Si la versión de npm es menor a la recomendada, proceder con:

$ sudo npm install npm@latest -g

Si la versión de nodeJS es menor a la recomendada, proceder con:

$ sudo npm cache clean -f
$ sudo npm install -g n
$ sudo n stable

NOTA: Particularmente en ubuntu el binario para nodeJS es "nodejs" en vez de "node" debido a otro paquete. Si se requiere llamarlo como "node" se procederá con:

$ sudo ln -sf /usr/local/n/versions/node/<VERSION>/bin/node /usr/bin/nodejs

En donde <VERSION> es la última versión instalada.

Instalación de proyecto

####Clonar el repositorio:

$ git clone https://github.com/tecnocen-com/reactjs-appstructure.git

####Entrar en el proyecto:

$ cd reactjs-appstructure

####Editar las condiciones iniciales del proyecto a desarrollar:

  • requestHandlers.js: En este archivo se definirán las condiciones de acceso al servicio.
...
4 |     baseURL: "http://34.239.10.155/index.php/api",
5 |     dataURL: "/v1/",
6 |     tokenURL: "/oauth2/token"
...

La línea 4 baseURL se refiere a la raíz del servicio a consumir, sustituir su valor con la URL apropiada. La línea 5 dataURL se refiere al acceso a la información del servicio, sustituir su valor con la URL apropiada. La línea 6 tokenURL se refiere a accesso a la autenticación del servicio, sustituir su valor con la URL apropiada.

  • package.json: En este archivo se definirán otros datos relacionados con el proyecto.
...
2 |   "name": "reactjs-appstructure",
3 |   "version": "0.1.0",
4 |   "description": "Structure for web applications based on reactJS framework",
...
10 |   "keywords": [
11 |     "reactJS"
12 |   ],
13 |   "author": "Marcos Jesús Chávez Vega",
14 |   "license": "ISC",
...

La línea 2 "name" se refiere al nombre del proyecto, sustituir su valor con el nombre del proyecto (sin espacios y únicamente en minúsculas). La línea 3 "version" se refiere a la versión del proyecto, sustituir con la versión apropiada. La línea 4 "description" se refiere a la descripción del proyecto, sustituir su valor con la descripción apropiada. La línea 10, 11 y 12 "keywords" se refiere a las palabras clave del proyecto, agregar las palabras clave apropiadas. La línea 13 "author" se refiere al desarrollador del proyecto, sustituir con el nombre apropiado. La línea 14 "license" se refiere a la licencia del proyecto, sustituir con el valor apropiado.

...
1 | reactjs-appstructure
...

La línea 1 se refiere al nombre del proyecto, sustituir su valor con el nombre del proyecto.

  • README.md: En este archivo se definirán las características de instalación, uso y definición del proyecto.
...
1 | reactjs-appstructure
...
47 | $ git clone https://github.com/tecnocen-com/reactjs-appstructure.git
...
52 | $ cd reactjs-appstructure
...

La línea 1 se refiere al nombre del proyecto, sustituir su valor con el nombre del proyecto. La línea 47 se refiere a la URL para poder clonar el proyecto, sustituir con el valor apropiado. La línea 52 se refiere a la carpeta creada al clonar el proyecto, sustituir con el valor apropiado.

Con respecto a la demás descripción en este archivo, modificar a conveniencia.

####Instalar dependencias npm:

$ npm install

##Estructura del proyecto

  • build: dentro de esta carpeta se generarán los archivos core a partir del módulo webpack.
  • client: dentro de esta carpeta existen todos los archivos involucrados al proyecto del lado del cliente.
    • assets: dentro de esta carpeta se guardarán todos los archivos involucrados con algún template predefinido, en caso de usarse.
    • file: dentro de esta carpeta se guardarán todos los archivos involucrados en los procesos del proyecto (PDF, XLSX, etc...).
    • image: dentro de esta carpeta se guardarán todas las imagenes involucradas en los procesos.
    • style: dentro de esta carpeta se guardarán todos los archivos de estilos personalizados.
    • js: dentro de esta carpeta existen todos los archivos JSX relacionados con el proyecto.
      • home: dentro de esta carpeta existen todos los archivos JSX responsables de crear componentes para el proyecto, una vez autenticado, fragmentados en carpetas con nombres de cada vista.
        • plugins: dentro de esta carpeta existen todos los archivos JSX generados como plugins para ejecutar acciones propias dentro del proyecto y en conexión con los servicios.
        • common: dentro de esta carpeta existen todos los archivos JSX que generan componentes que se interrelacionan durante todas las vistas.
        • dashboard: dentro de esta carpeta existen todos los archivos JSX relacionados con el dashboard.
        • test: dentro de esta carpeta existen todos los archivos JSX relacionados con la página test.
      • index: dentro de esta carpeta existen todos los archivos JSX responsables de crear componentes para el proyecto al inicio.

NOTAS:

  • La carpeta test dentro de home, posee un ejemplo simple de vista, pudiéndose duplicar cuantas veces se requiera para comenzar el desarrollo real del proyecto.
  • Para incluir los componentes duplicados en las vistas, deberán incluirse en el archivo homeT.jsx dentro de la carpeta home para su inclusión y renderizado, respectivamente; así como su anexo en menu.jsx dentro de common.

##Visibilidad ####Visibilidad de cambios: Para asegurar la visibilidad de los cambios realizados en código del proyecto deberá actualizarse el archivo core de desarrollo a su versión más reciente:

$ npm run build

NOTA: Si existieran errores de sintaxis podrán visualizarse después de este comando.

####Visibilidad del proyecto en el navegador:

$ node index.js

Posteriormente acceder a localhost:8080

Guías de estilo

Para más información leer los plan de integración de tecnocen, en la sección lineamientos desarrollo JavaScript.

Corriendo las pruebas

(Por definir)

Desempaquetado (deployment)

Para usar el proyecto en ambiente productivo, deberá situarse a nodeJS en ambiente productivo y compilar los archivos core:

  • Linux
$ NODE_ENV=production; npm run build
  • Windows
$ set NODE_ENV=production
$ npm run build

NOTA: Si existieran errores de sintaxis podrán visualizarse después de estos comandos.

Posteriormente deberán modificarse los siguientes archivos:

  • client/index.html: En este archivo se incluirán los archivos minificados para el login del proyecto.
...
19 |     <script type="text/javascript" src="/build/index.bundle.js"></script>
...
23 |     <!--<script type="text/javascript" src="/build/index.min.js"></script>-->
...

La línea 19 deberá comentarse, ya que incluye al core del proyecto generado por webpack en ambiente de desarrollo. La línea 23 deberá descomentarse, ya que incluye al core del proyecto generado por webpack en ambiente de producción.

  • client/home.html: En este archivo se incluirán los archivos minificados para todo el resto del proyecto.
...
20 |     <script type="text/javascript" src="/build/home.bundle.js"></script>
...
24 |     <!--<script type="text/javascript" src="/build/home.min.js"></script>-->
...

La línea 20 deberá comentarse, ya que incluye al core del proyecto generado por webpack en ambiente de desarrollo. La línea 24 deberá descomentarse, ya que incluye al core del proyecto generado por webpack en ambiente de producción.

Para finalmente visualizar el proyecto en el navegador:

$ node index.js

Construido con

Contribuciones

(Por definir)

Versionamiento

Para más información leer los plan de integración de tecnocen, en la sección versionamiento.

Autores

  • Marcos Jesús Chávez V - Tecnocen.com - onca-vega

Licencia

Licencia ISC.