simorgh
Release 4.2049.0
BBC世界服務新聞網站是使用基於ReactJ的應用程序Simorgh渲染的。 Simorgh還為世界服務，公共服務新聞和BBC Sport提供AMP新聞文章頁面。
Simorgh每月提供了全球數百萬人使用的快速易到的網絡體驗（請參閱使用Simorgh的網站列表）。它經常維護和有據可查，我們歡迎開源貢獻者。
Simorgh主要由BBC新聞網絡工程團隊維護。它向全世界的讀者（41種語言）傳達了備受信任的新聞。我們支持各種設備，並深切關心規模，性能和可訪問性。我們在敏捷，靈活的團隊中工作，並為未來的發展提供了令人興奮的路線圖。
請熟悉我們：
NB有進一步的文檔與相關代碼共歸入。上面的列表是我們存儲庫頂級文檔的索引。
BBC文章（https://www.bbc.co.uk/news/articles/clldg965yzjo）的請求將從專有路由和緩存服務（稱為Mozart）傳遞給Simorgh應用程序。
該請求使用Regex Match（ articleRegexPath || frontPageRegexPath ）匹配我們Express Server中的路由。如果URL匹配文章或首頁的預定義的正則態度模式，我們使用getRouteProps函數從路由中獲取一些參數。這將返回服務，ISAMP，路線和匹配屬性。路由是一種反應路線，它定義了一種獲取用於渲染頁面的初始JSON的方法，以及用於渲染ArticleContainer的React容器，這通常稱為getInitialData
返回數據後，我們將其拉動狀態代碼，並使用renderDocument將所有這些數據作為道具傳遞給我們的主要文檔。
該文檔通過URL，JSON數據，BBC Origin，ISAMP和主要應用程序容器的服務，並使用ReactS自己的renderToString方法將結果渲染到字符串。然後將此字符串傳遞給DocumentComponent作為主要應用程序以及資產數組，樣式標籤（來自樣式組件的輸出）以及需要添加到頭部的任何腳本/鏈接。然後將其渲染到使用React自己的renderToStaticMarkup靜態HTML標記，並以靜態HTML的形式發送給用戶。此響應中包含的是指向我們的JS捆綁包的鏈接，用戶設備將下載該鏈接，以引導單頁應用程序（SPA）進行後續旅行。
現在已經下載了RAW HTML，客戶端JS文件啟動並將初始響應與客戶端側應用程序進行了補充。在此過程中，React使用初始JSON有效負載（在全局窗口對象SIMORGH_DATA上可用）來補充ReactDomserver返回的原始標記。 React期望渲染的內容在服務器和客戶端之間相同（這就是為什麼我們將初始JSON有效負載帶有SSR頁面，因此水合階段以與使用服務器所使用的服務器相同的數據運行）。
文章的JSON有效載荷由許多塊組成。每個塊是代表頁面上一個元素的對象，這可能是標題，圖像，段落等。這些塊中的每個塊都有一個塊類型，並且塊類型將與Simorgh EG blocktype中的特定容器匹配：圖像將匹配與圖像容器相匹配。
ARTICLEMAIN容器將在每個JSON塊上迭代，將其與其相應的反應容器進行匹配，並通過Props傳遞數據。這些容器是渲染每個塊類型的邏輯所在的地方。正是在這一點上，我們使用PSAMMEAD組件庫中安裝的前端組件。例如，圖像容器將導入圖形容器，圖將導入和使用PSAMMED-image和Psammead-image-able-aplach-applater組件。文章上的圖像通常會帶有標題，因此圖形容器將導入字幕容器，該容器可能包括更多的前端組件，從PSAMMEAD到圖像頂部的標題。
文章中的每個塊重複了此過程，最終將新聞文章的主體呈現，其中使用了React容器的組合，用於業務邏輯，並為前端標記進行了React組件。
每個渲染都通過一組HOC的（高階組件）來增強頁面，這些HOC是；
通過使用optimizelyProvider傳遞的頁麵類型的選擇，可以在所選頁麵類型中進行優化。
變體HOC確保具有變體的服務（例如simp ， lat ）始終將其重定向到呈現適當變體的URL。
如果用戶在不提供變體的情況下導航到URL，並且在cookie中設置了變體，則呈現cookie變體頁面。否則，渲染默認變體頁面
如果用戶導航到具有變體的URL，並且在cookie中設置了變體，則呈現cookie變體頁面。否則，將渲染請求的變體頁面。
WithContexts HOC是一個包裝器，可訪問應用程序中可用的不同上下文提供商。這些上下文提供商內部的任何子組件都可以通過USECONTEXTS掛鉤訪問上下文數據。
頁麵包裝程序HOC只需將文章或前頁面容器包裝為佈局，目前我們只有一個頁面佈局。該佈局包括標題，頁腳和上下文提供商，小時候在標頭和頁腳之間渲染主體。
錯誤HOC檢查傳遞的錯誤道具，如果設置了錯誤以將文章或前頁面容器簡單返回。
如果將錯誤設置為true，則返回錯誤組件，從而為用戶提供錯誤的視覺指示，例如500錯誤頁面。
假設另一個事件已返回原始文章或前頁面容器，數據HOC將對通過數據Prop傳遞的JSON數據進行一些驗證檢查。如果滿足了所有檢查，則將用一個pageData道具返回ARCLECONTAINER。該PageData道具將容納JSON數據以渲染，例如給定文章的最佳塊。
withchangehandler hoc是將包裝器應用於所有頁面，該頁面檢查了對URL哈希值的更改。頁麵包括可訪問性控件以跳過內容，如果用戶選擇這樣做，則使用URL哈希來跳過用戶到頁面的特定區域。由於客戶端路由的性質，對URL的變化會導致重新渲染。這會導致一些難看的UI閃爍某些組件，特別是媒體和社會嵌入。該事件將檢查適用於URL，因此請查看是否需要重新渲染，或者如果不阻止使用React.memo進行重新渲染。
withoptimizelyprovider HOC返回的組件已通過訪問優化客戶端進行了增強，該組件用於運行我們的A/B測試。這樣做是為了限制捆綁包大小，因為我們按頁類型將一些捆綁包分開，這意味著，如果我們僅在某些頁麵類型上運行A/B測試，我們可以防止使用用於優化的SDK庫的重量污染頁麵類型捆綁包。
應添加使用OptimizelyProvider作為applyBasicPageHandlers.js中的handlerBeforeContexts鍵的值，因為ckns_mvt設置在USERCONTEXT內部，因此需要與withOptimizelyProvider hoc一起使用與Contextextssexts hoc一起使用。這使得ckns_mvt首次訪問可用，以傳遞到OptimizelyProvider ，以及諸如service之類的屬性，該屬性用於確定何時Optimizizely應啟用實驗。
文章頁面的示例：
import withOptimizelyProvider from '#app/legacy/containers/PageHandlers/withOptimizelyProvider' ;
import ArticlePage from './ArticlePage' ;
import applyBasicPageHandlers from '../utils/applyBasicPageHandlers' ;
export default applyBasicPageHandlers ( ArticlePage , {
handlerBeforeContexts : withOptimizelyProvider ,
} ) ;添加新頁麵類型時，需要幾個部分。
/data/{{service}}/{{pageType}}/.json後綴的頁面相同的路線上可用localhost:7080/igbo.json應該有數據以構建索引頁面localhost:7080/igbomain元素flex-grow: 1; CSS聲明，這是為了確保使用flexbox“粘性頁腳”實現的root Div填充視覺標頭和頁腳之間的空間。 cypress/support/config/settings.js的配置（即使將新頁麵類型設置為未定義）cypress/integration/pages/中添加頁麵類型的定制測試。cypress/integration/pages/下添加定制測試，則必須確保更新E2E管道以運行新的規格測試E2E管道和Live E2E PipelineNB：通過這麼多步驟，建議在添加新頁麵類型時具有多個PR，以免具有奇異的巨大PR。但是，如果柏樹測試（＃6）未與頁面路由相同的PR添加（＃5），則應立即遵循頁面路由PR，理想情況下應在單個PR中處理這些PR。
請閱讀：貢獻
安裝節點。 https://nodejs.org/en/。我們使用.nvmrc中指定的版本，如果您具有Node版本管理器（NVM），則可以運行以下腳本以自動更改為Project Spections Spected版本。
nvm use
Simorgh項目將紗線用於包裝管理。建議通過NPM軟件包管理器安裝紗線，該紗線在系統上安裝時與Node.js捆綁在一起。要安裝紗線，請運行此命令：
npm install --global yarn
然後，您可以運行以下命令來安裝Simorgh
git clone [email protected]:bbc/simorgh.git
cd simorgh
yarn install
要在當地運行此應用程序，並運行熱功能
yarn dev
該應用程序將從http：// localhost：7080開始。
文章頁面在格式/news/articles/:id的路線上提供，其中ID是內容管理系統生成的資產ID。
僅供參考：解釋BBC在URL中使用ID的文章
這兩篇新聞文章可在我們的CMS的測試環境以及本地提供，因此通常用於測試：
我們還在路由/news/articles/:id.amp https://www.ampproject.org上提供AMP html頁面
無法使用上面的格式訪問具有變體的服務，而是必須在URL中提供變體。
世界服務頭版以“服務service代表世界服務網站的格式/:service ：
世界服務頭版也遵循AMP的文章格式，可在/:service.amp上獲得：
無法使用上面的格式訪問具有變體的服務，而是必須在URL中提供變體。
主題頁面使用不可公開訪問的內部BBC API。這可能會導致以下警告在本地開發時出現：
No BFF_PATH set as environment variable, you will not have access to topics
需要在本地進行主題頁面上工作的內部開發人員應與團隊聯繫以供訪問。
故事頁面中的建議還使用內部BBC數據實驗室API。它需要在envConfig/secret.env文件中添加鍵/值對才能在本地出現。
需要在本地進行文章頁面上工作的內部開發人員應與團隊聯繫以供訪問。
您可以通過查看我們的路線及其同事的再發格來找到其他頁麵類型，但是我們建議您從上述開始，然後查看應用程序的核心，以理解和查找其他路線。
我們使用故事書來開發與Simorgh應用程序隔離的組件。您可以在https://bbc.github.io/simorgh/上訪問此信息。
要運行本地yarn storybook ，它將在http：// localhost：9001/。故事書的簡介和文檔介紹：https：//storybook.js.org/basics/introduction/。
在本地查看視頻故事時，請確保使用BBC域，如“不斷變化的請求位置”部分中概述。由於這個原因，視頻將在上面鏈接的託管版本的故事書中不起作用。
我們還使用彩色質量檢查來對我們的故事進行跨瀏覽器測試。
另請注意，如果您想查看使用我們的字體呈現的組件，則需要強制對畫布進行重新塗抹。這是因為我們的字體都具有根據相應的加載策略的optional或swap的font-display屬性：https：//ws-downloads.files.bbci.bbci.co.uk/fonts/index.html。強制重新粉刷的最簡單方法只是將預覽窗口之間的分隔線移動到旋鈕部分和Knobs部分或調整瀏覽器窗口大小。
如果您想託管該應用程序以通過本地網絡訪問，請在此處按照此處的說明進行操作。
要通過生產構建本地運行此應用程序，請運行： yarn build && yarn start 。
我們在本地使用yarn build ，這將指向Localhost的應用程序和靜態資產的應用程序捆綁在一起。
這主要用於使用測試和實時環境捆綁包進行latest 。在開始調試之前，請確保在靜態資產位置存在束束位置。
在Localhost上運行測試捆綁包：
envConfig/test.env中更改：LOG_DIR='/var/log/simorgh' LOG_DIR='log'rm -rf build && yarn build:test && yarn start在Localhost上運行現場捆綁包：
envConfig/live.env中更改：LOG_DIR='/var/log/simorgh' LOG_DIR='log'rm -rf build && yarn build:live && yarn start某些功能在用戶是否位於英國還是國際上的作用不同。您可以通過特定的Localhost BBC域訪問SIMORGH來明確要求特定版本：
如果這些URL不起作用，則可能需要添加hosts文件條目（ /etc/hosts或C:WindowsSystem32driversetchosts ）：
127.0.0.1 localhost.bbc.co.uk
127.0.0.1 localhost.bbc.com
在部署中， make buildCi是在CI環境中運行的，該環境為test和live環境創建捆綁包。在兩個環境上.env.test或.env.live文件覆蓋用於運行應用程序使用正確捆綁的.env文件。
每次運行的yarn build都會在存儲庫中更新捆綁分析文件。要查看捆綁包大小的細分，請在瀏覽器中打開webpack-bundle-analyzer的HTML報告./reports/webpackBundleReport.html數據也可作為JSON ./reports/webpackBundleReport.json提供。
我們與Airbnb styleguide有覆蓋，我們將更漂亮的代碼格式化。它們可以通過yarn test:lint 。
我們有開玩笑的單元測試可以通過yarn test:unit 。
yarn test運行兩組。
我們使用柏樹進行端到端測試。要在本地運行煙霧測試，請運行此單個命令：
yarn test:e2e
它將在端口7080上旋轉生產服務器，並針對此運行柏樹測試。要交互進行煙霧測試，請運行：
yarn test:e2e:interactive
這將加載一個用戶界面，該界面很容易允許在測試運行時與瀏覽器的視覺流一起運行單個測試。
您可以在我們的測試套件中使用幾個環境變量，其中包括：
| 環境變量 | 影響 | 可能的值 |
|---|---|---|
| cypress_only_service | 僅限制僅運行指定的服務 | 單個服務即CYPRESS_ONLY_SERVICE=urdu |
| cypress_app_env | 在特定環境中進行測試 | test ， local ， live |
| cypress_smoke | 如果是真的，則僅進行煙霧測試 | true ， false |
| cypress_uk | 請參閱在英國對現場直播的E2ES | true ， false |
| cypress_skip_eu | 請參閱歐盟以外的E2ES運行 | true ， false |
這些命令可以組合運行。
運行E2E Suite aka yarn test:e2e或yarn test:e2e:interactive運行我們的測試子集，否則將其視為煙霧測試。運行完整的套房：
CYPRESS_SMOKE=false yarn test:e2e
通過使用CYPRESS_ONLY_SERVICE環境變量指定單個服務，可以將測試僅限於單個服務。例如：
CYPRESS_ONLY_SERVICE=urdu yarn test:e2e
要僅運行一個特定的規格，有必要直接調用柏樹。首先確保Simorgh已經在另一個選項卡中運行，然後運行（例如，僅運行文章測試）：
npx cypress run --spec cypress/integration/pages/articles/index.js
有關使用柏樹CLI的更多詳細信息，請訪問https://docs.cypress.io/guides/guides/guides/command-line.html
這僅影響英國的開發人員（但如果您使用英國的VPN路由，可能會影響您）
Cypress .visit（）函數鎖定為每次測試訪問一個域。當您從.com重定向到.co.uk時，當您從英國啟動E2E測試時，這將變得有問題。默認情況下，柏樹測試將像在英國以外運行一樣進行。為了從英國運行這些測試，您必須在UK柏樹環境變量中通過測試。這將替換為.co.uk的URL末端，這將使您能夠成功運行這些測試。
這是一個示例命令：
CYPRESS_APP_ENV=test CYPRESS_UK=true CYPRESS_SMOKE=true yarn cypress
這會影響基於歐盟的開發人員（但是，如果您使用的是通過一個不在歐盟中的國家 /地區使用VPN路由，可能會影響您）
在歐盟之外進行柏樹測試不會顯示放大器上的歐盟同意書，這可能會導致某些測試失敗。設置CYPRESS_SKIP_EU=true ，以防止在歐盟外面運行這些測試。
示例命令將是：
CYPRESS_SKIP_EU=true yarn cypress:interactive
以下命令同時運行Simorgh和Cypress：
CYPRESS_APP_ENV=local CYPRESS_UK=true CYPRESS_SMOKE=true yarn test:e2e
cypress_app_env也可以設置等於“測試”和“實時”。 Cypress_smoke可以是真實的。默認情況下是正確的，並運行特定的測試子集。
我們使用燈塔測試頁面的性能。但是，這些已從Simorgh轉移到我們自己的內部CD流程中。這使我們能夠對Simorgh進行更準確的描述進行這些測試。您可以自由從鍍鉻瀏覽器中自行運行燈塔或使用節點燈塔CLI。
以波斯神話鳥的名字命名。 Simorgh是許多鳥類（在某些情況下）的汞齊。
令人高興的是，隨著應用程序發展以支持更多內容類型，似乎很容易在一種解決方案中提供所有BBC文章的隱喻。這也清楚地提到了我們團隊的國際性質，但也渴望確保文章（以及隨之而來的所有內容）對英國廣播公司（BBC）支持的所有語言的用戶都有效。
這也是一個獨特的名稱，實際上是實用的，而且從表面上講，這隻鳥很漂亮。
