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"
}

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"
}

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: