Skip to content

redhataccess/preset-chrome

Repository files navigation

preset-chrome

npm version

This preset is helping the people who want to integrate Red Hat Customer Portal Header/Footer in their app.

It will make your local development has an easy life

Installation

npm install -D @redhat-customer-portal/preset-chrome

Usage

Setup environment variables

~/.bashrc or ~/.zshrc

export http_proxy=http://squid.example.com:8080
export https_proxy=$http_proxy
export HTTP_PROXY=$http_proxy
export HTTPS_PROXY=$http_proxy

Setup /etc/hosts, you won't need to do this if you already are the spandx user

/etc/hosts

127.0.0.1 dev.foo.redhat.com qa.foo.redhat.com stage.foo.redhat.com prod.foo.redhat.com

index.html

<!DOCTYPE html>
<html class="no-js nimbus pf-m-redhat-font">
  <head>
    <!--#include virtual="/_include_/init.html" -->
    <!--#include virtual="/services/chrome/head/$locale?legacy=false" -->
  </head>
  <body>
    <!--#include virtual="/services/chrome/header/$locale?legacy=false" -->
    <div class="container">
      <div id="chrometwo">
        <div id="root">
          Your content
        </div>
      </div>
    </div>
    <!--#include virtual="/services/chrome/footer/$locale?legacy=false" -->
  </body>
</html>

Local Development

Create React App

src/setupProxy.js

const setupChrome = require("@redhat-customer-portal/preset-chrome");

module.exports = (app) => {
  setupChrome(app);
} 

Webpack

webpack.config.js

const setupChrome = require("@redhat-customer-portal/preset-chrome");

module.export = {
  devServer: {
    before: (app) => {
      setupChrome(app);
    },
  },
}

Express

app.js

const express = require("express");
const setupChrome = require("@redhat-customer-portal/preset-chrome");

const app = express();
setupChrome(app);
app.use(express.static("public"));

app.listen(3000, () => {
  console.log(`server is running`);
});

Enjoy

You can using following host to view your app Each of them will mapping the specific environment of Customer Portal

  • dev.foo.redhat.com
  • qa.foo.redhat.com
  • stage.foo.redhat.com
  • prod.foo.redhat.com

Server Configuration

Here is the configuration on remote server

Apache HTTPD server

Enable Server Side Includes (SSI) include.conf

<IfModule mod_include.c>
    <Directory "/var/www/html">
        AddOutputFilter INCLUDES .html
        Options +Includes
    </Directory>
</IfModule>

Setup reverse proxy for chrome path proxy.conf

SSLProxyEngine On
SSLProxyCheckPeerName off
SSLProxyCheckPeerCN off
SSLProxyCheckPeerExpire off
CacheRoot /tmp
CacheQuickHandler off
CacheIgnoreCacheControl on

<Location "/services/chrome">
    ProxyPass ${PORTAL_ORIGIN}/services/chrome
    ProxyPassReverse ${PORTAL_ORIGIN}/services/chrome
    CacheEnable disk
    CacheDefaultExpire 3600
    CacheMaxExpire 3600
    CacheHeader on
    CacheDetailHeader on
    CacheMinFileSize 1000
</Location>

Known Issues

We not have fully SSI command support The following commands are works

  • echo
  • include
  • set