Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

@fizzmod/vtexflash

0.5.5 • Public • Published

VtexFlash

Vtexflash es una herramienta para desarrollar en un ambiente local y para buildear el proyecto. Internamente corre un ambiente de Node y utiliza Express como servidor. Para parsear los archivos y compilarlos utiliza Webpack.

¿Cómo instalar?

Vtexflash viene como un paquete de npm. Para instalarlo en tu proyecto simplemente corre el siguiente comando:

npm install @fizzmod/vtexflash@latest

Comandos

La herramienta viene con scripts ejecutables con Node que estan disponibles dentro de la carpeta ./node_modules/.bin/.

Los scripts se ejecutan de la siguiente manera, ejemplo:

node ./node_modules/.bin/vtex-flash

vtex-init

Setup inicial, crea las carpetas con la estructura del proyecto. Para mas información sobre la estuctura del proyecto click aquí.

vtex-flash

Inicia el servidor local de desarrollo. Para funcionar requiere los archivos de configuracion vtex-flash.conf y vtex-uploader.conf. Para mas información sobre los archivos de configuracion click aquí.

Este comando acepta la flag --module que sirve para módulos de configuración simple. Con esta flag la entry file solo puede ser index.js dentro de la carpeta src/js. También acepta un archivo css que tiene que ser llamado index.css o index.scss. Estos archivos generan como output index.js e index.css. Estos archivos se injectan dentro de un HTML que se sirve en la ruta del proyecto que tengas configurado dentro del home ignorado el HTML subido en vtex.

En caso de error por uso del PORT 80, correr como administrador con sudo.

vtex-build

Compila la aplicación. Genera los archivos listo para subir a producción dentro de la carpeta ./build. Cuando genera los archivos esta carpeta es eliminada con sus contenidos y creada de nuevo.

Para saltearse el paso de selección de entries, se puede pasar el argumento -all para que buildee todas las entries.

Configuración

Los archivos .conf tienen que ser JSON válidos. Estos archivos se encuentran al nivel ROOT del proyecto, al mismo nivel que el package.json.

vtex-flash.conf

Propiedades:

Property Type Description
mappings Object.<string, string[]> Map Object with project name as key and list of environments as value

Ejemplo:

{
    "mappings": {
        "fizzmodqa": [
            "sportline"
        ]
    }
}

vtex-uploader.conf

Este archivo es usado por Vtexflash y Vtexuploader.

Propiedades:

Property Type Description
enviroments Object.<string, Enviroment> Map Object with the environment name as key and their properties

Referencias:

Definition Type Description
Environment Object.<string, any> Object with environment configuration
Environment.vtexLogin Boolean ?
Environment.fks Object.<string, Fields> Map Object with the vtex website name as key and a map with name and value
Environment.constants Object.<string, Fields> Map Object with the vtex website name as key and a map with name and value
Environment.timestamp string[] List of file types to add timestamp in the content
Fields Object.<string, string> Map Object with field name as key and the field content as value

Ejemplo:

{
    "environments": {
        "sportline": {
            "vtexLogin": true,
            "fks": {
                "fizzmodqa": {
                }
            },
            "constants": {
                "fizzmodqa": {
                }
            },
            "timestamp": ["templates", "files", "arquivos"]
        }
 
    }
}

webpack.config.js

La herramienta genera de forma automatica una configuracion de wepback según el contenido del proyecto y las opciones seleccionar al iniciar o buildear, pero tambien otorga la posibilidad de editar la configuracion a nivel proyecto con este archivo.

Este archivo tiene que ser como cualquier otra configuración de webpack, tiene que exportar un Object válido con la version de webpack y tiene la prioridad que sobreescribe lo generado por la herramienta.

Intermanente el merge de las configuraciones la hace el modulo webpack-merge con el metodo smart().

Estructura del proyecto

El arbol de carpetas o la estructura del proyecto tiene que seguir el siguiente patron para que la herramienta funcione de forma correcta. Esta estructura contempla el uso de React, Redux con Reselect, SCSS o SASS, y pug.

/                                 - Root
  /src                            - Code folder container
    /html                         - HTML/PUG files
      /data                       - JSON files with data to bind with the view
        /message-center           - JSON files with data to bind with the message templates
      /message-center             - VTEX message center tempaltes

    /js                           - JavaScript files
      /components                 - React component files and folders
      /containers                 - React containers components
      /redux                      - Redux files
        /modules                  - Redux modules, each module should have a reducer, action contants and action creators
        /selectors                - Reselect state calculations modules with functions

    /styles                       - CSS, SASS or SCSS files
      /variables                  - SASS or SCSS variable files

package.json                      - NPM project package file
vtex-flash.conf                   - (Optional)VtexFlash configuration file
vtex-uploader.conf                - VtexUploader configuration file
webpack.config.js                 - (Optional)Custom extended webpack configuration

Links útiles

Keywords

none

install

npm i @fizzmod/vtexflash

Downloadsweekly downloads

60

version

0.5.5

license

none

last publish

collaborators

  • avatar
Report a vulnerability