MediaOS DEV Training

INTRO

Overview

1. Overview of code architecture
2. Setup of devBox instances  
3. RAMS-ID and the setup of new users 
4. Sandbox
5. Git workflow + Code Review Process
6. Setting up a new region theme
7. Cheat sheet

Code Architecture

The MediaOS platform uses below codebase levels to create the CORE functionality in the CMS/Front-end and theming for each brand/region in the US and across the EUHUB.

For more info: http://docs.hdigital.net/mediaos/code-architecture.html

CORE (CS) - https://github.com/Hearst-Digital/Rams-CS

THEME BASE - https://github.com/Hearst-Digital/rams-themes-base

THEMES US - https://github.com/Hearst-Digital/rams-themes-us

THEMES IT - https://github.com/Hearst-Digital/rams-themes-it

THEMES UK - https://github.com/Hearst-Digital/rams-themes-uk

THEMES NL - https://github.com/Hearst-Digital/rams-themes-nl

DevBox Setup

Using the HMI Dev Jenkins app and the AWS console, a full EC2 stack can be spun up with the below features. 

Please follow this tutorial to go through the spin-up process step-by-step:

http://docs.hdigital.net/devboxes/hdm-devbox-setup.html​

Features:

• apache2
• php54
• memcached
• mysql (client & server)
• elasticsearch
• imagemagick
• phpunit
• phpcs
• composer
• node
• npm
• grunt
• ruby
• sass
• git flow

Jenkins settings

Use the below settings to setup a full stack EC2 instance, depending on which site/region you select jenkins will import the latest production DB with different release branches/versions for the CORE and themes 

Connecting to DevBox

Creating CMS accounts

Using RAMS-ID, member accounts can be setup to access to multiple MediaOS sites in the US/EUHUB. Accounts are divided into the below 4 account types. For more info about specific permissions, please refer to :

https://thetower.atlassian.net/wiki/display/II/Current+MediaOS+Permission+Levels

1. Admin
2. Managing Editor
3. Editor
4. Contributor
5. Front-end Only

Admin area: https://rams-id.hdmtools.com/

URL structure

DEV

CMS - rams-devnameorfeaturename.hmitech.io

Site - www-devnameorfeaturename.hmitech.io

STAGE

CMS - rams-stage.sitename.com

Site - www-stage.sitename.com

PROD

CMS - rams.sitename.com

Site - www.sitename.com

Sandbox

Within the CMS, the sandbox allows editorial to customise the home/section landing pages and top navigation menus.  

Features include:

1. NavBar
2. Top Pathing
3. Custom promo for homepage,
4. Pinned collection on home page
5. Pinned content from must read on home page

More info here: https://thetower.atlassian.net/wiki/download/attachments/52658455/MediaOS_101_Edited.pdf?version=1&modificationDate=1435765074571&api=v2

GIT workflow & code review

​Requirements:

1. Git flow installed (https://thetower.atlassian.net/wiki/display/CR/Git+Workflow+-+Git+Flow)
2. Public SSH key from local machine/devbox added to github account (https://help.github.com/articles/generating-ssh-keys)

Steps

1. Take JIRA ticket for development (https://thetower.atlassian.net/secure/RapidBoard.jspa?rapidView=152)
2. Pull down the latest codebase from the develop branch with git pull origin develop
3. Create a feature branch with git flow feature start {JIRA-ticket-no}-(feature-name}
4. Publish feature to remote git repo so other developers can collaborate on the feature with git flow feature publish {JIRA-ticket-no}-(feature-name}
5. Navigate to the repo on github.com and create a pull request
6. When development is complete, add a comment to the pull request and assigned to another developer for code review
7. If the feature passes the code review, it is then passed over QA to test the feature on their devbox
8. Once it has passed QA, it is then merged into the develop branch in preparation for a code release to the live site

More info:   https://thetower.atlassian.net/wiki/display/CR/Git+Workflow+-+Git+Flow

Setting up a new theme

To create a country theme for a specific brand, pull down the theme repo and follow the below steps:

1. Duplicate the "everything" folder in themes-{region}/sites and rename it what the site is
2. Update the config file with that site's information
3. Add in the favicon and apple touch icon to the images folder
4. Add the logos and set which gets pulled in where in the config
5. Create a fonts folder
6. Upload all font files you want to use (make sure they are renamed to something that a human can read)
7. Create a _font-faces.scss partial (you can look at any of the other sites to see the structure)

More info: http://docs.hdigital.net/mediaos/setup-new-theme.html

Editing SASS/JS templates

http://docs.hdigital.net/mediaos/setup-new-theme/changing-sass.html

1. Duplicate the "everything" folder in themes-{region}/sites and rename it what the site is
2. Update the config file with that site's information
3. Add in the favicon and apple touch icon to the images folder
4. Add the logos and set which gets pulled in where in the config
5. Create a fonts folder
6. Upload all font files you want to use (make sure they are renamed to something that a human can read)
7. Create a _font-faces.scss partial (you can look at any of the other sites to see the structure)

Cheat sheet

/* update DB on devbox */
cd /home/www/sites/cli; php Database.php migrations:migrate

/* clear cache on a page */
?force_database

/* clear memcached layer to update the front-end */
sudo service memcached restart

/* bypass caching layer on the page */
?dynamic

/* display errors on the page */
?show_errors

/* compile grunt */
cd /www/sites; grunt build

/* download branches */
git fetch --all

/* checkout/change feature branch */
git checkout feature/{branch-name}