@times-components/ssr

    2.36.0 • Public • Published

    SSR

    The renderer used to render top level components server side and to create client bundles. Add any "pages" (top level components) here for rendering, by adding a route and the webpack config necessary to create a client bundle.

    Usage

    In order to create a bundle, we need for all packages to have their own rnw bundle. Use npx lerna run bundle at the root to simulate a published package.

    yarn bundle:dev

    Create a client-side dev bundle to hydrate the SSR page, useful for checking developer level warnings which you may need to fix

    yarn bundle:prod

    Create a client-side prod bundle to hydrate the SSR page, this will have the various optimisations applied with code splitting and silence any console warnings/errors. The server-side response is also compressed for testing client perf.

    GRAPHQL_ENDPOINT=<API endpoint> SPOT_ID=<SpotIM ID> yarn start

    Run a simple node server which serves up the various pages which currently include:

    • /article/:article-id
    • /profile/:author-slug
    • /topic/:topic-slug

    They will use the client side bundle you generated above.

    • GRAPHQL_ENDPOINT is used for data fetching.
    • SPOT_ID is used to render comments on article pages.
    • You can optionally set GRAPHQL_TOKEN (instructions should be available from your API provider) to get unteased articles.
    yarn bundle:profile

    This will generate the webpack stats.json file in dist. You can then use a command such as npx webpack-bundle-analyzer stats.json in the dist folder to visualise the webpack bundle or upload it to other tools suggested by webpack

    yarn start:testserver

    Simply starts the SSR server but sets the SPOT_ID to a fixed dummy value (so the SpotIM script will written on the article page, but not found/run), and sets GRAPHQL_ENDPOINT to port 4000 which is where the test TPA server should be running.

    Contributing

    Please read CONTRIBUTING.md before contributing to this package

    Running the code

    Please see our main README.md to get the project running locally

    Development

    The code can be formatted and linted in accordance with the agreed standards.

    yarn fmt
    yarn lint

    Testing

    As the future of the website, we want to improve the end-to-end testing DX which Cypress may help us with. There is currently a very simple implementation which could be developed to the point where editorial content is developed with a TDD approach here, that just happens to use components in the monorepo.

    Currently there is one simple test that is run separately in CI with no coverage measured.

    The tests can be developed as follows:

    yarn start:testservers
    npx cypress open

    you can then use the Cypress GUI to develop your tests.

    For CI or to check you haven't broke anything there is:

    yarn test:integration

    This will create a dev client side bundle with the mock GRAPHQL_ENDPOINT, start up the mock server and SSR, run the Cypress tests inside electron and then shutdown the servers.

    Persisted Queries

    To enable persisted queries in the client, add the following line to your client-side javascript:

    window.nuk.graphqlapi.usePersistedQueries = true;
    

    Future

    • Publish : potentially we want to look at using this as our source of truth for server-side rendering, this would mean exporting and publishing the code to be used by render, so it's "all the same code"

    • Bundle Size: we bundle packages on CI in master, we could then bundle here and lint for excessively sized bundles

    • Testing: flesh out the mock server to auto-generate several scenarios for e2e testing and add more Cypress tests to move away from render specific and/or Java tests

    Install

    npm i @times-components/ssr

    DownloadsWeekly Downloads

    2,685

    Version

    2.36.0

    License

    BSD-3-Clause

    Unpacked Size

    18 MB

    Total Files

    69

    Last publish

    Collaborators

    • marcincuber
    • newsuk
    • news-tools