Article Templates for Mobile Apps

Article templates used within the Guardian’s next-generation iOS and Android applications. This repo also contains documentation that describes the components and layouts used across these templates.

Requirements

• A Mac or Linux computer.
• NVM.
• NodeJS. Install using nvm: nvm install v10.17.0. Remember to add nvm use v10.17.0 to your preferred shell startup file.
• You may need to install npm globally npm install -g npm.
• It is recommended you restart your shell to ensure changes added the startup file are applied.

Developing

Clone

$ git clone [email protected]:guardian/mobile-apps-article-templates.git

Install

$ cd mobile-apps-article-templates
$ npm install

• If you get an error on this step regarding lib/node_modules/npm/node_modules/promise-retry/index.js or another module, running npm install -g npm and re-running npm install may fix it.

Running on iOS simulator

• Checkout the branch you are developing against
• Run npm run build
• Checkout the ios-live project
• Edit the package.json file in the root of ios-live, replacing the version of the @guardian/mobile-apps-article-templates dependency with the relative path of the local templates repo:

"dependencies": {
    "@guardian/mobile-apps-article-templates": "file:../mobile-apps-article-templates"
}

• You will then need to run npm install in the ios-live directory that contains the package.json in the repo.

Running on Android simulator

• Checkout the branch you are developing against
• Run npm run build
• Checkout the android-news-app/ project
• Edit the package.json file in android-news-app/android-news-app/, replacing the version of the @guardian/mobile-apps-article-templates dependency with the relative path of the local templates repo:

"dependencies": {
    "@guardian/mobile-apps-article-templates": "../../mobile-apps-article-templates"
}

• You will then need to run npm install in the android-news-app/android-news-app directory that contains the package.json in the repo.

Building from S3 (iOS or Android)

• Find the branch you want to test on teamCity
• Click run to build the branch and upload to s3
• You can find the s3 package in bundle-url.txt under artifacts

Update your package.json:

"dependencies": {
    "@guardian/mobile-apps-article-templates": "https://s3-eu-west-1.amazonaws.com/builds.gutools.co.uk/guardian-mobile-apps-article-templates-v1.0.190.tgz"
}

NPM scripts

NPM will provide the following services:

• npm run test runs the JS unit tests from the test/spec/unit/ directory
• npm run build builds JS/CSS assets, used on CI environment for building assets
• npm run dev builds JS and CSS (with source maps).

Example templates

These are examples of the main templates used across apps:

| Template | Article | | --- | --- | | Article | https://www.theguardian.com/cities/2019/may/31/madrid-set-to-end-clean-air-project-in-rightwing-power-switch | | Podcast | https://www.theguardian.com/news/audio/2019/may/31/trump-coming-to-see-the-queen-but-what-actually-happens-on-a-state-visit-podcast | | Video | https://www.theguardian.com/global/video/2019/may/17/labours-laura-parker-farage-winning-would-be-uks-worst-legacy | | Gallery | https://www.theguardian.com/film/gallery/2019/may/30/the-horror-apocalypse-now-unseen-in-pictures | | Immersive | https://www.theguardian.com/sport/2019/may/31/i-wouldnt-be-the-refugee-id-be-the-girl-who-kicked-ass-how-taekwondo-made-me | | Liveblog | https://www.theguardian.com/sport/live/2019/may/31/west-indies-v-pakistan-cricket-world-cup-2019-live | | Immersive interactive | https://www.theguardian.com/us-news/ng-interactive/2019/may/29/chemical-checkout-what-might-be-hiding-in-your-groceries | | Photo essay | https://www.theguardian.com/society/2019/may/31/amish-on-holiday-sarasota-florida-dina-litovsky-photo-essay | | Guardian labs | https://www.theguardian.com/the-abcs-of-recruiting-teachers-remotely/2020/may/01/the-new-rules-of-remote-recruiting-how-to-prepare-for-an-online-interview |