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. 

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

Load tenant

http://localhost.marfeel.com/TenantName/index.html?marfeelgarda=off&marfeeldev=true

Load single article 

http://localhost/hub/marfeel/TenantName/index.html?marfeeldev=true&articleUri=UriOfTheArticle

Invalidate a tenant

http://localhost.marfeel.com/TenantName/index.html?marfeelgarda=off&marfeeldev=true&invalidate=3

Invalidate a single article

http://localhost/hub/marfeel/TenantName/index/item.html?invalidate=3&uri=UriOfTheArticle

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

  1. Open Charles → Proxy → External proxy settings and enable it. 
  2. Open proxy.md in MarfeelXP/Jinks/bind/doc/proxy.md. Find the FR, UK, and US proxy settings in it.
  3. 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

  1. Open Charles → Proxy → Proxy settings
  2. Set a manual proxy at your device's internet connection.
  3. Define server as your local computer's IP. To get your IP run in console:

    ipconfig getifaddr en0
  4. Set the port the same as in Charles' Proxy Settings HTTP Proxy. 
  5. Run browser in your device.  

Charles map local

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

Charles map remote

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

Map native app to localhost

  1. Map bc to localhost with /etc/hosts.
  2. 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"

Fonts

  1. To import fonts from Google Fonts, click Add to Collections and select on Use
  2. Use the Safari browser to display the content. 
  3. 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');
    }
  4. 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')";
  5. Use Marfeel Defined Fonts: 


    @include font("#{$font1}","#{$font2}");

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.

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

Git rebase - squash the commit

  1. Push all commits in working branch. 
  2. Checkout onto master and Pull. 
  3. Checkout to working branch and Pull. 
  4. VCS → Git → Rebase. 
  5. Rebase onto heads/master. 
  6. 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. 
  7. 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

Invalidate a tenant in localhost

  1. localhost/TenantName/index.html?marfeelgarda=off&marfeeldev=true&invalidate=3
  2. 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

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

Map local

  1. Assign a path to localhost.
  2. 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

Map remote

sudo nano /etc/hosts
  1. 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
    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
  2. Add tenant's domain, write below your config:

    127.0.0.1        <TenantDomain>
  3. Write out file, then run in terminal:

    dscacheutil -flushcache

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

Panoramix plugin

The Panoramix plugin is a Demo and GoLive builder assistant.

  1. Import the extension in Chrome: Menu → Configuration → Extensions.
  2. Allow developer mode, and load uncompressed extension from: ~/ProTenants/DevEx
  3. Open it while on the site to Marfeelize. 
  4. In the left bottom corner, open the lock and close it (red background) so you can navigate without losing entered data.
  5. In Server Configuration Tab, set the environment you are working in.
  6. Check that the provided data such as Uri and Title are right.
  7. Pick the colors and logo if building a Demo. The design team will establish the colors and logo for a GoLive.
  8. Select Sections. Pick the sections to add to Marfeel, by simply clicking on the link to the section.
  9. 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.
  10. 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

  1. 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/
  2. 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
  3. 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
  4. Go to localhost:9001 and remember to adapt the local path.

Report a bug and create a task

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

Right aligned languages, Arabic and Hebrew

In custom.scss:

@include arabicTheme();

 

Static IMG resources

  1. Save images in TenantName/index/resources. 
  2. Check it loads in localhost:

    <img data-src="http://localhost.marfeel.com/statics/TenantName/index/resources/IMG.ext">
  3.  Change link to production environment (alice(b.) or ProTenants(bc.)):

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

Tables display CSS

table, tbody, tr {  display: inline;  position: static;}

td {  display: block;  position: relative;  padding-bottom: 10px;}

Widget

  1. In the tenant’s folder include the theme's folder with its themeDescriptor.json, from Marfeel. 
  2. 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"
    }

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

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

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

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

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