addons frontend
blog-utils-0.25.0
Infrastruktur dan kode front-end untuk melengkapi mozilla/addons-server.
Kode ini dan situs web produksi terkait disertakan dalam program bug bounty web dan layanan Mozilla. Jika Anda menemukan kerentanan keamanan, silakan kirimkan melalui proses yang diuraikan dalam halaman program dan FAQ. Detail teknis lebih lanjut tentang aplikasi ini tersedia dari halaman Bug Bounty Onramp.
Silakan kirimkan semua bug terkait keamanan melalui Bugzilla menggunakan formulir bug keamanan web.
Jangan pernah mengirimkan bug terkait keamanan melalui Masalah Github atau email.
Cara termudah untuk mengelola beberapa versi node dalam pengembangan adalah dengan menggunakan nvm.
Jika Anda menggunakan Windows, pastikan untuk mengikuti pedoman windows juga.
yarn untuk menginstal semua dependensiyarn amo:stage untuk memulai server lokal yang terhubung ke server pementasan yang dihosting Berikut beberapa perintah yang dapat Anda jalankan:
| Memerintah | Keterangan |
|---|---|
| benang amo:olympia | Mulai server dev/proxy (untuk amo) menggunakan data dari lingkungan server tambahan lokal. |
| benang amo:dev | Mulai server dev/proxy (untuk amo) menggunakan data dari server dev (https://addons-dev.allizom.org/) |
| benang amo:dev-https | Sama seperti amo:dev tetapi dengan HTTPS, tersedia di: https://example.com:3000/. Baca tentang menyiapkan lingkungan ini |
| benang amo: panggung | Mulai server dev/proxy (untuk amo) menggunakan data dari server pementasan (https://addons.allizom.org/) |
| pembuatan benang | Bangun aplikasinya. |
| benang build-ci | Jalankan skrip npm build dan bundlewatch . |
| jam tangan bundel benang | Jalankan bundlewatch untuk memeriksa ukuran bundel AMO yang dihasilkan. Membangun AMO diperlukan terlebih dahulu. |
| aliran benang | Jalankan Aliran. Secara default ini memeriksa kesalahan dan keluar |
| aliran benang: periksa | Periksa secara eksplisit kesalahan Aliran dan keluar |
| aliran benang: dev | Periksa terus-menerus kesalahan Aliran |
| benang eslint | Lintasi JS |
| benang mulai-fungsi-test-server | Mulai kontainer Docker untuk pengujian fungsional |
| gaya benang | Lintasi SCSS |
| serat benang | Jalankan semua linter JS + SCSS |
| benang lebih cantik | Jalankan Prettier untuk memformat seluruh basis kode secara otomatis |
| benang lebih cantik-dev | Jalankan [Cukup Cepat] [] untuk secara otomatis membandingkan dan memformat file sumber yang dimodifikasi dengan cabang master |
| benang lebih cantik-ci | Jalankan Prettier dan gagal jika beberapa kode telah diubah tanpa diformat |
| pemeriksaan versi benang | Periksa apakah Anda memiliki dependensi yang diperlukan |
| tes benang | Jalankan semua tes (Masuk bercanda dalam mode --watch ) |
| uji-debug benang | Jalankan semua pengujian dengan keluaran konsol lengkap dan pesan kesalahan lengkap (Masuk bercanda dalam mode --watch ) |
| cakupan uji benang | Jalankan semua tes dan buat laporan cakupan kode (Masuk bercanda dalam mode --watch ) |
| uji benang-cakupan-sekali | Jalankan semua pengujian, buat laporan cakupan kode, lalu keluar |
| tes benang-sekali | Jalankan semua tes, jalankan semua linter JS + SCSS, lalu keluar |
| tes benang-ci | Jalankan semua pemeriksaan integrasi berkelanjutan. Ini hanya dimaksudkan untuk dijalankan di CI. |
Anda dapat masuk ke mode lelucon interaktif dengan mengetikkan yarn test atau yarn test-debug . Ini adalah cara termudah untuk mengembangkan fitur baru.
Berikut beberapa tipnya:
yarn test akan menyembunyikan sebagian besar keluaran konsol dan pesan kegagalan pengujian terperinci, jadi yang terbaik adalah saat Anda menjalankan rangkaian pengujian lengkap. Saat mengerjakan pengujian individual, Anda mungkin ingin menjalankan yarn test-debug .yarn test , Anda dapat beralih ke editor kode dan mulai menambahkan file pengujian atau mengubah kode yang ada. Saat Anda menyimpan setiap file, jest hanya akan menjalankan tes yang terkait dengan kode yang Anda ubah.a saat pertama kali memulai, maka jest akan terus menjalankan rangkaian lengkap bahkan ketika Anda mengubah file tertentu. Ketik o untuk beralih kembali ke mode hanya menjalankan pengujian yang terkait dengan file yang Anda ubah.p atau t untuk memfilter pengujian berdasarkan nama saat Anda memperbaiki rangkaian pengujian tertentu. Informasi lebih lanjut.Error watching file for changes: EMFILE di Mac OS maka brew install watchman mungkin memperbaikinya. Lihat jestjs/jest#1767 Secara default, yarn test hanya akan menjalankan subset pengujian yang berhubungan dengan kode yang sedang Anda kerjakan.
Untuk menjalankan subset pengujian secara eksplisit, Anda dapat mengetikkan t atau p yang dijelaskan dalam penggunaan jam tangan bercanda.
Alternatifnya, Anda dapat memulai test runner dengan file tertentu atau ekspresi reguler, seperti:
yarn test tests/unit/amo/components/TestAddon.js
Jika Anda ingin menjalankan semua tes dan keluar, ketik:
yarn test-once
Saat Anda menjalankan pengujian, Anda akan melihat laporan kesalahan Eslint di akhir keluaran pengujian:
yarn test
Jika Anda ingin menjalankan pengujian tanpa pemeriksaan Eslint, tetapkan variabel lingkungan:
NO_ESLINT=1 yarn test
Ada dukungan terbatas untuk menggunakan Flow untuk memvalidasi maksud program kami.
Saat Anda menjalankan pengujian, Anda akan melihat laporan kesalahan Aliran di akhir keluaran pengujian:
yarn test
Jika Anda ingin menjalankan pengujian tanpa pemeriksaan Aliran, tetapkan variabel lingkungan:
NO_FLOW=1 yarn test
Untuk hanya memeriksa masalah Aliran selama pengembangan saat Anda mengedit file, jalankan:
yarn flow:dev
Jika Anda baru bekerja dengan Flow, berikut beberapa tipnya:
Untuk menambahkan cakupan aliran ke file sumber, beri komentar /* @flow */ di bagian atas. Semakin banyak file sumber yang dapat Anda sertakan dalam Flow, semakin baik.
Inilah manifesto Flow kami:
getAllAddons mengambil argumen objek, panggil objek tipenya GetAllAddonsParams . Contoh: type GetAllAddonsParams = { |
categoryId : number ,
| } ;
function getAllAddons ( { categoryId } : GetAllAddonsParams = { } ) {
...
}{| key: ... |} ) bila memungkinkan. Terkadang operator penyebaran memicu kesalahan seperti 'Jenis tidak tepat tidak kompatibel dengan jenis tepat' tetapi itu adalah bug. Anda dapat menggunakan solusi Exact<T> dari src/amo/types/util jika perlu. Ini dimaksudkan sebagai pengganti $Exact yang berfungsi. // 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 atau any tetapi jangan ragu untuk menggunakannya jika Anda menghabiskan terlalu banyak waktu untuk mendeklarasikan tipe yang bergantung pada tipe lain yang bergantung pada tipe lain, dan seterusnya.$FlowFixMe untuk melewati pemeriksaan Flow jika Anda mengalami bug atau jika Anda menemukan sesuatu yang membuat kepala Anda terbentur pada keyboard. Jika itu adalah sesuatu yang menurut Anda tidak dapat diperbaiki maka gunakan $FlowIgnore sebagai gantinya. Harap jelaskan alasan Anda di komentar dan tautkan ke masalah GitHub jika memungkinkan.yarn flow type-at-pos ... untuk melacak tipe mana yang diterapkan ke kode. Lihat yarn flow -- --help type-at-pos untuk detailnya.Kami menggunakan Prettier untuk secara otomatis memformat kode JavaScript kami dan menghentikan semua perdebatan yang sedang berlangsung mengenai gaya.
Untuk melihat laporan cakupan kode, ketik:
yarn test-coverage-once
Ini akan mencetak tabel file yang menunjukkan persentase cakupan kode. Garis yang tidak tertutup akan ditampilkan di kolom kanan tetapi Anda dapat membuka laporan lengkap di browser:
open coverage/lcov-report/index.html
Server proxy disediakan untuk menjalankan aplikasi AMO dengan API di host yang sama dengan frontend. Ini meniru pengaturan produksi kami.
Mulailah mengembangkan terhadap API yang dihosting seperti ini:
yarn amo:dev
Ini mengonfigurasi proksi untuk menggunakan https://addons-dev.allizom.org untuk data API. Perintah ini adalah cara paling umum untuk mengembangkan fitur frontend baru. Lihat tabel perintah di atas untuk mengetahui cara serupa menjalankan server.
Untuk menggunakan server API lokal yang berjalan di Docker, Anda dapat menggunakan perintah yarn amo . Namun, hal ini saat ini tidak berhasil. Lihat edisi-7196.
Otentikasi akan berfungsi ketika dimulai dari addons-frontend dan akan bertahan di addons-server tetapi tidak akan berfungsi ketika masuk dari halaman addons-server. Lihat mozilla/addons-server#4684 untuk informasi lebih lanjut tentang cara memperbaikinya.
Jika Anda perlu mengganti pengaturan apa pun saat menjalankan yarn amo , yarn amo:dev , atau yarn amo:stage , pertama-tama buat file konfigurasi lokal dengan nama persis seperti ini:
touch config/local-development.js
Buat perubahan konfigurasi apa pun. Misalnya:
module . exports = {
trackingEnabled : true ,
} ;Mulai ulang server untuk melihat pengaruhnya.
Lihat dokumen pesanan pemuatan file konfigurasi untuk mempelajari lebih lanjut tentang bagaimana konfigurasi diterapkan.
Jika Anda ingin mengakses server lokal di perangkat Android, Anda perlu mengubah beberapa pengaturan. Katakanlah mesin lokal Anda dapat diakses di jaringan Anda di alamat IP 10.0.0.1 . Anda dapat memulai server Anda seperti ini:
API_HOST=http://10.0.0.1:3000
SERVER_HOST=10.0.0.1
WEBPACK_SERVER_HOST=10.0.0.1
yarn amo:dev
Di perangkat Android Anda, Anda kemudian dapat mengakses situs pengembangan di http://10.0.0.1:3000 .
CATATAN : Saat ini, tidak mungkin untuk masuk dengan konfigurasi ini karena klien akun Mozilla dialihkan ke localhost:3000 . Anda mungkin dapat mencoba pendekatan yang berbeda dengan mengedit /etc/hosts pada perangkat Anda sehingga localhost menunjuk ke mesin pengembangan Anda tetapi ini belum sepenuhnya diuji.
Saat dikembangkan secara lokal dengan server webpack, URL aset yang dibuat secara acak akan gagal dalam Kebijakan Keamanan Konten (CSP) kami dan mengacaukan konsol Anda dengan kesalahan. Anda dapat mematikan semua kesalahan CSP dengan menyetel CSP ke false di file konfigurasi lokal mana pun, seperti local-development-amo.js . Contoh:
module . exports = {
CSP : false ,
} ; Dokumentasi yang Anda baca saat ini ada di dalam repositori sumber sebagai Markdown rasa Github. Saat Anda membuat perubahan pada file-file ini, Anda dapat membuat permintaan tarik untuk mempratinjaunya atau, lebih baik lagi, Anda dapat menggunakan grip untuk mempratinjau perubahan secara lokal. Setelah menginstal grip , jalankan dari direktori sumber seperti ini:
grip .
Buka URL localhost -nya dan Anda akan melihat file README.md yang dirender. Saat Anda melakukan pengeditan, itu akan diperbarui secara otomatis.
Berikut ini adalah skrip yang digunakan dalam penerapan - biasanya Anda tidak memerlukannya kecuali Anda menguji sesuatu yang terkait dengan penerapan atau pembangunan.
Var envnya adalah:
NODE_ENV : lingkungan node, misalnya production atau developmentNODE_CONFIG_ENV : nama konfigurasi yang akan dimuat, misalnya dev , stage , prod| Naskah | Keterangan |
|---|---|
| benang mulai | Memulai server ekspres (membutuhkan env vars) |
| pembuatan benang | Membangun lib (semua aplikasi) (membutuhkan env vars) |
Contoh: Membangun dan menjalankan instance produksi aplikasi:
NODE_ENV=production NODE_CONFIG_ENV=prod yarn build
NODE_ENV=production NODE_CONFIG_ENV=prod yarn start
Untuk menjalankan aplikasi secara lokal dalam mode produksi, Anda harus membuat file konfigurasi untuk build produksi lokal. Pembuatan produksi dapat dibuat untuk lingkungan yang berbeda: dev , stage dan prod (dikontrol oleh NODE_CONFIG_ENV env var), namun hanya satu file konfigurasi tambahan yang diperlukan agar lingkungan ini dapat berjalan secara lokal.
Ganti nama file bernama config/local.js.dist menjadi config/local.js . Setelah ini, bangun kembali dan mulai ulang menggunakan yarn build dan yarn start seperti yang didokumentasikan di atas. Jika Anda pernah menggunakan 127.0.0.1 sebelumnya dengan konfigurasi berbeda, pastikan untuk menghapus cookie Anda. Aplikasi harus tersedia di: http://127.0.0.1:4000/.
CATATAN : Saat ini, tidak mungkin untuk masuk menggunakan pendekatan ini.
Anda dapat memeriksa untuk melihat penerapan addons-frontend apa yang diterapkan, eksperimen A/B mana yang berjalan, atau tanda fitur mana yang diaktifkan dengan membuat permintaan seperti ini:
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": ""
}
Ini akan mengembalikan respons 415 jika file version.json tidak ada di direktori root. File ini biasanya dihasilkan oleh proses penerapan.
Agar konsisten dengan skrip pemantauan, data yang sama dapat diambil di URL ini:
curl https://addons-dev.allizom.org/__version__
Anda dapat menginstal ekstensi amo-info untuk melihat informasi ini dengan mudah.
Proyek ini juga berisi kode untuk membangun perpustakaan bernama addons-frontend-blog-utils dan menawarkan perintah berikut:
yarn build:blog-utils-dev : membangun perpustakaan, memulai pengamat untuk membangun kembali perpustakaan saat ada perubahan dan menyajikan halaman pengembangan di http://127.0.0.1:11000yarn build:blog-utils-prod : membangun perpustakaan dalam mode produksiPerpustakaan ini dirancang khusus untuk bekerja dengan addons-blog.
Untuk menerbitkan versi baru addons-frontend-blog-utils , tag khusus harus dimasukkan ke repositori utama. Nama tag harus dimulai dengan blog-utils- dan biasanya berisi nomor versi. Ini dapat diotomatisasi menggunakan perintah berikut:
npm version [major|minor|patch]
Mengeluarkan perintah ini dari cabang master akan memperbarui versi di package.json , membuat komit dan membuat tag. Dorong komit dan tag ini ke repositori utama.
Catatan: Ketika rilis addons-frontend-blog-utils baru digabungkan dalam addons-blog, Anda harus menerbitkan versi baru tema WordPress. Silakan ikuti petunjuk ini di repositori addons-blog.
