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）支持的所有语言的用户都有效。
这也是一个独特的名称，实际上是实用的，而且从表面上讲，这只鸟很漂亮。
