Como instalar Visual Studio Code para Salesforce Commerce Cloud

Bienvenidos a un nuevo tutorial de Commerce Cloud B2C donde hablaremos de como integrar Visual Studio Code con el cartridge del SFRA de Salesforce. Para ello necesitaremos tener instalado node js en nuestro ordenador.

En primer lugar lo que debemos hacer es descargar la aplicación Visual Studio Code desde la página oficial.

Una vez tengamos instalada la aplicación haremos click en File, Preference, Extensions e instalamos el plugin Prophet que es el encargado de la sincronización de nuestro codigo local con nuestro sandbox. Recordamos que el sandbox es la instancia secuncudaria que usan los desarrolladores para crear las distintas funcionalidades del ecommerce. Si quieres saber más sobre las instancias puedes verlo en videos anteriores.

https://iddema.com/introduccion-a-salesforce-commerce-cloud-b2cweb/

 

Ahora vamos a crear una carpeta donde añadiremos nuestro cartridge del SFRA. Esta carpeta puede estar alojada donde queráis.

El zip visualcode contiene la configuración base que yo utilizo en visual studio code para este tipo de proyectos y el archivo dw.json es donde añadiremos nuestras credenciales del sandbox al que queramos sincronizar.

https://iddema.com/tutorial/visualcode.zip

Para descargar el cartridge del SFRA accederemos a github y descargaremos el cartridge. Si no sabes como acceder puedes revisar el primer video de esta lista Salesforce Tutorial.

https://www.youtube.com/channel/UCebvN-T3Kjo03_tSjwT8Z0g

Si estás trabajando en un proyecto colaborativo que ya está empezado lo normal es hacer un git clone de todos los cartridges instalados en tu proyecto. Pero en este caso solo sincronizaré el cartridge del SFRA.

Para la instalación de este cartridge es necesario hacer npm install, compilar js, compilar css y compilar las fuentes. Para ellos introducimos los siguientes comandos:

  • npm install
  • npm run compile:js
  • npm run compile:scss
  • npm run compile:fonts

En el archivo dw.json debemos introducir el hostname, usuario, contraseña y la versión de código activa en el sandbox.

Una vez configurado abrimos el proyecto raiz en visualcode y subiremos los cambios haciedno click en ctrl + shift+ P y seleccionando Prophet: Clean/Project upload all y veremos como se suben los cartridges del a nuestro sandbox en la venta de abajo en visual studio.

Una vez finalizado vamos a configurar el path de los cartridge en mi sandbox, asignando solo el cartridge del SFRA, el mínimo que debe tener un proyecto ecommerce para funcionar.

Aunque el cartridge del SFRA no se debe editar, para hacer las pruebas del tutorial añadiremos una etiqueta H1 para comprobar como se sincroniza el código que escribimos con el sandbox. Antes que nada nos aseguraremos que la version de código desplegada es la que hemos puesto en el dw.json sino no se aplicarán los cambios.

Pues así de sencillo es sincronizar nuestro código con nuestro sandbox. Si al compilar tienes algun error con node js simplemente añade la librería que sea necesaria o comprueba si la versión de node js que estás utilizando es compatible.

Si te gustó y quieres saber más, dale a like y suscríbete al canal.

🔥 Suscríbete: https://www.youtube.com/channel/UCebvN-T3Kjo03_tSjwT8Z0g
🚀 Facebook: https://www.facebook.com/CommerceCloudB2C/

Recurso visualcode.zip:
https://iddema.com/tutorial/visualcode.zip

https://nodejs.org/es/

 

Espero que te guste mucho el vídeo 😄