Named Simorgh after the Persian mythological bird. The Simorgh is the amalgam of many birds (and in some accounts other animals) into one. We consider this an apt metaphor for all articles of the BBC in one solution, a clear reference to the international nature of our teams but also to the articles themselves working for international users from the outset. It is also a unique name which is practical and, more superfically, the bird is very pretty.
Simorgh is a universal react renderer, built on react-universal-app. This repo is publicly accessible and the application will be used to generate the future, pan-BBC article.
It currently has an embedded components library which will be split out as the number of components grow.
We have a continuous deployment pipeline which automatically deploys all changes to live within a hour of merge (soon to be much shorter).
Install Node 8. https://nodejs.org/en/
Update to use the latest npm npm i -g npm
git clone git@github.com:bbc/simorgh.git
cd simorgh
npm install
To run this application locally, with hot-reloading, run: npm run dev.
The application will start on http://localhost:7080. To view an article, visit this url http://localhost:7080/news/articles/c0000000001o.
The route is /news/articles/:id, where id is the filename of the static Article data, for example c0000000001o.
Articles 25 & 27 are available on the Production environment as well as locally. These can be used for testing. http://localhost:7080/news/articles/cl55zn0w0l4o http://localhost:7080/news/articles/cn7769kpk9mo.
There is also an AMP route at /news/articles/:id.amp with the article being AMP-compatible. https://www.ampproject.org
To run locally npm run storybook, it will then be available at http://localhost:9001/. Introduction to and documentation for Storybook is here: https://storybook.js.org/basics/introduction/.
To run this application locally with a production build, run:
npm run build && npm run start.
We use npm run build locally which bundles the application pointing at localhost for data and static assets.
To avoid indexing by search engines during our early development, there is a nofollow page level meta tag in Document.jsx.
This is mainly used for debugging latest using the TEST and LIVE environment bundles. Ensure that the bundles exist in the static asset location for the correct environment before starting to debug.
To run TEST bundles on localhost:
- In
envConfig/test.envchange the value ofLOG_DIR='/var/log/simorgh'toLOG_DIR='log' - Then run
rm -rf build && npm run build:test && npm run start - Visit a test article: http://localhost:7080/news/articles/cyddjz5058wo
To run LIVE bundles on localhost:
- In
envConfig/live.envchange the value ofLOG_DIR='/var/log/simorgh'toLOG_DIR='log' - Then run
rm -rf build && npm run build:live && npm run start - Visit a live article: http://localhost:7080/news/articles/c8xxl4l3dzeo
On deployment npm run build:ci is run in the CI environment which creates bundles for both the test and live environments. On the two environments the .env.test or .env.live files overwrite the .env file which is used to run the application with the correct bundles.
Every run of npm run build:ci will update the bundle analysis files in the repo. To view a breakdown of the bundle size, open the generated html report in a browser ./reports/webpackBundleReport.html This is generated via webpack-bundle-analyzer. The data is also available as json ./reports/webpackBundleReport.json.
We have linting with the Airbnb styleguide and we use Prettier as a code formatter. They can be run with npm run test:lint.
We have Jest unit tests that can be run with npm run test:unit.
npm test runs both sets of these.
We use Cypress for our end-to-end tests. For running the tests locally, run this single command:
npm run test:e2e
It will spin up a production server on port 7080 and run the Cypress tests against that.
Further details on using the Cypress CLI can be found at https://docs.cypress.io/guides/guides/command-line.html
Cypress can be run interactively using npm run test:e2e:interactive. This loads a user interface which easily allows for indivdual tests to be run alongside a visual stream of the browser, as the tests run.
We also have a Cypress project which runs a different set of end-to-end tests on Storybook. For running the tests locally we need two terminals running:
npm run storybookwith the application,npm run test:storybookwith the Cypress integration tests.
We use Lighthouse to test the performance of our page. For running the tests locally we need two terminals running:
- Start the production server
npm run lighthouseruns our Lighthouse tests.
Lighthouse will output html reports to the reports folder. It will also open a HTML report in your browser allowing an individual to clearly see the best practice score of the page along with the audits that were run against it.
nofollowmust be removed once this repo is ready for production use