This high level diagram shows the difference between the data flow when DCR is used in production, driven by the frontend backend, and when DCR is used as a local server. The arrows are labelled in the order they happen. The bold arrow is the JSON data object that DCR uses to generate the HTML document.
The only thing you need to make sure you have installed before you get going is Node.
We recommend using fnm to help manage multiple versions of Node.js on on machine.
Start the development server:
make dev
This will start the development server on port 3030: http://localhost:3030.
Note: To run the development server with support for legacy browsers, use
make dev-legacy
You can preview an article from theguardian.com
by appending the full URL to the path of your localhost article page. For example:
You can use this technique to integrate with a locally running instance of frontend
. This is especially useful for testing changes to the data model:
You can preview an AMP page similarly to an article, as follows
or, connecting to a locally running instance of frontend,
The dotcom-rendering github account is set up to merge PRs into main instead of rebase. Merge commits are useful to quickly revert things when there is a major incident - whereas with rebase you might have to revert a whole load of commits.
However, if you are working on a feature branch and plan to make a PR, it's still recommended to rebase on main
to avoid extraneous merge commits in branches.
For ease of development you may want to install:
You may want local identity cookies to be available in dotcom-rendering
. To enable this:
- run
./scripts/nginx/setup.sh
- access
dotcom-rendering
through https://r.thegulocal.com
make build
creates production-ready bundles.make prod
starts the production server.
More scripts can be found in the makefile
prod section scripts
The production port default is 9000 for deployment, but to run locally alongside frontend, you will need to manually override. To hit the server, add
rendering.endpoint = "http://localhost:${port}/Article"
with the override port number to frontend.conf
and run frontend locally.
Name | Description |
---|---|
HOSTNAME |
Defaults to localhost . If running behind a reverse proxy (Github Codespaces / Ngrok) this needs to be set to the hostname used to access DCR |
NODE_ENV |
production or development . Toggles features such as hot reloading, compression, localhost access, etc |
GU_STAGE |
PROD or DEV . Typically used to decide if DCR should call Production downstream API's or CODE downstream API's |
GU_PUBLIC |
Any value, undefined will disable. Toggles serving assets on the /assets/ endpoint |
DISABLE_LOGGING_AND_METRICS |
Boolean. Toggle for enabling Log4js |
Most of these variables are set by our make scripts and you don't need to worry about setting them.