ดาวน์โหลด addons frontend - ดาวน์โหลดซอร์สโค้ด addons frontend

addons frontend

ซอร์สโค้ดอื่น ๆ

blog-utils-0.25.0

ดาวน์โหลด

Addons-ส่วนหน้า

โครงสร้างพื้นฐานส่วนหน้าและโค้ดเพื่อเสริมเซิร์ฟเวอร์ mozilla/addons

รายงานข้อผิดพลาดด้านความปลอดภัย

โค้ดนี้และเว็บไซต์ที่ใช้งานจริงที่เกี่ยวข้องจะรวมอยู่ในโปรแกรมรางวัลข้อบกพร่องบนเว็บและบริการของ Mozilla หากคุณพบช่องโหว่ด้านความปลอดภัย โปรดส่งผ่านกระบวนการที่ระบุไว้ในหน้าโปรแกรมและคำถามที่พบบ่อย รายละเอียดทางเทคนิคเพิ่มเติมเกี่ยวกับแอปพลิเคชันนี้มีอยู่ในหน้า Bug Bounty Onramp

โปรดส่งข้อบกพร่องที่เกี่ยวข้องกับความปลอดภัยทั้งหมดผ่านทาง Bugzilla โดยใช้แบบฟอร์มข้อบกพร่องด้านความปลอดภัยบนเว็บ

อย่าส่งข้อบกพร่องที่เกี่ยวข้องกับความปลอดภัยผ่านปัญหา Github หรือทางอีเมล

ความต้องการ

คุณต้องมี Node LTS (การสนับสนุนระยะยาว)
ติดตั้ง Yarn เพื่อจัดการการขึ้นต่อกันและรันสคริปต์

วิธีที่ง่ายที่สุดในการจัดการโหนดหลายเวอร์ชันในการพัฒนาคือการใช้ nvm

เริ่มต้นเลย

หากคุณใช้ Windows โปรดปฏิบัติตามหลักเกณฑ์ของ Windows ด้วย

พิมพ์ yarn เพื่อติดตั้งการขึ้นต่อกันทั้งหมด
พิมพ์ yarn amo:stage เพื่อเริ่มต้นเซิร์ฟเวอร์ภายในเครื่องที่เชื่อมต่อกับเซิร์ฟเวอร์การแสดงละครที่โฮสต์

คำสั่งพัฒนา

นี่คือคำสั่งบางส่วนที่คุณสามารถเรียกใช้ได้:

