Creación y despliegue de la tienda

El React Store application personalizado se crea como un modelo estático de una SPA de REACT y se puede desplegar en cualquier servidor web de su elección. El proceso de compilación Store SDK da soporte a la creación de varias aplicaciones.

React Store applicationflujo de compilación

El diagrama siguiente muestra el flujo de complicación React Store application típico.

Proceso de compilación

El Store SDK incluye dos Reference Store application: la aplicación Esmeralda basada en la tienda B2C y la aplicación Zafiro basada en la tienda B2B.

Cuando se ejecuta la compilación de producción, los archivos de paquete se generan en las carpetas dist/Emerald y dist/Sapphire. El baseName de ruta de React para las aplicaciones se establece de forma predeterminada en Esmeralda y Zafiro respectivamente.

El proceso de compilación Store SDK se basa en el react-script desde la aplicación Create React. Para obtener más información, consulte https://create-react-app.dev/docs/getting-started.

Para personalizar el proceso de compilación, consulte Personalización del proceso de compilación.

Scripts de construcción

Los scripts de compilación se encuentran en la carpeta tools/scripts.

  • start.js se utiliza cuando un usuario ejecuta los mandatos npm start, npm run mock o npm run preview que inician un servidor de desarrollo de React.
  • build.js se utiliza cuando un usuario ejecuta npm run build para crear los paquetes de aplicaciones.
  • buildConstant.jsdefine las constantes que se utilizan durante la compilación.
  • Los otros scripts de la carpeta son scripts auxiliares para build.js y start.js.

Cree elementos

Los elementos de compilación se encuentran en la carpeta assets.

  • La subcarpeta common tiene todos los elementos comunes que utilizan las aplicaciones.
  • Las subcarpetas Emerald y Sapphire se nombran según los nombres de aplicación. Todos los elementos específicos de la aplicación se encuentran en estas carpetas.
  • La subcarpeta template es para los archivos de plantilla que se utilizan durante el proceso de compilación. Un archivo de plantilla normalmente incluye señales que corresponden a valores en los scripts de compilación.

Durante el proceso de compilación, todos los archivos de las subcarpetas se copian en el destino con la misma estructura de carpetas que en el proyecto. Por ejemplo, .env.development.template en la carpeta template se envía la salida a la raíz del proyecto como .env.development.

La secuencia en la que se copian los archivos depende de la modalidad:
  • La carpeta predeterminada se copia primero.
  • Para la modalidad simulada, cuando se ejecuta npm run mock, los archivos de la carpeta mock se copian y la carpeta predeterminada se sobrescribe.
  • Para la modalidad de vista previa, cuando se ejecuta npm run preview, los archivos de la carpeta preview se copian y la carpeta predeterminada se sobrescribe.
  • Si no se especifica una modalidad y se ejecuta npm start, solo se copia la carpeta predeterminada.
  • Para la compilación de producción, cuando se ejecuta npm run build, la carpeta production se copia y la carpeta predeterminada se sobrescribe.

Flujo de proceso de compilación

Las siguientes acciones se producen al ejecutar un mandato de compilación:

Mandatos npm start, npm run preview y npm run mock:
  1. Limpiar carpeta public. La carpeta public es la carpeta Elementos de la aplicación Create React. Para obtener más información, consulte https://create-react-app.dev/docs/using-the-public-folder/.
  2. Copie los elementos de la aplicación de la carpeta assets a la carpeta public predeterminada.
  3. Copie plantillas de la carpeta template, incluidas las variables de entorno, en .env.
  4. Ejecute el react-script start.
npm run build
  1. Limpiar carpeta dist. El dist es donde el proceso de compilación genera los paquetes.
  2. Limpiar carpeta public.
  3. Copie los elementos de la aplicación de la carpeta assets a la carpeta public predeterminada.
  4. Copie plantillas de la carpeta template, incluidas las variables de entorno, en .env.
  5. Ejecute el react-script build.
  6. Copie los archivos de la carpeta build en la carpeta dist/<appName>.
  7. Limpiar carpeta public.
  8. Continúe con la compilación de la segunda aplicación si aplica.