GoLive Resources

To effectively build a customer's Marfeel Progressive WebApp (PWA), Marfeel engineers require various resources.

The following details the numerous resources a Marfeel engineer might use during the GoLive process.

Articles and environments links

To generate a tenant or tenant article or view changes on your local device, use the corresponding link below:

Load tenants in the production environment

Change localhost in the environment above, for one of the following corresponding environment parameters to load or invalidate tenants in the production environment:

Tenants served from bc.marfeelcache.com display: bc
Tenants served from bc.marfeelcache.com develop: hubprop

Tenants served from b.marfeelcache.com display: b
Tenants served from b.marfeelcache.com: hubblgp

Demos display: enjoy
Demos develop: hubdemp

Charles external proxy

Open Charles → Proxy → External proxy settings and enable it.
Open proxy.md in MarfeelXP/Jinks/bind/doc/proxy.md. Find the FR, UK, and US proxy settings in it.
Import the configuration for each proxy in Charles from: ProTenants/Jinks/bin/doc/proxyConfigs/proxyProfile.xml

Proxies for other countries can be found in www.proxynova.com.

Charles map a device

Open Charles → Proxy → Proxy settings
Set a manual proxy at your device's internet connection.
Define server as your local computer's IP. To get your IP run in console:
```
ipconfig getifaddr en0
```
CODE
Set the port the same as in Charles' Proxy Settings HTTP Proxy.
Run browser in your device.

Charles map local

Render a local HTML file under the defined domain.
Charles → Tools → Map Local: Location Local Directory.

Charles map remote

Map localhost to the tenants domain.
Charles → Tools → Map Remote: From To localhost.

Map native app to localhost

Map bc to localhost with /etc/hosts.
Connect your phone with a USB to your machine and follow this guide. If you open the native app, you will see your local changes on it. In addition, you'll be able to debug it from dev tools.

Content not showing but present in the code

This might be caused by the browser not identifying the device used to display the content.

Check the definition in DevTools and change the device to “ios8”.

_custom.s.scss

In this file the setting only for smartphone display settings are located.

CSS selectors

For more information using CSS selectors, see the following page: http://nthmaster.com/

DB clear in localhost

To clear the entries in the database of the current Tenant issue:

"mongo" "use mrfdevOf" "db.item.findOne({uri: /tenantName/}).count()" "db.item.remove({uri: /tenantName/})" "exit"

CODE

Fonts

To import fonts from Google Fonts, click Add to Collections and select on Use.
Use the Safari browser to display the content.

Select the Import tab and open the URL in Safari. It should resemble the following:

