addons frontend
blog-utils-0.25.0
Infraestructura front-end y código para complementar mozilla/addons-server.
Este código y su sitio web de producción asociado están incluidos en el programa de recompensas por errores de servicios y web de Mozilla. Si encuentra una vulnerabilidad de seguridad, envíela mediante el proceso descrito en las páginas del programa y de preguntas frecuentes. Más detalles técnicos sobre esta aplicación están disponibles en la página Bug Bounty Onramp.
Envíe todos los errores relacionados con la seguridad a través de Bugzilla utilizando el formulario de errores de seguridad web.
Nunca envíes errores relacionados con la seguridad a través de un problema de Github o por correo electrónico.
La forma más sencilla de gestionar múltiples versiones de nodos en desarrollo es utilizar nvm.
Si está en Windows, asegúrese de seguir también las pautas de Windows.
yarn para instalar todas las dependenciasyarn amo:stage para iniciar un servidor local que se conecta a un servidor de prueba alojado Aquí hay algunos comandos que puede ejecutar:
| Dominio | Descripción |
|---|---|
| hilo amo: olympia | Inicie el servidor de desarrollo/proxy (para amo) utilizando datos de un entorno de servidor de complementos local. |
| hilo amo: dev | Inicie el servidor de desarrollo/proxy (para amo) usando datos del servidor de desarrollo (https://addons-dev.allizom.org/) |
| hilo amo: dev-https | Igual que amo:dev pero con HTTPS, disponible en: https://example.com:3000/. Lea acerca de cómo configurar este entorno |
| hilo amo: etapa | Inicie el servidor de desarrollo/proxy (para amo) utilizando datos del servidor provisional (https://addons.allizom.org/) |
| construcción de hilo | Construye la aplicación. |
| hilo de construcción-ci | Ejecute los scripts npm build y bundlewatch . |
| reloj de paquete de hilo | Ejecute Bundlewatch para verificar los tamaños de los paquetes AMO generados. Primero se requiere construir AMO. |
| flujo de hilo | Ejecutar flujo. De forma predeterminada, esto busca errores y sale. |
| flujo de hilo: comprobar | Verifique explícitamente errores de flujo y salga |
| flujo de hilo: desarrollo | Compruebe continuamente si hay errores de flujo |
| eslint de hilo | Pelusa el JS |
| hilo inicio-func-test-servidor | Inicie un contenedor Docker para pruebas funcionales |
| estilo de hilo | Pelusa el SCSS |
| pelusa de hilo | Ejecute todos los linters JS + SCSS |
| hilo más bonito | Ejecute Prettier para formatear automáticamente todo el código base |
| hilo más bonito-dev | Ejecute [Pretty-Quick][] para comparar y formatear automáticamente los archivos fuente modificados con la rama maestra |
| hilo más bonito-ci | Ejecute Prettier y falle si se ha modificado algún código sin formatearlo |
| verificación de versión de hilo | Compruebe que tiene las dependencias requeridas |
| prueba de hilo | Ejecute todas las pruebas (ingresa broma en modo --watch ) |
| prueba-depuración de hilo | Ejecute todas las pruebas con salida de consola completa y mensajes de error completos (ingresa broma en modo --watch ) |
| cobertura de prueba de hilo | Ejecute todas las pruebas y genere un informe de cobertura de código (ingrese en broma en modo --watch ) |
| prueba de hilo-cobertura-una vez | Ejecute todas las pruebas, genere un informe de cobertura de código y luego salga |
| prueba de hilo una vez | Ejecute todas las pruebas, ejecute todos los linters JS + SCSS y luego salga |
| prueba de hilo-ci | Ejecute todas las comprobaciones de integración continua. Esto sólo está destinado a ejecutarse en CI. |
Puede ingresar al modo de broma interactiva escribiendo yarn test o yarn test-debug . Esta es la forma más sencilla de desarrollar nuevas funciones.
A continuación se ofrecen algunos consejos:
yarn test ocultará la mayoría de los resultados de la consola y los mensajes detallados de fallas de prueba, por lo que es mejor cuando ejecuta un conjunto completo de pruebas. Cuando trabaje en una prueba individual, es probable que desee ejecutar yarn test-debug .yarn test , puedes cambiar a tu editor de código y comenzar a agregar archivos de prueba o cambiar el código existente. A medida que guarda cada archivo, jest solo ejecutará pruebas relacionadas con el código que cambie.a cuando comenzó, jest continuará ejecutando el conjunto completo incluso cuando cambie archivos específicos. Escriba o para volver al modo de ejecutar únicamente pruebas relacionadas con los archivos que está cambiando.p o t para filtrar las pruebas por nombre mientras trabaja en la reparación de un conjunto de pruebas específico. Más información.Error watching file for changes: EMFILE en Mac OS, entonces brew install watchman podría solucionarlo. Ver jestjs/jest#1767 De forma predeterminada, yarn test solo ejecutará un subconjunto de pruebas relacionadas con el código en el que está trabajando.
Para ejecutar explícitamente un subconjunto de pruebas, puede escribir t o p , que se explican en el uso de jest watch.
Alternativamente, puede iniciar el ejecutor de pruebas con un archivo específico o una expresión regular, como:
yarn test tests/unit/amo/components/TestAddon.js
Si desea ejecutar todas las pruebas y salir, escriba:
yarn test-once
A medida que ejecuta las pruebas, verá un informe de errores de Eslint al final del resultado de la prueba:
yarn test
Si desea ejecutar pruebas sin comprobaciones de Eslint, establezca una variable de entorno:
NO_ESLINT=1 yarn test
Hay soporte limitado para usar Flow para validar la intención de nuestro programa.
A medida que ejecute las pruebas, verá un informe de errores de flujo al final del resultado de la prueba:
yarn test
Si desea ejecutar pruebas sin comprobaciones de flujo, establezca una variable de entorno:
NO_FLOW=1 yarn test
Para verificar solo problemas de Flow durante el desarrollo mientras editas archivos, ejecuta:
yarn flow:dev
Si eres nuevo trabajando con Flow, aquí tienes algunos consejos:
Para agregar cobertura de flujo a un archivo fuente, coloque un comentario /* @flow */ en la parte superior. Cuantos más archivos fuente puedas incluir en Flow, mejor.
Aquí está nuestro manifiesto Flow:
getAllAddons toma argumentos de objeto, llame a su tipo de objeto GetAllAddonsParams . Ejemplo: type GetAllAddonsParams = { |
categoryId : number ,
| } ;
function getAllAddons ( { categoryId } : GetAllAddonsParams = { } ) {
...
}{| key: ... |} ) cuando sea posible. A veces, el operador de extensión genera un error como "El tipo inexacto es incompatible con el tipo exacto", pero eso es un error. Puede utilizar la solución alternativa Exact<T> desde src/amo/types/util si es necesario. Esto pretende ser un reemplazo funcional de $Exact. // Imagine this is something like components/ConfirmButton/index.js
import { compose } from 'redux' ;
import * as React from 'react' ;
// This expresses externally used props, i.e. to validate how the app would use <ConfirmButton />
type Props = { |
prompt ?: string | null ,
| } ;
// This expresses internally used props, such as i18n which is injected by translate()
type InternalProps = { |
... Props ,
i18n : I18nType ,
| } ;
export class ConfirmButtonBase extends React . Component < InternalProps > {
render ( ) {
const prompt = this . props . prompt || this . props . i18n . gettext ( 'Confirm' ) ;
return < button > { prompt } < / button > ;
}
}
// This provides a type hint for the final component with its external props.
// The i18n prop is not in external props because it is injected by translate() for internal use only.
const ConfirmButton : React . ComponentType < Props > = compose ( translate ( ) ) (
ConfirmButtonBase ,
) ;
export default ConfirmButton ;Object o any , pero siéntase libre de usarlos si dedica demasiado tiempo a declarar tipos que dependen de otros tipos, etc.$FlowFixMe para omitir una verificación de Flow si te encuentras con un error o si golpeas algo que te hace golpearte la cabeza con el teclado. Si es algo que cree que no se puede solucionar, utilice $FlowIgnore en su lugar. Explique su justificación en el comentario y enlace a un problema de GitHub si es posible.yarn flow type-at-pos ... para rastrear qué tipos se están aplicando al código. Consulte yarn flow -- --help type-at-pos para obtener más detalles.Usamos Prettier para formatear automáticamente nuestro código JavaScript y detener todos los debates en curso sobre estilos.
Para ver un informe de cobertura de código, escriba:
yarn test-coverage-once
Esto imprimirá una tabla de archivos que muestra el porcentaje de cobertura del código. Las líneas descubiertas se mostrarán en la columna de la derecha, pero puedes abrir el informe completo en un navegador:
open coverage/lcov-report/index.html
Se proporciona un servidor proxy para ejecutar la aplicación AMO con la API en el mismo host que la interfaz. Esto imita nuestra configuración de producción.
Comience a desarrollar con una API alojada como esta:
yarn amo:dev
Esto configura el proxy para usar https://addons-dev.allizom.org para datos API. Este comando es la forma más común de desarrollar nuevas funciones de interfaz. Consulte la tabla de comandos anterior para conocer formas similares de ejecutar el servidor.
Para usar un servidor API local que se ejecuta en Docker, puede usar el comando yarn amo . Sin embargo, esto no funciona actualmente. Consulte el número 7196.
La autenticación funcionará cuando se inicie desde la interfaz de complementos y persistirá en el servidor de complementos, pero no funcionará al iniciar sesión desde una página del servidor de complementos. Consulte mozilla/addons-server#4684 para obtener más información sobre cómo solucionar este problema.
Si necesita anular alguna configuración mientras ejecuta yarn amo , yarn amo:dev o yarn amo:stage , primero cree un archivo de configuración local llamado exactamente así:
touch config/local-development.js
Realice cualquier cambio de configuración. Por ejemplo:
module . exports = {
trackingEnabled : true ,
} ;Reinicie el servidor para ver que surta efecto.
Consulte los documentos del orden de carga del archivo de configuración para obtener más información sobre cómo se aplica la configuración.
Si desea acceder a su servidor local en un dispositivo Android, deberá cambiar algunas configuraciones. Digamos que se puede acceder a su máquina local en su red en la dirección IP 10.0.0.1 . Podrías iniciar tu servidor así:
API_HOST=http://10.0.0.1:3000
SERVER_HOST=10.0.0.1
WEBPACK_SERVER_HOST=10.0.0.1
yarn amo:dev
En su dispositivo Android, puede acceder al sitio de desarrollo en http://10.0.0.1:3000 .
NOTA : En este momento, no es posible iniciar sesión con esta configuración porque el cliente de cuentas de Mozilla redirige a localhost:3000 . Es posible que pueda probar un enfoque diferente editando /etc/hosts en su dispositivo para que localhost apunte a su máquina de desarrollo, pero esto no se ha probado completamente.
Al desarrollar localmente con un servidor de paquete web, la URL del activo generada aleatoriamente no cumplirá con nuestra Política de seguridad de contenido (CSP) y saturará su consola con errores. Puede desactivar todos los errores de CSP configurando CSP en false en cualquier archivo de configuración local, como local-development-amo.js . Ejemplo:
module . exports = {
CSP : false ,
} ; La documentación que está leyendo ahora se encuentra dentro del repositorio de origen como Markdown con sabor a Github. Cuando realiza cambios en estos archivos, puede crear una solicitud de extracción para obtener una vista previa de ellos o, mejor aún, puede usar grip para obtener una vista previa de los cambios localmente. Después de instalar grip , ejecútelo desde el directorio fuente de esta manera:
grip .
Abra su URL localhost y verá el archivo README.md renderizado. A medida que realice modificaciones, se actualizará automáticamente.
Los siguientes son scripts que se utilizan en la implementación; generalmente no los necesitará a menos que esté probando algo relacionado con la implementación o las compilaciones.
Las variables env son:
NODE_ENV : el entorno del nodo, por ejemplo, production o developmentNODE_CONFIG_ENV : el nombre de la configuración a cargar, por ejemplo, dev , stage , prod| Guion | Descripción |
|---|---|
| inicio del hilo | Inicia el servidor express (requiere env vars) |
| construcción de hilo | Construye las bibliotecas (todas las aplicaciones) (requiere variables de entorno) |
Ejemplo: crear y ejecutar una instancia de producción de la aplicación:
NODE_ENV=production NODE_CONFIG_ENV=prod yarn build
NODE_ENV=production NODE_CONFIG_ENV=prod yarn start
Para ejecutar la aplicación localmente en modo de producción, deberá crear un archivo de configuración para compilaciones de producción local. Se pueden crear compilaciones de producción para diferentes entornos: dev , stage y prod (controlados por la var de entorno NODE_CONFIG_ENV ), pero solo se necesita un archivo de configuración adicional para que estos entornos se ejecuten localmente.
Cambie el nombre del archivo denominado config/local.js.dist a config/local.js . Después de esto, reconstruya y reinicie usando yarn build y yarn start como se documenta anteriormente. Si ha utilizado 127.0.0.1 antes con una configuración diferente, asegúrese de borrar sus cookies. La aplicación debe estar disponible en: http://127.0.0.1:4000/.
NOTA : En este momento, no es posible iniciar sesión utilizando este método.
Puede verificar qué confirmación de addons-frontend está implementada, qué experimentos A/B se están ejecutando o qué indicadores de funciones están habilitados al realizar una solicitud como esta:
curl https://addons-dev.allizom.org/__frontend_version__
{
"build": "https://circleci.com/gh/mozilla/addons-frontend/10333",
"commit": "47edfa6f24e333897b25516c587f504e294e8fa9",
"experiments": {
"homeHero": true
},
"feature_flags": {
"enableFeatureAMInstallButton": true,
"enableFeatureStaticThemes": true
},
"source": "https://github.com/mozilla/addons-frontend",
"version": ""
}
Esto devolverá una respuesta 415 si no existe un archivo version.json en el directorio raíz. Este archivo normalmente lo genera el proceso de implementación.
Para mantener la coherencia con los scripts de monitoreo, se pueden recuperar los mismos datos en esta URL:
curl https://addons-dev.allizom.org/__version__
Puede instalar la extensión amo-info para ver fácilmente esta información.
Este proyecto también contiene código para crear una biblioteca llamada addons-frontend-blog-utils y ofrece los siguientes comandos:
yarn build:blog-utils-dev : construye la biblioteca, inicia un observador para reconstruir la biblioteca en caso de cambio y ofrece una página de desarrollo en http://127.0.0.1:11000yarn build:blog-utils-prod : construye la biblioteca en modo de producciónEsta biblioteca está diseñada exclusivamente para funcionar con addons-blog.
Para publicar una nueva versión de addons-frontend-blog-utils , se debe enviar una etiqueta especial al repositorio principal. El nombre de la etiqueta debe comenzar con blog-utils- y normalmente contiene el número de versión. Esto se puede automatizar usando el siguiente comando:
npm version [major|minor|patch]
Al emitir este comando desde la rama master se actualizará la versión en package.json , se creará una confirmación y se creará una etiqueta. Envíe tanto esta confirmación como la etiqueta al repositorio principal.
Nota: Cuando se fusiona una nueva versión addons-frontend-blog-utils en addons-blog, debes publicar una nueva versión del tema de WordPress. Siga estas instrucciones en el repositorio del blog de complementos.