สั่งการ	คำอธิบาย
เส้นด้าย amo:โอลิมเปีย	เริ่มต้นเซิร์ฟเวอร์ dev/พร็อกซี (สำหรับ amo) โดยใช้ข้อมูลจากสภาพแวดล้อม addons-server ในเครื่อง
เส้นด้าย amo:dev	เริ่มเซิร์ฟเวอร์ dev/proxy (สำหรับ amo) โดยใช้ข้อมูลจากเซิร์ฟเวอร์ dev (https://addons-dev.allizom.org/)
เส้นด้าย amo:dev-https	เช่นเดียวกับ `amo:dev` แต่ใช้ HTTPS ได้ที่: https://example.com:3000/ อ่านเกี่ยวกับการตั้งค่าสภาพแวดล้อมนี้
เส้นด้าย amo:stage	เริ่มต้นเซิร์ฟเวอร์ dev/proxy (สำหรับ amo) โดยใช้ข้อมูลจากเซิร์ฟเวอร์ชั่วคราว (https://addons.allizom.org/)
สร้างเส้นด้าย	สร้างแอป
เส้นด้ายสร้าง-ci	รันสคริปต์ `build` และ `bundlewatch` npm
มัดเส้นด้าย	รัน Bundlewatch เพื่อตรวจสอบขนาดบันเดิล AMO ที่สร้างขึ้น จำเป็นต้องสร้าง AMO ก่อน
การไหลของเส้นด้าย	เรียกใช้โฟลว์ ตามค่าเริ่มต้น จะตรวจสอบข้อผิดพลาดและออก
การไหลของเส้นด้าย: ตรวจสอบ	ตรวจสอบข้อผิดพลาดของ Flow และออกอย่างชัดเจน
การไหลของเส้นด้าย:dev	ตรวจสอบข้อผิดพลาดของ Flow อย่างต่อเนื่อง
เส้นด้ายเส้นด้าย	ลินท์ JS
เส้นด้าย start-func-test-server	เริ่มคอนเทนเนอร์ Docker สำหรับการทดสอบการทำงาน
เส้นด้ายสไตล์ลินท์	ผ้าสำลี SCSS
ผ้าสำลีเส้นด้าย	รัน JS + SCSS linters ทั้งหมด
เส้นด้ายสวยขึ้น	เรียกใช้ Prettier เพื่อจัดรูปแบบโค้ดเบสทั้งหมดโดยอัตโนมัติ
เส้นด้ายสวยกว่า-dev	เรียกใช้ [Pretty-Quick][] เพื่อเปรียบเทียบและจัดรูปแบบไฟล์ต้นฉบับที่แก้ไขกับสาขาหลักโดยอัตโนมัติ
เส้นด้ายสวยกว่า-ci	เรียกใช้ Prettier และล้มเหลวหากโค้ดบางส่วนมีการเปลี่ยนแปลงโดยไม่ได้รับการจัดรูปแบบ
ตรวจสอบเวอร์ชันเส้นด้าย	ตรวจสอบว่าคุณมีการอ้างอิงที่จำเป็น
การทดสอบเส้นด้าย	รันการทดสอบทั้งหมด (เข้าสู่โหมด `--watch` )
การทดสอบเส้นด้าย - ดีบัก	รันการทดสอบทั้งหมดด้วยเอาต์พุตคอนโซลแบบเต็มและข้อความแสดงข้อผิดพลาดแบบเต็ม (เข้าสู่โหมด `--watch` )
ความครอบคลุมการทดสอบเส้นด้าย	รันการทดสอบทั้งหมดและสร้างรายงานการครอบคลุมโค้ด (เข้าสู่ jest ในโหมด `--watch` )
การทดสอบเส้นด้ายครอบคลุมเพียงครั้งเดียว	รันการทดสอบทั้งหมด สร้างรายงานการครอบคลุมโค้ด จากนั้นออก
การทดสอบเส้นด้ายหนึ่งครั้ง	รันการทดสอบทั้งหมด รัน JS + SCSS linters ทั้งหมด จากนั้นออก
การทดสอบเส้นด้าย	ดำเนินการตรวจสอบการรวมอย่างต่อเนื่องทั้งหมด สิ่งนี้มีไว้เพื่อทำงานบน CI เท่านั้น

กำลังดำเนินการทดสอบ

คุณสามารถเข้าสู่โหมดเล่นตลกแบบโต้ตอบได้โดยพิมพ์ yarn test หรือ yarn test-debug นี่เป็นวิธีที่ง่ายที่สุดในการพัฒนาคุณสมบัติใหม่

เคล็ดลับบางประการมีดังนี้:

yarn test จะซ่อนเอาต์พุตคอนโซลส่วนใหญ่และข้อความความล้มเหลวในการทดสอบโดยละเอียด ดังนั้นจึงเป็นการดีที่สุดเมื่อคุณทำการทดสอบทั้งชุด เมื่อทำการทดสอบรายบุคคล คุณอาจต้องการรัน yarn test-debug
เมื่อคุณเริ่ม yarn test คุณสามารถเปลี่ยนไปใช้โปรแกรมแก้ไขโค้ดของคุณและเริ่มเพิ่มไฟล์ทดสอบหรือเปลี่ยนโค้ดที่มีอยู่ได้ เมื่อคุณบันทึกแต่ละไฟล์ jest จะทำการทดสอบที่เกี่ยวข้องกับโค้ดที่คุณเปลี่ยนแปลงเท่านั้น
หากคุณได้พิมพ์ a เมื่อคุณเริ่มต้นครั้งแรก jest จะยังคงเรียกใช้ชุดโปรแกรมเต็มต่อไปแม้ว่าคุณจะเปลี่ยนไฟล์ใดไฟล์หนึ่งก็ตาม พิมพ์ o เพื่อเปลี่ยนกลับไปเป็นโหมดของการทดสอบที่ทำงานอยู่เฉพาะที่เกี่ยวข้องกับไฟล์ที่คุณกำลังเปลี่ยนแปลง
บางครั้งการรันการทดสอบที่เกี่ยวข้องกับการเปลี่ยนแปลงไฟล์ของคุณอาจช้า ในกรณีเหล่านี้ คุณสามารถพิมพ์ p หรือ t เพื่อกรองการทดสอบตามชื่อในขณะที่คุณทำงานแก้ไขชุดการทดสอบเฉพาะ ข้อมูลเพิ่มเติม
หากคุณเห็นบางอย่างเช่น Error watching file for changes: EMFILE บน Mac OS ให้ brew install watchman อาจแก้ไขได้ ดู jestjs/jest#1767

รันชุดย่อยของการทดสอบ

ตามค่าเริ่มต้น yarn test จะดำเนินการเฉพาะชุดย่อยของการทดสอบที่เกี่ยวข้องกับโค้ดที่คุณกำลังดำเนินการอยู่เท่านั้น

หากต้องการรันชุดย่อยของการทดสอบอย่างชัดเจน คุณสามารถพิมพ์ t หรือ p ซึ่งจะอธิบายไว้ในการใช้งาน jest watch

หรือคุณสามารถเริ่มตัวรันการทดสอบด้วยไฟล์เฉพาะหรือนิพจน์ทั่วไป เช่น:

 yarn test tests/unit/amo/components/TestAddon.js

ทำการทดสอบทั้งหมด

หากคุณต้องการรันการทดสอบทั้งหมดและออก ให้พิมพ์:

 yarn test-once

เอสลินท์

เมื่อคุณรันการทดสอบ คุณจะเห็นรายงานข้อผิดพลาดของ Eslint ที่ส่วนท้ายของผลลัพธ์การทดสอบ:

 yarn test

หากคุณต้องการรันการทดสอบโดยไม่มีการตรวจสอบ Eslint ให้ตั้งค่าตัวแปรสภาพแวดล้อม:

 NO_ESLINT=1 yarn test

ไหล

มีการสนับสนุนที่จำกัดสำหรับการใช้ Flow เพื่อตรวจสอบความตั้งใจของโปรแกรมของเรา

เมื่อคุณรันการทดสอบ คุณจะเห็นรายงานข้อผิดพลาดของ Flow เมื่อสิ้นสุดผลลัพธ์การทดสอบ:

 yarn test

หากคุณต้องการรันการทดสอบโดยไม่มีการตรวจสอบ Flow ให้ตั้งค่าตัวแปรสภาพแวดล้อม:

 NO_FLOW=1 yarn test

หากต้องการตรวจสอบเฉพาะปัญหา Flow ในระหว่างการพัฒนาในขณะที่คุณแก้ไขไฟล์ ให้เรียกใช้:

 yarn flow:dev

หากคุณยังใหม่กับการทำงานกับ Flow ต่อไปนี้เป็นเคล็ดลับบางประการ:

ดูคู่มือการเริ่มต้นใช้งาน
อ่านคำแนะนำบนเว็บต่อเพื่อดูคำแนะนำในการแก้ไขข้อผิดพลาดทั่วไปของ Flow

หากต้องการเพิ่มความครอบคลุมของโฟลว์ให้กับไฟล์ต้นฉบับ ให้ใส่ /* @flow */ ความคิดเห็นที่ด้านบน ยิ่งคุณสามารถเลือกใช้ไฟล์ต้นฉบับใน Flow ได้มากเท่าไรก็ยิ่งดีเท่านั้น

นี่คือแถลงการณ์ Flow ของเรา:

เราใช้ Flow เพื่อ ประกาศความตั้งใจของโค้ดของเรา และช่วยเหลือผู้อื่นในการปรับโครงสร้างใหม่ด้วยความมั่นใจ Flow ยังช่วยให้จับข้อผิดพลาดได้ง่ายขึ้นก่อนที่จะใช้เวลาหลายชั่วโมงในโปรแกรมดีบักเกอร์เพื่อพยายามค้นหาว่าเกิดอะไรขึ้น
หลีกเลี่ยงการประกาศ magic Flow สำหรับโค้ด ภายใน ใดๆ เพียงประกาศนามแฝงประเภทถัดจากโค้ดที่ใช้และส่งออก/นำเข้าเหมือนกับออบเจ็กต์อื่นๆ
อย่านำเข้าวัตถุ JS จริงเพียงเพื่ออ้างอิงประเภทของมัน สร้างนามแฝงประเภทและนำเข้าสิ่งนั้นแทน
อย่าเพิ่มคำอธิบายประกอบประเภทมากเกินที่คุณต้องการ Flow เก่งมากในการอนุมานประเภทจากโค้ด JS มาตรฐาน มันจะแจ้งให้คุณทราบเมื่อคุณต้องการเพิ่มคำอธิบายประกอบที่ชัดเจน
เมื่อฟังก์ชันเช่น getAllAddons รับอาร์กิวเมนต์อ็อบเจ็กต์ ให้เรียกอ็อบเจ็กต์ประเภท GetAllAddonsParams ตัวอย่าง:

 type GetAllAddonsParams = { |
  categoryId : number ,
| } ;

function getAllAddons ( { categoryId } : GetAllAddonsParams = { } ) {
  ...
}

ใช้ประเภทวัตถุที่แน่นอนผ่านไวยากรณ์ไปป์ ( {| key: ... |} ) เมื่อเป็นไปได้ บางครั้งตัวดำเนินการสเปรดทำให้เกิดข้อผิดพลาด เช่น 'ประเภทไม่ตรงไม่เข้ากันกับประเภทที่แน่นอน' แต่นั่นคือจุดบกพร่อง คุณสามารถใช้วิธีแก้ปัญหาเฉพาะหน้า Exact<T> จาก src/amo/types/util ได้ หากคุณต้องการ สิ่งนี้มีไว้เพื่อทดแทนการทำงานสำหรับ $Exact
เพิ่มคำใบ้ประเภทสำหรับส่วนประกอบที่รวมอยู่ใน HOCs (ส่วนประกอบลำดับที่สูงกว่า) เพื่อให้ Flow สามารถตรวจสอบการเรียกไปยังส่วนประกอบได้ เราจำเป็นต้องเพิ่มคำใบ้เนื่องจากเรายังไม่มีความครอบคลุมประเภทที่เหมาะสมสำหรับ HOC ทั้งหมดที่เราพึ่งพา นี่คือตัวอย่าง:

 // 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 หรือ any แต่อย่าลังเลที่จะใช้มันหากคุณใช้เวลามากเกินไปในการประกาศประเภทที่ขึ้นอยู่กับประเภทอื่นที่ขึ้นอยู่กับประเภทอื่นเป็นต้น
คุณสามารถเพิ่มความคิดเห็น $FlowFixMe เพื่อข้ามการตรวจสอบ Flow หากคุณพบข้อบกพร่องหรือหากคุณชนอะไรบางอย่างที่ทำให้คุณเอาหัวโขกคีย์บอร์ด หากเป็นสิ่งที่คุณคิดว่าแก้ไขไม่ได้ ให้ใช้ $FlowIgnore แทน โปรดอธิบายเหตุผลของคุณในความคิดเห็นและลิงก์ไปยังปัญหา GitHub หากเป็นไปได้
หากคุณสงสัยว่าเหตุใดคำอธิบายประกอบ Flow บางส่วนจึงไม่ทำงาน ให้ลองใช้คำสั่ง yarn flow type-at-pos ... เพื่อติดตามประเภทที่ใช้กับโค้ด ดู yarn flow -- --help type-at-pos เพื่อดูรายละเอียด

สวยกว่า

เราใช้ Prettier เพื่อจัดรูปแบบโค้ด JavaScript ของเราโดยอัตโนมัติ และหยุดการถกเถียงเรื่องสไตล์ที่กำลังดำเนินอยู่ทั้งหมด

ความครอบคลุมของรหัส

หากต้องการดูรายงานการครอบคลุมโค้ด ให้พิมพ์:

 yarn test-coverage-once

การดำเนินการนี้จะพิมพ์ตารางไฟล์ที่แสดงเปอร์เซ็นต์การครอบคลุมโค้ด บรรทัดที่ไม่ครอบคลุมจะแสดงในคอลัมน์ด้านขวา แต่คุณสามารถเปิดรายงานฉบับเต็มได้ในเบราว์เซอร์:

 open coverage/lcov-report/index.html

ดำเนินการ AMO เพื่อการพัฒนาท้องถิ่น

พร็อกซีเซิร์ฟเวอร์มีไว้สำหรับเรียกใช้แอป AMO ด้วย API บนโฮสต์เดียวกันกับส่วนหน้า นี่เป็นการเลียนแบบการตั้งค่าการผลิตของเรา

เริ่มพัฒนากับโฮสต์ API เช่นนี้:

 yarn amo:dev

ซึ่งจะกำหนดค่าพร็อกซีให้ใช้ https://addons-dev.allizom.org สำหรับข้อมูล API คำสั่งนี้เป็นวิธีที่ใช้กันทั่วไปในการพัฒนาฟีเจอร์ส่วนหน้าใหม่ ดูตารางคำสั่งด้านบนเพื่อดูวิธีการเรียกใช้เซิร์ฟเวอร์ที่คล้ายกัน

หากต้องการใช้เซิร์ฟเวอร์ API ภายในที่ทำงานใน Docker คุณสามารถใช้คำสั่ง yarn amo อย่างไรก็ตาม ขณะนี้ไม่ได้ผล ดูฉบับที่-7196

การรับรองความถูกต้องจะทำงานเมื่อเริ่มต้นจาก addons-frontend และจะคงอยู่ใน addons-server แต่จะไม่ทำงานเมื่อเข้าสู่ระบบจากหน้า addons-server ดู mozilla/addons-server#4684 สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการแก้ไขปัญหานี้

การกำหนดค่าท้องถิ่น

หากคุณต้องการแทนที่การตั้งค่าใดๆ ขณะรัน yarn amo yarn amo:dev หรือ yarn amo:stage ขั้นแรกให้สร้างไฟล์กำหนดค่าในเครื่องที่มีชื่อดังนี้:

 touch config/local-development.js

ทำการเปลี่ยนแปลงการกำหนดค่า ตัวอย่างเช่น:

 module . exports = {
  trackingEnabled : true ,
} ;

รีสตาร์ทเซิร์ฟเวอร์เพื่อดูว่าจะมีผล

โปรดดูเอกสารลำดับการโหลดไฟล์การกำหนดค่าเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการนำการกำหนดค่าไปใช้

การกำหนดค่าอุปกรณ์ Android สำหรับการพัฒนาในเครื่อง

หากคุณต้องการเข้าถึงเซิร์ฟเวอร์ภายในเครื่องของคุณบนอุปกรณ์ Android คุณจะต้องเปลี่ยนการตั้งค่าบางอย่าง สมมติว่าเครื่องของคุณสามารถเข้าถึงได้บนเครือข่ายของคุณที่ที่อยู่ IP 10.0.0.1 คุณสามารถเริ่มเซิร์ฟเวอร์ของคุณได้ดังนี้:

 API_HOST=http://10.0.0.1:3000 
    SERVER_HOST=10.0.0.1 
    WEBPACK_SERVER_HOST=10.0.0.1 
    yarn amo:dev

บนอุปกรณ์ Android ของคุณ คุณสามารถเข้าถึงไซต์การพัฒนาได้ที่ http://10.0.0.1:3000

หมายเหตุ : ในขณะนี้ ไม่สามารถลงชื่อเข้าใช้ด้วยการกำหนดค่านี้ได้ เนื่องจากไคลเอ็นต์บัญชี Mozilla เปลี่ยนเส้นทางไปที่ localhost:3000 คุณอาจลองวิธีอื่นได้โดยแก้ไข /etc/hosts บนอุปกรณ์ของคุณเพื่อให้ localhost ชี้ไปที่เครื่องที่กำลังพัฒนาของคุณ แต่ยังไม่ได้รับการทดสอบอย่างสมบูรณ์

ปิดการใช้งาน CSP เพื่อการพัฒนาท้องถิ่น

เมื่อพัฒนาภายในเครื่องด้วยเซิร์ฟเวอร์ webpack URL เนื้อหาที่สร้างขึ้นแบบสุ่มจะทำให้นโยบายความปลอดภัยเนื้อหา (CSP) ของเราล้มเหลว และทำให้คอนโซลของคุณมีข้อผิดพลาด คุณสามารถปิดข้อผิดพลาด CSP ทั้งหมดได้โดยการตั้งค่า CSP ให้เป็น false ในไฟล์กำหนดค่าในเครื่องใดๆ เช่น local-development-amo.js ตัวอย่าง:

 module . exports = {
  CSP : false ,
} ;

ทำงานเกี่ยวกับเอกสาร

เอกสารที่คุณกำลังอ่านอยู่ในตอนนี้อยู่ในแหล่งเก็บข้อมูลต้นทางเป็น Github ที่ปรุงแต่ง Markdown เมื่อคุณทำการเปลี่ยนแปลงกับไฟล์เหล่านี้ คุณสามารถสร้างคำขอดึงเพื่อดูตัวอย่างได้ หรือที่ดีกว่านั้น คุณสามารถใช้ Grip เพื่อดูตัวอย่างการเปลี่ยนแปลงในเครื่องได้ หลังจากติดตั้ง grip ให้รันจากไดเร็กทอรีต้นทางดังนี้:

 grip .

เปิด URL localhost แล้วคุณจะเห็นไฟล์ README.md ที่แสดงผล เมื่อคุณทำการแก้ไข ระบบจะอัปเดตโดยอัตโนมัติ

บริการสร้างและดำเนินการ

ต่อไปนี้เป็นสคริปต์ที่ใช้ในการปรับใช้ โดยทั่วไปคุณไม่จำเป็นต้องใช้เว้นแต่ว่าคุณกำลังทดสอบบางอย่างที่เกี่ยวข้องกับการปรับใช้หรือบิลด์

ตัวแปร env คือ:

NODE_ENV : สภาพแวดล้อมของโหนด เช่น production หรือ development
NODE_CONFIG_ENV : ชื่อของการกำหนดค่าที่จะโหลด เช่น dev , stage , prod

สคริปต์	คำอธิบาย
เส้นด้ายเริ่มต้น	เริ่มต้นเซิร์ฟเวอร์ด่วน (ต้องใช้ env vars)
สร้างเส้นด้าย	สร้าง libs (แอปทั้งหมด) (ต้องใช้ env vars)

ตัวอย่าง: การสร้างและใช้งานอินสแตนซ์การใช้งานจริงของแอป:

 NODE_ENV=production NODE_CONFIG_ENV=prod yarn build
NODE_ENV=production NODE_CONFIG_ENV=prod yarn start

การรันบิลด์ภายในเครื่อง

หากต้องการเรียกใช้แอปในเครื่องในโหมดการใช้งานจริง คุณจะต้องสร้างไฟล์กำหนดค่าสำหรับบิลด์การใช้งานจริงในเครื่อง บิลด์การผลิตสามารถสร้างขึ้นสำหรับสภาพแวดล้อมที่แตกต่างกัน: dev , stage และ prod (ควบคุมโดย NODE_CONFIG_ENV env var) แต่จำเป็นต้องมีไฟล์กำหนดค่าพิเศษเพียงไฟล์เดียวเท่านั้นเพื่อให้สภาพแวดล้อมเหล่านี้ทำงานภายในเครื่อง

เปลี่ยนชื่อไฟล์ชื่อ config/local.js.dist เป็น config/local.js หลังจากนี้ ให้สร้างใหม่และเริ่มต้นใหม่โดยใช้ yarn build และ yarn start ตามที่ระบุไว้ข้างต้น หากคุณเคยใช้ 127.0.0.1 มาก่อนด้วยการกำหนดค่าอื่น อย่าลืมล้างคุกกี้ของคุณ แอปพลิเคชันควรมีอยู่ที่: http://127.0.0.1:4000/

หมายเหตุ : ในขณะนี้ ยังไม่สามารถลงชื่อเข้าใช้โดยใช้วิธีนี้ได้

ใช้งานเวอร์ชันใด?

คุณสามารถตรวจสอบเพื่อดูว่ามีการปรับใช้คอมมิตของ addons-frontend ใด การทดสอบ A/B ใดที่กำลังทำงานอยู่ หรือแฟล็กฟีเจอร์ใดที่เปิดใช้งานโดยส่งคำขอดังนี้:

 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": ""
}

สิ่งนี้จะส่งคืนการตอบกลับ 415 หากไม่มีไฟล์ version.json ในไดเรกทอรีราก โดยทั่วไปไฟล์นี้จะถูกสร้างขึ้นโดยกระบวนการปรับใช้

เพื่อความสอดคล้องกับสคริปต์การมอนิเตอร์ คุณสามารถดึงข้อมูลเดียวกันได้ที่ URL นี้:

 curl https://addons-dev.allizom.org/__version__

คุณสามารถติดตั้งส่วนขยาย amo-info เพื่อดูข้อมูลนี้ได้อย่างง่ายดาย

ยูทิลิตี้บล็อกส่วนหน้าของ Addons

โปรเจ็กต์นี้ยังมีโค้ดสำหรับสร้างไลบรารีชื่อ addons-frontend-blog-utils และมีคำสั่งต่อไปนี้:

yarn build:blog-utils-dev : สร้างไลบรารี เริ่มผู้ดูเพื่อสร้างไลบรารีใหม่เมื่อมีการเปลี่ยนแปลง และให้บริการหน้าการพัฒนาที่ http://127.0.0.1:11000
yarn build:blog-utils-prod : สร้างไลบรารี่ในโหมดการใช้งานจริง

ไลบรารีนี้ได้รับการออกแบบมาโดยเฉพาะเพื่อทำงานกับ addons-blog

กระบวนการวางจำหน่าย

หากต้องการเผยแพร่ addons-frontend-blog-utils เวอร์ชันใหม่ จะต้องพุชแท็กพิเศษไปยังที่เก็บหลัก ชื่อแท็กต้องขึ้นต้นด้วย blog-utils- และมักจะมีหมายเลขเวอร์ชัน สิ่งนี้สามารถทำให้เป็นแบบอัตโนมัติได้โดยใช้คำสั่งต่อไปนี้:

 npm version [major|minor|patch]

การออกคำสั่งนี้จากสาขา master จะอัปเดตเวอร์ชันใน package.json สร้างการคอมมิตและสร้างแท็ก พุชทั้งคอมมิตนี้และแท็กไปยังที่เก็บหลัก

หมายเหตุ: เมื่อมีการรวม addons-frontend-blog-utils ใหม่เข้ากับ addons-blog คุณควรเผยแพร่ธีม WordPress เวอร์ชันใหม่ โปรดปฏิบัติตามคำแนะนำเหล่านี้ในพื้นที่เก็บข้อมูล addons-blog