Frontend rendering framework for theguardian.com. It uses React, with Emotion for styling.

Check out the Digital/dotcom-rendering channel on Chat. If you haven't already done so already, please ask the Dotcom Platform team for an invite.

This guide will help you get the dotcom-rendering application running on your development machine.

The only thing you need to make sure you have installed before you get going is Node.js.

We recommend using nvm (especially combined with this handy gist). It is great at managing multiple versions of Node.js on one machine.

$ git clone [email protected]:guardian/dotcom-rendering.git
$ cd dotcom-rendering
$ make dev

This will start the development server on port 3030: http://localhost:3030.

If you're new to JavaScript projects, if you're trying to integrate with other applications or if you prefer to take things slow, we also have a more detailed setup guide.

The dotcom-rendering github account is set up to enforce rebasement on the master branch before merging. If you are working on a feature branch and plan to make a PR, please avoid merging from master during your work and, instead, always rebase on master. The reason is that if you simply merge from master, then when the time to rebase on master comes any conflicts you may have had to correct will show up again thereby duplicating your efforts.

After completing this setup guide, we would greatly appreciate it if you could complete our dotcom-rendering setup questionnaire. It should only take 3 minutes and will help us improve this documentation and the setup process in the future. Thank you! 🙏

You can ensure your code passes code quality tests by running:

$ make validate

This runs our linting tool, the TypeScript compiler and our tests, before finally building the bundles.

You can also run these tasks individually:

$ make lint
$ make tsc
$ make test

If you get lint errors, you can attempt to automatically fix them with:

$ make fix

See the makefile for the full list.

We recommend using VSCode.

VSCode should prompt you to install our recommended extensions when you open the project.

You can also find these extensions by searching for @recommended in the extensions pane.

We recommend you update your workspace settings to automatically fix formatting errors on save, this avoids code style validation failures. These instructions assume you have installed the esbenp.prettier-vscode VSCode plugin:

1. Open the Command Palette (shift + cmd + P) and type >Preferences: Open Settings (JSON)
2. Add the key value "tslint.autoFixOnSave": true,