Iniciar una Store en VTEX IO

Suponiendo que ya tenemos instalada VTEX IO CLI (Command Line Inteface) en nuestro sistema, para comenzar a desarrollar nuestra primer Store necesitamos además en repositorio base de la misma.

Templates IO

VTEX ya nos provee algunos templates / boilerplates, tales son:

Normalmente, deberíamos hacer la instalación del template que más se ajuste a nuestras necesidades, por lo general el primero; sin embargo, en CRUCE, tenemos un template propio: CRUCE IO Template

La dos diferencias principales que tiene son:

Uso de SASS
Estructura de carpetas y bloques.
Estilos basados en tokens

Instalación del Template

Una vez hayamos descargado el repositorio y estemos situados dentro de la carpeta principal, ejecutamos:

con PNPM:

pnpm install

con Yarn:

yarn install

A partir de acá, vamos a continuar con PNPM

Escuchar los cambios en el código

VTEX nos ofrece de un comando para iniciar la store en modo development: vtex link.

Con él, se levanta una instancia de nuestra tienda en el navegador en la cual podemos ir probando aquellos cambios que vamos haciendo, sean de estilos o de bloques.

Pero nuestro template tiene otro tipo de configuraciones en cuanto a uso de estilo; mientras VTEX solo soporta css, nosotros soportamos también sass junto con plugins de PostCss, con el fin de optimizar nuestros procesos.

Para utilizar estos beneficios, la instrucción vtex link no nos será útil. Lo correcto sería utilizar:

pnpm run dev

Con lo anterior, podemos iniciar la instancia de VTEX en nuestro navegador (vtex link) y escuchar los cambios de la carpeta SASS en paralelo.

Si te interesa saber más, toda la ✨magia✨ está en el archivo package.json, sección de scripts:

1
 "scripts": {
2
    "build:sass": "sass  --no-source-map styles/SASS/apps:styles/css",
3
    "watch:sass": "sass  --no-source-map --watch styles/SASS:styles/css",
4
    "watch": "npm-run-all --parallel watch:*",
5
    "postbuild": "postcss styles/css/apps/*.css -u autoprefixer cssnano -r --no-map && npx stylelint **/*.css --fix",
6
    "dev": "pnpm run watch & vtex link"
7
  },