@font-face {
    font-family: 'Arimo';
    font-style: normal;
    font-weight: 400;
    src: local('Arimo'),url(https://fonts.gstatic.com/s/arimo/v9/GyrB9qm3gnUt6yGU4LYoC6CWcynf_cDxXwCLxiixG1c.ttf)format('truetype');
}

CODE

In _custom.scss, define a variable with that link like in the following

$font1:"local('Arimo'),url(http://fonts.gstatic.com/s/arimo/v8/GyrB9qm3gnUt6yGU4LYoC6CWcynf_cDxXwCLxiixG1c.ttf) format('truetype')";

CODE

Use Marfeel Defined Fonts:  
```
@include font("#{$font1}","#{$font2}");
```
CODE

The list of available fonts can be found in ProTenants _fonts.scss.

Garda

Files are located in ProTenants project: gardab → Deprecated version gardac → Current version

gardaX : Alice
gardaXc: ProTenants

.smartphone.txt just for smartphones.
.tablet.txt just for tablet.
.abTest.txt sets a test to load Marfeel site per percentage of visits.

CODE

Git / IntelliJ remove branches

Run the following command two times in the IntelliJ Console in any environment:

git branch -r | awk '{print $1}' | egrep -v -f /dev/fd/0 <(git branch -vv | grep origin) | awk '{print $1}' | xargs git branch -d

CODE

Git rebase - squash the commit

Push all commits in working branch.
Checkout onto master and Pull.
Checkout to working branch and Pull.
VCS → Git → Rebase.
Rebase onto heads/master.
Pick the first Commit and Squash the others. If there are any conflicts solve them, and then right-click → Git → Continue Rebasing Checkout to master branch.
Git: Rebased_Branch → Merge in the IntelliJ Terminal: git push Git: Rebased_Branch → Delete.

IntelliJ increase memory heap

Edit idea.vmoptions, in ~/opt/homebrew-cask/Caskroom/intellij-idea/version-num/IntelliJ IDEA -V/Contents/bin/idea.vmoptions; e.g.config:

-Xms128m
-Xmx4096m
-XX:MaxPermSize=3072m
-XX:ReservedCodeCacheSize=500m
-XX:+UseCompressedOops

CODE

Invalidate a tenant in localhost

localhost/TenantName/index.html?marfeelgarda=off&marfeeldev=true&invalidate=3
Invalidate a Single Article: localhost/TenantName/index/item.html?invalidate=3&uri=Uri_of_the_Article

Invalidate a tenant in production

Demo: http://hubdemp.marfeel.com/hub/marfeel/TenantName/index.html?marfeelgarda=off&invalidate=3

Tenants served from b.marfeel.com: http://alice.marfeel.com/hub/marfeel/TenantName/index.html?marfeelgarda=off&invalidate=3

Tenants served from bc.marfeel.com: http://hubprop.marfeel.com/hub/marfeel/TenantName/index.html?marfeelgarda=off&invalidate=3

Localhost statics Marfeel mount HTML test file

Place the .html file in ProTenants, Tenants, hosts, marfeel
Load it in localhost/statics/marfeel/file.html

Map local

Assign a path to localhost.
In console issue '''sudo /etc/hosts'''

: nano, vim, subl...

Sample:

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1   localhost
255.255.255.255 broadcasthost
::1             localhost 

## MRF DEV ENVIRONMENT
127.0.0.1     localhost.marfeel.com
127.0.0.1     bcdev.marfeel.com
127.0.0.1     protenants.l.marfeel.com
127.0.0.1     alice.l.marfeel.com
127.0.0.1     demos.l.marfeel.com
127.0.0.1     bc.marfeel.com

CODE

Map remote

sudo nano /etc/hosts

Sample Config:
Host Database
localhost is used to configure the loopback interface when the system is booting. Do not change this entry.

127.0.0.1 localhost 255.255.255.255 broadcasthost ::1 localhost

CODE

MRF DEV ENVIRONMENT 127.0.0.1 localhost.marfeel.com 127.0.0.1 bcdev.marfeel.com 127.0.0.1 protenants.l.marfeel.com 127.0.0.1 alice.l.marfeel.com 127.0.0.1 demos.l.marfeel.com

CODE

Add tenant's domain, write below your config:
```
127.0.0.1        <TenantDomain>
```
CODE
Write out file, then run in terminal:
```
dscacheutil -flushcache
```
CODE

Old .scss files update

Jinks fails compilation due to old deprecated files are fixed executing:

rm $MARFEELXP_HOME/Pixie/scss/core.s.scss
rm $MARFEELXP_HOME/Pixie/scss/allthemes.s.scss

CODE

Panoramix plugin

The Panoramix plugin is a Demo and GoLive builder assistant.

Import the extension in Chrome: Menu → Configuration → Extensions.
Allow developer mode, and load uncompressed extension from: ~/ProTenants/DevEx
Open it while on the site to Marfeelize.
In the left bottom corner, open the lock and close it (red background) so you can navigate without losing entered data.
In Server Configuration Tab, set the environment you are working in.
Check that the provided data such as Uri and Title are right.
Pick the colors and logo if building a Demo. The design team will establish the colors and logo for a GoLive.
Select Sections. Pick the sections to add to Marfeel, by simply clicking on the link to the section.
Navigate to an article and from Boiler tab, Run Boiler. Add missing article content to the whitelist, and apply the items to remove from the highlighted area to the blacklist.
It is also possible to sniff metrics. Close all the other devTools panels and run it. Use it just as reference and ensure metrics are present with Charles.a

PhantomJS

It is very important to run this command from the tenant folder or change the main.js path. Count number of articles extracted:

phantomjs --load-images=no --disk-cache=yes --max-disk-cache-size=1048576 ~/Gutenberg/MarfeelHub/target/webapp/WEB-INF/classes/whiteCollar.js index/src/whiteCollar/main.js http://TenantName/

CODE

Full default options:

phantomjs --load-images=no --ssl-protocol=any --disk-cache=no --ignore-ssl-errors=false --max-disk-cache-size=1048576 ~/Gutenberg/MarfeelHub/target/webapp/WEB-INF/classes/whiteCollar.js index/src/whiteCollar/main.js  http://TenantName/ allowJavascriptLoad=false alibabaWaitPageOpen=false allowExternalJavascriptLoad=false testEnvironment=true

CODE

Debug in browser:

phantomjs --load-images=no --remote-debugger-port=9001 --remote-debugger-autorun=yes --ssl-protocol=any --disk-cache=no --ignore-ssl-errors=false --max-disk-cache-size=1048576 ~/Gutenberg/MarfeelHub/target/webapp/WEB-INF/classes/whiteCollar.js index/src/whiteCollar/main.js  http://TenantName/ allowJavascriptLoad=false alibabaWaitPageOpen=false allowExternalJavascriptLoad=false testEnvironment=true

CODE

Go to localhost:9001 and remember to adapt the local path.

Report a bug and create a task

Send an email to triage.
Include the next person to get the task in CC.
In the subject line include "#i1". #i1 refers to JIRA's priority columns.

Right aligned languages, Arabic and Hebrew

In custom.scss:

@include arabicTheme();

CODE

Static IMG resources

Save images in TenantName/index/resources.

Check it loads in localhost:

<img data-src="http://localhost.marfeel.com/statics/TenantName/index/resources/IMG.ext">

CODE

Change link to production environment (alice(b.) or ProTenants(bc.)):

<img data-src="http://bc.marfeelcache.com/statics/TenantName/index/resources/IMG.ext">

CODE

Tables display CSS

table, tbody, tr {  display: inline;  position: static;}
 td {  display: block;  position: relative;  padding-bottom: 10px;}

CODE

In the tenant’s folder include the theme's folder with its themeDescriptor.json, from Marfeel.
Inside the themeName folder, place detailsLayout folder with detailsBody.s.jsp (File for Smartphone) and paged/cover/item_body.jsp (File for Tablets).

Widget Opinion

Definition.json:

"userInterface":{
    "features":{
      "widgets":"opinion"
    }

CODE

WhiteCollar's main.js: Set item.pocket.widget = "opinion"

item = {
    pocket: { widget: 'opinion' }
}

CODE

themeDescriptor.json: Add layouts for all the sections or for the specific section with widget such as:

"l":["layouts/newspaper/cover_2_widget_sky300.jsp"],
"m":["layouts/newspaper/cover_1_square_widget.jsp"],
"s":["layouts/newspaper/cover_widget.jsp"]

CODE

If Articles are in Column 2 or further might not be displayed in the widget area, then add:

"name" : "mediaTheme",
"itemSortCriteria": "noSoft",
"tenantName" : "TenantName",

CODE

Articles and environments links

Load tenant

Load single article

Invalidate a tenant

Invalidate a single article

Load tenants in the production environment

Charles external proxy

Charles map a device

Charles map local

Charles map remote

Map native app to localhost

Content not showing but present in the code

_custom.s.scss

CSS selectors

DB clear in localhost

Fonts

Garda

Git / IntelliJ remove branches

Git rebase - squash the commit

IntelliJ increase memory heap

Invalidate a tenant in localhost

Invalidate a tenant in production

Localhost statics Marfeel mount HTML test file

Map local

Map remote

Old .scss files update

Panoramix plugin

PhantomJS

Report a bug and create a task

Right aligned languages, Arabic and Hebrew

Static IMG resources

Tables display CSS

Widget

Widget Opinion