diff --git a/samples/subapp2-store/src/04.footer/app-footer.tsx b/samples/subapp2-store/src/04.footer/app-footer.tsx
deleted file mode 100644
index fc29ba879..000000000
--- a/samples/subapp2-store/src/04.footer/app-footer.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { React, ReactSubApp, AppContext, xarcV2 } from "@xarc/react";
-import PropTypes from "prop-types";
-import { connect, reduxFeature } from "@xarc/react-redux";
-import classNames from "classnames";
-import custom from "../components/bootstrap.css";
-const Footer = (props: { title: any; }) => {
-  return (
-    <footer className={classNames(custom["container-fluid"], custom["text-center"])} style={{ backgroundColor: '#f2f2f2' }}>
-      <p>{props.title}</p>
-      <form className={custom["form-inline"]}>
-        Get deals:
-        <input type="email" className={custom["form-control"]} size="50" placeholder="Email Address" />
-        <button type="button" className={classNames(custom.btn, custom["btn-danger"])}>
-          Sign Up
-        </button>
-      </form>
-    </footer>
-  );
-};
-
-Footer.propTypes = {
-  title: PropTypes.string
-};
-
-const Component = connect((state: any) => state, (dispatch: any) => ({ dispatch }))(Footer);
-
-export const subapp: ReactSubApp = {
-  Component: Footer
-};
-
diff --git a/samples/subapp2-store/src/05.extras/app-extras.tsx b/samples/subapp2-store/src/05.extras/app-extras.tsx
deleted file mode 100644
index e7862665e..000000000
--- a/samples/subapp2-store/src/05.extras/app-extras.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { React, ReactSubApp, xarcV2, AppContext } from "@xarc/react";
-import { connect, reduxFeature } from "@xarc/react-redux";
-import PropTypes from "prop-types";
-import classNames from "classnames"
-import custom from "../components/bootstrap.css";
-
-const Extras = props => {
-  const { message } = props
-  return (
-    <div>
-      {message && <div className={classNames(custom["container-fluid"], custom["text-center"])}>
-        <p>Extras Extras Extras</p>
-        <div>{message}</div>
-      </div>}
-    </div>
-  );
-};
-
-Extras.propTypes = {
-  message: PropTypes.string
-};
-
-const Component = connect(
-  state => state,
-  dispatch => ({ dispatch })
-)(Extras);
-
-const getReduxState = (param) => {
-  return new Promise(resolve => {
-    setTimeout(() => {
-      resolve({
-        initialState: {
-          message: `what other buyers are looking at ${param}`
-        }
-      });
-    }, 1000);
-  });
-}
-
-
-export const subapp: ReactSubApp = {
-  Component: Component,
-  wantFeatures: [
-    reduxFeature({
-      React,
-      shareStore: true,
-      reducers: true,
-      prepare: async initialState => {
-        console.log("Extras (extrax.tsx) subapp redux prepare, initialState:", initialState);
-        await getReduxState(0);
-        return await getReduxState(1);
-      }
-    })
-  ]
-};
-
-
diff --git a/samples/subapp2-store/src/app.tsx b/samples/subapp2-store/src/app.tsx
index 25f77a2da..5f1720084 100644
--- a/samples/subapp2-store/src/app.tsx
+++ b/samples/subapp2-store/src/app.tsx
@@ -1,34 +1,28 @@
 import { declareSubApp, xarcV2 } from "@xarc/react";
 
-
 export const header = declareSubApp({
   name: "header",
-  getModule: () => import("./header/app-header")
+  getModule: () => import("./subapps/header")
 });
 
-export const home = declareSubApp({
-  name: "home",
-  getModule: () => import("./home")
+export const main = declareSubApp({
+  name: "main",
+  getModule: () => import("./subapps/main-body")
 });
 
 export const bottom = declareSubApp({
   name: "bottom",
-  getModule: () => import("./subapps/03.bottom/bottom")
-})
+  getModule: () => import("./subapps/bottom")
+});
 
 export const extras = declareSubApp({
   name: "extras",
-  getModule: () => import("./05.extras/app-extras")
-})
+  getModule: () => import("./subapps/extras")
+});
 
 export const footer = declareSubApp({
   name: "footer",
-  getModule: () => import("./04.footer/app-footer")
-})
-
-export const staticHome = declareSubApp({
-  name: "static",
-  getModule: () => import("./static")
+  getModule: () => import("./subapps/footer")
 });
 
 xarcV2.debug("app.tsx");
diff --git a/samples/subapp2-store/src/components/large.tsx b/samples/subapp2-store/src/components/large.tsx
index d5373ba98..a39b04321 100644
--- a/samples/subapp2-store/src/components/large.tsx
+++ b/samples/subapp2-store/src/components/large.tsx
@@ -39,4 +39,4 @@ Large.propTypes = {
   imagesData: PropTypes.array.isRequired
 };
 
-export default Large;
+export { Large };
diff --git a/samples/subapp2-store/src/components/navigation.tsx b/samples/subapp2-store/src/components/navigation.tsx
index 962ed73f8..79d5add7d 100644
--- a/samples/subapp2-store/src/components/navigation.tsx
+++ b/samples/subapp2-store/src/components/navigation.tsx
@@ -2,7 +2,8 @@ import { React, ReactSubApp, AppContext } from "@xarc/react";
 import { Route, Link } from "react-router-dom";
 import { withRouter } from "react-router";
 import classNames from "classnames";
-import custom from "./bootstrap.css"
+import custom from "../styles/bootstrap.css";
+
 const NavItem = props => {
   const { to, exact, strict, children } = props;
   return (
@@ -41,33 +42,33 @@ const Navigation = () => {
           </button>
           <a className={custom["navbar-brand"]} href="#">
             Logo
-            </a>
+          </a>
         </div>
         <div className={classNames(custom.collapse, custom["navbar-collapse"])} id="myNavbar">
           <ul className={classNames(custom.nav, custom["navbar-nav"])}>
             <NavItem exact={true} to="/">
               Home
-              </NavItem>
+            </NavItem>
             <NavItem to="/products">Products</NavItem>
             <NavItem to="/stores">Stores</NavItem>
             <NavItem to="/contact">Contact</NavItem>
           </ul>
           <ul className={classNames(custom.nav, custom["navbar-nav"], custom["navbar-right"])}>
             <NavItem to="/account">
-              <span className={classNames(custom.glyphicon, custom["glyphicon-user"])} /> Your Account
-              </NavItem>
+              <span className={classNames(custom.glyphicon, custom["glyphicon-user"])} /> Your
+              Account
+            </NavItem>
             <NavItem to="/cart">
-              <span className={classNames(custom.glyphicon, custom["glyphicon-shopping-cart"])} /> Cart
-              </NavItem>
+              <span className={classNames(custom.glyphicon, custom["glyphicon-shopping-cart"])} />{" "}
+              Cart
+            </NavItem>
           </ul>
         </div>
       </div>
     </nav>
-
-
   );
 };
 
 //const RouterNavigation = withRouter(Navigation);
 
-export default Navigation;
+export { Navigation };
diff --git a/samples/subapp2-store/src/components/products.tsx b/samples/subapp2-store/src/components/products.tsx
index 7ba0a0e61..09a60fb66 100644
--- a/samples/subapp2-store/src/components/products.tsx
+++ b/samples/subapp2-store/src/components/products.tsx
@@ -1,7 +1,7 @@
 import { React, ReactSubApp, AppContext } from "@xarc/react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import custom from "./bootstrap.css"
+import custom from "../styles/bootstrap.css";
 
 const DealItem = props => {
   const { item } = props;
@@ -53,7 +53,6 @@ const Products = props => {
   }
 
   return (
-
     <div className={custom.container}>
       <p>Products</p>
       <div>
@@ -63,8 +62,6 @@ const Products = props => {
       </div>
       {rows}
     </div>
-
-
   );
 };
 
@@ -77,14 +74,6 @@ const mapStateToProps = state => {
   return { items: state.items, value: state.number.value };
 };
 
-const ReduxProducts = connect(
-  mapStateToProps,
-  dispatch => ({ dispatch })
-)(Products);
-
-export { ReduxProducts as Component };
-export const subapp: ReactSubApp = {
-  Component: ReduxProducts
-};
-
+const ReduxProducts = connect(mapStateToProps, dispatch => ({ dispatch }))(Products);
 
+export { ReduxProducts as Products };
diff --git a/samples/subapp2-store/src/demo1.tsx b/samples/subapp2-store/src/demo1.tsx
deleted file mode 100644
index ec3afed08..000000000
--- a/samples/subapp2-store/src/demo1.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { React, ReactSubApp, AppContext } from "@xarc/react";
-import { message } from "./message";
-
-const Demo1 = props => {
-  return (
-    <AppContext.Consumer>
-      {({ isSsr, ssr }) => {
-        return (
-          <div style={{ padding: "5px", border: "solid", marginLeft: "15%", marginRight: "15%" }}>
-            <p>abc subapp demo1: {message}</p>
-            <p>props: {JSON.stringify(props)}</p>
-            <h4>
-              isSSR: {"" + isSsr} | Has request: {ssr.request ? "yes" : "no"}
-            </h4>
-            <p>
-              <a href="https://www.electrode.io/electrode/">Electrode Docs</a>
-            </p>
-          </div>
-        );
-      }}
-    </AppContext.Consumer>
-  );
-};
-
-export { Demo1 as Component };
-
-export const subapp: ReactSubApp = {
-  Component: Demo1
-};
diff --git a/samples/subapp2-store/src/demo2.tsx b/samples/subapp2-store/src/demo2.tsx
deleted file mode 100644
index 2bab90ea1..000000000
--- a/samples/subapp2-store/src/demo2.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { React, ReactSubApp } from "@xarc/react";
-import { connect } from "@xarc/react-redux";
-
-const incNumber = () => {
-  return {
-    type: "INC_NUMBER"
-  };
-};
-
-const decNumber = () => {
-  return {
-    type: "DEC_NUMBER"
-  };
-};
-const Demo2 = props => {
-
-  const { dispatch } = props;
-  return (
-    <div style={{ padding: "5px", border: "solid", marginLeft: "15%", marginRight: "15%" }}>
-      <p>abc subapp demo2</p>
-      props: {JSON.stringify(props)}
-      <p>
-        <a href="https://www.electrode.io/electrode/">Electrode Docs</a>
-      </p>
-      <p>
-        Redux State Demo: <button onClick={() => dispatch(decNumber())}>&#8810;</button>
-        <input style={{ textAlign: "center" }} readOnly size="6" value={props.value} />
-        <button onClick={() => dispatch(incNumber())}>&#8811;</button>
-      </p>
-    </div>
-  );
-};
-
-const mapStateToProps = state => {
-  return { value: state.number.value };
-};
-
-const ReduxDemo2 = connect(mapStateToProps, dispatch => ({ dispatch }))(Demo2);
-
-export { ReduxDemo2 as Component };
-
-
-export const subapp: ReactSubApp = {
-  Component: ReduxDemo2
-};
diff --git a/samples/subapp2-store/src/message.ts b/samples/subapp2-store/src/message.ts
deleted file mode 100644
index 6a23b3e41..000000000
--- a/samples/subapp2-store/src/message.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const message = "test 123 module";
diff --git a/samples/subapp2-store/src/server/index.tsx b/samples/subapp2-store/src/server/index.tsx
index 893697487..45b73fa4d 100644
--- a/samples/subapp2-store/src/server/index.tsx
+++ b/samples/subapp2-store/src/server/index.tsx
@@ -2,23 +2,9 @@ import { config } from "./config";
 import * as support from "@xarc/app/support";
 const electrodeServer = require("@xarc/fastify-server");
 
-//
-// for manually rendering
-//
-import { Provider } from "@xarc/react-redux";
-import { combineReducers, createStore } from "@xarc/react-redux";
+import { PageRenderer, createTemplateTags as cTT, PageOptions } from "@xarc/react";
 
-import {
-  React,
-  subAppReady,
-  createDynamicComponent,
-  PageRenderer,
-  createTemplateTags as cTT,
-  PageOptions
-} from "@xarc/react";
-
-import { header, home, bottom, footer, staticHome, extras } from "../app";
-import { renderToString } from "react-dom/server";
+import { header, main, bottom, footer, extras } from "../app";
 
 const MEMOIZE_STORE = {};
 
@@ -29,8 +15,6 @@ function memoize(key: any, factory: () => any) {
   return MEMOIZE_STORE[key];
 }
 
-const Home = createDynamicComponent(home, { ssr: true });
-
 async function start() {
   await support.load({
     awaitReady: false,
@@ -41,60 +25,6 @@ async function start() {
 
   const server = await electrodeServer(config);
 
-  let Demo1;
-  let reducer;
-
-  /**
-   * Demo manually setup redux store etc and calling renderToString to render.
-   *
-   * This is just a simple manual setup to render the subapps with redux on the
-   * server.  All the setup require to make a fully functioning app on the browser
-   * are missing.
-   *
-   * For that, see the full demo route using PageRenderer below.
-   */
-  server.route({
-    method: "GET",
-    path: "/plain",
-    async handler(req, reply) {
-      if (!Demo1) {
-        const { demo1, reduxReducers } = require("../home"); // eslint-disable-line
-
-        reducer = combineReducers(reduxReducers);
-        Demo1 = createDynamicComponent(demo1, { ssr: true });
-        await subAppReady();
-      }
-
-      const store = createStore(reducer, { number: { value: 99 } });
-      const s = renderToString(
-        <Provider store={store}>
-          <Home />
-          <Demo1 />
-        </Provider>
-      );
-
-      reply.type("text/html").send(`<doctype html><html>
-<head>
-<meta charset="UTF-8">
-</head>
-<body>
-${s}
-</body></html>
-`);
-    }
-  });
-
-  /*
-   * Below are routes to demo using Electrode X's PageRenderer to render pages with
-   * ES6 tag string templates for the HTML, with full subapp features including:
-   *
-   * - redux
-   * - static props
-   * - react router
-   * - mixing multiple subapps on a page
-   * - SSR and Hot Module Reloading
-   */
-
   const commonRenderOptions: Partial<PageOptions> = {
     prodAssetData: { cdnMap: "config/assets.json" },
     devAssetData: { pathMap: { base: "", ".css": "/js", ".js": "/js" } }
@@ -107,10 +37,16 @@ ${s}
       // URL path
       // path: "/tag-template",
       pageTitle: "subapp2-store-demo",
-      subApps: [{ name: header.name, ssr: true }, { name: home.name, ssr: true }, { name: extras.name, ssr: true }, { name: bottom.name, ssr: true }, { name: footer.name, ssr: true }],
+      subApps: [
+        { name: header.name, ssr: true },
+        { name: main.name, ssr: true },
+        { name: bottom.name, ssr: true },
+        { name: extras.name, ssr: true },
+        { name: footer.name, ssr: true }
+      ],
       templateInserts: {
         head: {
-          begin: cTT`<link nounce
+          begin: cTT`<link nonce
           rel="stylesheet"
           href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
         />`
@@ -134,129 +70,25 @@ ${s}
     reply.send(context.result);
   };
 
-  server.route({
-    method: "GET",
-    path: "/",
-    async handler(request, reply) {
-      try {
-        const pageRenderer = memoize("route:/", constructHomeRouteRenderer);
-        const context = await pageRenderer.render({ request });
-        sendResponse(reply, context);
-      } catch (error) {
-        reply.send(error.stack);
-      }
+  const handler = async (request, reply) => {
+    try {
+      const pageRenderer = memoize("route:/all", constructHomeRouteRenderer);
+      const context = await pageRenderer.render({ request });
+      sendResponse(reply, context);
+    } catch (error) {
+      reply.send(error.stack);
     }
-  });
-
-  server.route({
-    method: "GET",
-    path: "/home",
-    async handler(request, reply) {
-      try {
-        const pageRenderer = memoize("route:/", constructHomeRouteRenderer);
-        const context = await pageRenderer.render({ request });
-        sendResponse(reply, context);
-      } catch (error) {
-        reply.send(error.stack);
-      }
-    }
-  });
-
-  server.route({
-    method: "GET",
-    path: "/products",
-    async handler(request, reply) {
-      try {
-        const pageRenderer = memoize("route:/", constructHomeRouteRenderer);
-        const context = await pageRenderer.render({ request });
-        sendResponse(reply, context);
-      } catch (error) {
-        reply.send(error.stack);
-      }
-    }
-  });
-
-  server.route({
-    method: "GET",
-    path: "/stores",
-    async handler(request, reply) {
-      try {
-        const pageRenderer = memoize("route:/", constructHomeRouteRenderer);
-        const context = await pageRenderer.render({ request });
-        sendResponse(reply, context);
-      } catch (error) {
-        reply.send(error.stack);
-      }
-    }
-  });
-
-  server.route({
-    method: "GET",
-    path: "/contact",
-    async handler(request, reply) {
-      try {
-        const pageRenderer = memoize("route:/", constructHomeRouteRenderer);
-        const context = await pageRenderer.render({ request });
-        sendResponse(reply, context);
-      } catch (error) {
-        reply.send(error.stack);
-      }
-    }
-  });
-
-  server.route({
-    method: "GET",
-    path: "/static",
-    async handler(request, reply) {
-      try {
-        const pageRenderer = memoize("route:/static", () => {
-          return new PageRenderer({
-            pageTitle: "static props demo",
-            subApps: [{ name: staticHome.name, ssr: true }],
-            ...commonRenderOptions
-          });
-        });
-        const context = await pageRenderer.render({
-          request
-          // enable streams
-          // useStream: true,
-          // URL path
-          // path: "/tag-template",
-          // URL query
-          // query: {},
-          // URL params
-          // params: {},
-        });
-
-        sendResponse(reply, context);
-      } catch (error) {
-        reply.send(error.stack);
-      }
-    }
-  });
+  };
 
-  server.route({
-    method: "GET",
-    path: "/mix",
-    async handler(request, reply) {
-      try {
-        const pageRenderer = memoize("route:/mix", () => {
-          return new PageRenderer({
-            pageTitle: "mix subapp and state providers demo",
-            subApps: [
-              { name: staticHome.name, ssr: true },
-              { name: home.name, ssr: true }
-            ],
-            ...commonRenderOptions
-          });
-        });
-        const context = await pageRenderer.render({ request });
-        sendResponse(reply, context);
-      } catch (error) {
-        reply.send(error.stack);
-      }
+  ["/", "/home", "/products", "/deals", "/stores", "/contact", "/account", "/cart"].forEach(
+    path => {
+      server.route({
+        method: "GET",
+        path,
+        handler
+      });
     }
-  });
+  );
 
   await server.start();
 }
diff --git a/samples/subapp2-store/src/static-props.ts b/samples/subapp2-store/src/static-props.ts
deleted file mode 100644
index 49cf99d2d..000000000
--- a/samples/subapp2-store/src/static-props.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-const maxDelay = 50;
-
-export const getStaticProps = async () => {
-  const delay = Math.floor(Math.random() * maxDelay);
-  return new Promise(resolve => {
-    setTimeout(resolve, delay);
-  }).then(() => {
-    return {
-      props: { message: "hello world! this is static props", delay }
-    };
-  });
-};
diff --git a/samples/subapp2-store/src/static.tsx b/samples/subapp2-store/src/static.tsx
deleted file mode 100644
index 69547838c..000000000
--- a/samples/subapp2-store/src/static.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-// demo subapp with static props
-import { React, staticPropsFeature, createDynamicComponent, ReactSubApp } from "@xarc/react";
-import { xarcV2 } from "@xarc/react";
-import { demo1 } from "./home";
-import custom from "./styles/custom.module.css"; // eslint-disable-line no-unused-vars
-
-const Demo1 = createDynamicComponent(demo1, { ssr: true });
-
-xarcV2.debug("static.tsx");
-const StaticHome = props => {
-  // TODO: Problem with typescript only.  Need this dummy var assign to reference custom
-  // import else something drops it.
-  const y = custom; // eslint-disable-line
-
-  return (
-    <div styleName="custom.container">
-      <h1>Static Props Demo</h1>
-      props: {JSON.stringify(props)}
-      <h1>Demo1 in static home</h1>
-      <Demo1 />
-    </div>
-  );
-};
-
-export const subapp: ReactSubApp = {
-  Component: StaticHome,
-  wantFeatures: [
-    staticPropsFeature({
-      serverModule: require.resolve("./static-props")
-    })
-  ]
-};
diff --git a/samples/subapp2-store/src/components/bootstrap.css b/samples/subapp2-store/src/styles/bootstrap.css
similarity index 100%
rename from samples/subapp2-store/src/components/bootstrap.css
rename to samples/subapp2-store/src/styles/bootstrap.css
diff --git a/samples/subapp2-store/src/styles/custom-sugarss.styl b/samples/subapp2-store/src/styles/custom-sugarss.styl
index 99b47fb0b..615d99359 100644
--- a/samples/subapp2-store/src/styles/custom-sugarss.styl
+++ b/samples/subapp2-store/src/styles/custom-sugarss.styl
@@ -1,19 +1,19 @@
 
-.header 
-  text-transform: uppercase 
+.header
+  text-transform: uppercase
   font-size: 3.0rem
-  letter-spacing: 0.2rem 
-  font-weight: 600 
+  letter-spacing: 0.2rem
+  font-weight: 600
   color: blue
-  
-.section 
-  border-top: 1px 
-  solid #eee 
+
+.section
+  border-top: 1px
+  solid #eee
   padding: 4rem 4rem 4rem 4rem
-  margin-bottom: 0 
+  margin-bottom: 0
 
 .section >
-.main 
+.main
   width: 30%
   margin: 22px
   float: center
@@ -31,7 +31,7 @@
   text-align: center
   font-size: 24px
 
-.button-one 
+.button-one
   padding: 20px 60px
   outline: none
   background-color: #27ae60
@@ -40,15 +40,15 @@
   box-shadow: 0 9px #95a5a6
   margin: 10px
 
-.button-one:hover 
+.button-one:hover
   background-color: #2ecc71
 
-.button-one:active 
+.button-one:active
   background-color: #2ecc71
   box-shadow: 0 5px #95a5a6
   transform: translateY(4px)
 
-.button-two 
+.button-two
   border-radius: 4px
   background-color: #d35400
   border: none
@@ -56,13 +56,13 @@
   transition: all 0.5s
   margin: 10px
 
-.button-two span 
+.button-two span
   cursor: pointer
   display: inline-block
   position: relative
   transition: 0.5s
 
-.button-two span:after 
+.button-two span:after
   content: "»"
   position: absolute
   opacity: 0
@@ -70,31 +70,31 @@
   right: -20px
   transition: 0.5s
 
-.button-two:hover span 
+.button-two:hover span
   padding-right: 25px
 
-.button-two:hover span:after 
+.button-two:hover span:after
   opacity: 1
   right: 0
 
-.button-three 
+.button-three
   position: relative
   background-color: #f39c12
   border: none
   padding: 20px
- 
-  -webkit-transition-duration: 0.4s 
+
+  -webkit-transition-duration: 0.4s
   transition-duration: 0.4s
   text-decoration: none
   overflow: hidden
 
-.button-three:hover 
+.button-three:hover
   background: #fff
   box-shadow: 0px 2px 10px 5px #97b1bf
   color: #000
 
 
-.button-three:after 
+.button-three:after
   content: ""
   background: #f1c40f
   display: block
@@ -107,11 +107,8 @@
   transition: all 0.8s
 
 
-.button-three:active:after 
+.button-three:active:after
   padding: 0
   margin: 0
   opacity: 1
   transition: 0s
-
-
-
diff --git a/samples/subapp2-store/src/styles/raleway.css b/samples/subapp2-store/src/styles/raleway.css
index 630b751e1..ead72d308 100644
--- a/samples/subapp2-store/src/styles/raleway.css
+++ b/samples/subapp2-store/src/styles/raleway.css
@@ -1,96 +1,63 @@
 /* latin-ext */
 @font-face {
-  font-family: 'Raleway';
+  font-family: "Raleway";
   font-style: normal;
   font-weight: 300;
-  src: local('Raleway Light'),
-    local('Raleway-Light'),
+  src: local("Raleway Light"), local("Raleway-Light"),
     url(http://fonts.gstatic.com/s/raleway/v11/ZKwULyCG95tk6mOqHQfRBAsYbbCjybiHxArTLjt7FRU.woff2)
-      format('woff2');
+      format("woff2");
   unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-  font-family: 'Raleway';
+  font-family: "Raleway";
   font-style: normal;
   font-weight: 300;
-  src: local('Raleway Light'),
-    local('Raleway-Light'),
+  src: local("Raleway Light"), local("Raleway-Light"),
     url(http://fonts.gstatic.com/s/raleway/v11/-_Ctzj9b56b8RgXW8FAriQzyDMXhdD8sAj6OAJTFsBI.woff2)
-      format('woff2');
-  unicode-range: U+0000-00FF,
-    U+0131,
-    U+0152-0153,
-    U+02C6,
-    U+02DA,
-    U+02DC,
-    U+2000-206F,
-    U+2074,
-    U+20AC,
-    U+2212,
-    U+2215;
+      format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
+    U+20AC, U+2212, U+2215;
 }
 /* latin-ext */
 @font-face {
-  font-family: 'Raleway';
+  font-family: "Raleway";
   font-style: normal;
   font-weight: 400;
-  src: local('Raleway'),
-    local('Raleway-Regular'),
+  src: local("Raleway"), local("Raleway-Regular"),
     url(http://fonts.gstatic.com/s/raleway/v11/YZaO6llzOP57DpTBv2GnyFKPGs1ZzpMvnHX-7fPOuAc.woff2)
-      format('woff2');
+      format("woff2");
   unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-  font-family: 'Raleway';
+  font-family: "Raleway";
   font-style: normal;
   font-weight: 400;
-  src: local('Raleway'),
-    local('Raleway-Regular'),
+  src: local("Raleway"), local("Raleway-Regular"),
     url(http://fonts.gstatic.com/s/raleway/v11/QAUlVt1jXOgQavlW5wEfxQLUuEpTyoUstqEm5AMlJo4.woff2)
-      format('woff2');
-  unicode-range: U+0000-00FF,
-    U+0131,
-    U+0152-0153,
-    U+02C6,
-    U+02DA,
-    U+02DC,
-    U+2000-206F,
-    U+2074,
-    U+20AC,
-    U+2212,
-    U+2215;
+      format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
+    U+20AC, U+2212, U+2215;
 }
 /* latin-ext */
 @font-face {
-  font-family: 'Raleway';
+  font-family: "Raleway";
   font-style: normal;
   font-weight: 600;
-  src: local('Raleway SemiBold'),
-    local('Raleway-SemiBold'),
+  src: local("Raleway SemiBold"), local("Raleway-SemiBold"),
     url(http://fonts.gstatic.com/s/raleway/v11/STBOO2waD2LpX45SXYjQBQsYbbCjybiHxArTLjt7FRU.woff2)
-      format('woff2');
+      format("woff2");
   unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-  font-family: 'Raleway';
+  font-family: "Raleway";
   font-style: normal;
   font-weight: 600;
-  src: local('Raleway SemiBold'),
-    local('Raleway-SemiBold'),
+  src: local("Raleway SemiBold"), local("Raleway-SemiBold"),
     url(http://fonts.gstatic.com/s/raleway/v11/xkvoNo9fC8O2RDydKj12bwzyDMXhdD8sAj6OAJTFsBI.woff2)
-      format('woff2');
-  unicode-range: U+0000-00FF,
-    U+0131,
-    U+0152-0153,
-    U+02C6,
-    U+02DA,
-    U+02DC,
-    U+2000-206F,
-    U+2074,
-    U+20AC,
-    U+2212,
-    U+2215;
+      format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
+    U+20AC, U+2212, U+2215;
 }
diff --git a/samples/subapp2-store/src/subapps/03.bottom/bottom.tsx b/samples/subapp2-store/src/subapps/bottom.tsx
similarity index 80%
rename from samples/subapp2-store/src/subapps/03.bottom/bottom.tsx
rename to samples/subapp2-store/src/subapps/bottom.tsx
index 4c91ce876..5d3f1a46e 100644
--- a/samples/subapp2-store/src/subapps/03.bottom/bottom.tsx
+++ b/samples/subapp2-store/src/subapps/bottom.tsx
@@ -1,12 +1,14 @@
 import { React, ReactSubApp, xarcV2, AppContext } from "@xarc/react";
 import { connect, reduxFeature } from "@xarc/react-redux";
-import { reactRouterFeature, Route, Switch } from "@xarc/react-router";
+import { reactRouterFeature, Route, Switch, ReactRouter } from "@xarc/react-router";
 import PropTypes from "prop-types";
-import Large from "../../components/large";
+import { Large } from "../components/large";
 import classNames from "classnames";
-import custom from "../../components/bootstrap.css"
+import custom from "../styles/bootstrap.css";
 // import AdvGridList from "../components/adv-grid";
 
+const { withRouter } = ReactRouter;
+
 const MoreProducts = props => {
   return (
     <div className={custom.container}>
@@ -47,27 +49,22 @@ const MoreDeals = () => {
 
 const Bottom = props => {
   return (
-    <AppContext.Consumer>
-      {({ isSsr, ssr }) => {
-        return (
-          <Switch>
-            <Route path="/products" component={() => <MoreProducts {...props} imagesData={[]} />} />
-            <Route path="/deals" component={MoreDeals} />
-          </Switch>
-        );
-      }}
-    </AppContext.Consumer>
+    <Switch>
+      <Route path="/products" component={() => <MoreProducts {...props} imagesData={[]} />} />
+      <Route path="/deals" component={MoreDeals} />
+    </Switch>
   );
-
 };
 
-const Component = connect(state => state, dispatch => ({ dispatch }))(Bottom);
-
-
-
+const Component = withRouter(
+  connect(
+    state => state,
+    dispatch => ({ dispatch })
+  )(Bottom)
+);
 
 export const subapp: ReactSubApp = {
-  Component: Component,
+  Component,
   wantFeatures: [
     reduxFeature({
       React,
diff --git a/samples/subapp2-store/src/deal/app-deal.tsx b/samples/subapp2-store/src/subapps/deal.tsx
similarity index 86%
rename from samples/subapp2-store/src/deal/app-deal.tsx
rename to samples/subapp2-store/src/subapps/deal.tsx
index b064e5032..32972aff5 100644
--- a/samples/subapp2-store/src/deal/app-deal.tsx
+++ b/samples/subapp2-store/src/subapps/deal.tsx
@@ -4,8 +4,6 @@ const Deal = props => {
   return <div>SPECIAL DEAL - SPECIAL DEAL - {props.deal}</div>;
 };
 
-export { Deal as Component };
-
 export const subapp: ReactSubApp = {
   Component: Deal
 };
diff --git a/samples/subapp2-store/src/subapps/extras.tsx b/samples/subapp2-store/src/subapps/extras.tsx
new file mode 100644
index 000000000..6d2265be1
--- /dev/null
+++ b/samples/subapp2-store/src/subapps/extras.tsx
@@ -0,0 +1,50 @@
+import { React, ReactSubApp, xarcV2, AppContext } from "@xarc/react";
+import { connect, reduxFeature } from "@xarc/react-redux";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import custom from "../styles/bootstrap.css";
+
+const Extras = props => {
+  const { message } = props;
+  return (
+    <div>
+      {message && (
+        <div className={classNames(custom["container-fluid"], custom["text-center"])}>
+          <p>Extras Extras Extras</p>
+          <div>{message}</div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+Extras.propTypes = {
+  message: PropTypes.string
+};
+
+const Component = connect(
+  state => state,
+  dispatch => ({ dispatch })
+)(Extras);
+
+export const subapp: ReactSubApp = {
+  Component: Component,
+  wantFeatures: [
+    reduxFeature({
+      React,
+      shareStore: true,
+      reducers: x => x,
+      prepare: () => {
+        return new Promise(resolve => {
+          setTimeout(() => {
+            resolve({
+              initialState: {
+                message: `what other buyers are looking at`
+              }
+            });
+          }, 100);
+        });
+      }
+    })
+  ]
+};
diff --git a/samples/subapp2-store/src/subapps/footer.tsx b/samples/subapp2-store/src/subapps/footer.tsx
new file mode 100644
index 000000000..17f38edba
--- /dev/null
+++ b/samples/subapp2-store/src/subapps/footer.tsx
@@ -0,0 +1,56 @@
+import { React, ReactSubApp, AppContext, xarcV2 } from "@xarc/react";
+import PropTypes from "prop-types";
+import { connect, reduxFeature } from "@xarc/react-redux";
+import classNames from "classnames";
+import custom from "../styles/bootstrap.css";
+const Footer = (props: { title: any }) => {
+  return (
+    <footer
+      className={classNames(custom["container-fluid"], custom["text-center"])}
+      style={{ backgroundColor: "#f2f2f2" }}
+    >
+      <p>{props.title}</p>
+      <form className={custom["form-inline"]}>
+        Get deals:
+        <input
+          type="email"
+          className={custom["form-control"]}
+          size="50"
+          placeholder="Email Address"
+        />
+        <button type="button" className={classNames(custom.btn, custom["btn-danger"])}>
+          Sign Up
+        </button>
+      </form>
+    </footer>
+  );
+};
+
+Footer.propTypes = {
+  title: PropTypes.string
+};
+
+const Component = connect(
+  (state: any) => state,
+  (dispatch: any) => ({ dispatch })
+)(Footer);
+
+export const subapp: ReactSubApp = {
+  Component,
+  wantFeatures: [
+    reduxFeature({
+      React,
+      shareStore: true,
+      reducers: x => x,
+      prepare: () => {
+        return new Promise(resolve => {
+          setTimeout(() => {
+            resolve({
+              initialState: { title: "Online Store Copyright" }
+            });
+          }, 50);
+        });
+      }
+    })
+  ]
+};
diff --git a/samples/subapp2-store/src/header/app-header.tsx b/samples/subapp2-store/src/subapps/header.tsx
similarity index 70%
rename from samples/subapp2-store/src/header/app-header.tsx
rename to samples/subapp2-store/src/subapps/header.tsx
index 1faf2433f..ebc40660e 100644
--- a/samples/subapp2-store/src/header/app-header.tsx
+++ b/samples/subapp2-store/src/subapps/header.tsx
@@ -1,9 +1,8 @@
 import { React, ReactSubApp, AppContext, xarcV2 } from "@xarc/react";
-import custom from "../components/bootstrap.css";
-const Header = (props) => {
-
+import custom from "../styles/bootstrap.css";
+const Header = props => {
   return (
-    <div className={custom["text-center"]} style={{ backgroundColor: 'cyan' }}>
+    <div className={custom["text-center"]} style={{ backgroundColor: "cyan" }}>
       <h1>Online Store</h1>
       <p>Mission, Vision & Values</p>
       <p>{props.value}</p>
@@ -11,11 +10,6 @@ const Header = (props) => {
   );
 };
 
-
-export { Header as Component };
-
 export const subapp: ReactSubApp = {
   Component: Header
 };
-
-
diff --git a/samples/subapp2-store/src/home.tsx b/samples/subapp2-store/src/subapps/main-body.tsx
similarity index 56%
rename from samples/subapp2-store/src/home.tsx
rename to samples/subapp2-store/src/subapps/main-body.tsx
index 3b1772f0d..87b0f5e4d 100644
--- a/samples/subapp2-store/src/home.tsx
+++ b/samples/subapp2-store/src/subapps/main-body.tsx
@@ -1,82 +1,19 @@
 import PropTypes from "prop-types";
-import { React, declareSubApp, createDynamicComponent, ReactSubApp, xarcV2, AppContext } from "@xarc/react";
+import { React, ReactSubApp, xarcV2 } from "@xarc/react";
 import { connect, reduxFeature } from "@xarc/react-redux";
 import { reactRouterFeature, Route, Switch } from "@xarc/react-router";
-import { Component as Demo2 } from "./demo2";
-import { message } from "./message";
-import electrodePng from "../static/electrode.png";
-import custom from "./styles/custom.module.css"; // eslint-disable-line no-unused-vars
-import Navigation from "./components/navigation";
-import { Component as Products } from "./components/products"
-export const demo1 = declareSubApp({
-  name: "demo1",
-  getModule: () => import("./demo1")
-});
-
-export const demo1B = declareSubApp({
-  name: "demo1b",
-  getModule: () => import("./demo1")
-});
-
-const Demo1 = createDynamicComponent(demo1, { ssr: true });
-const Demo1B = createDynamicComponent(demo1B, { ssr: true });
-
-const incNumber = () => {
-  return {
-    type: "INC_NUMBER"
-  };
-};
-
-const decNumber = () => {
-  return {
-    type: "DEC_NUMBER"
-  };
-};
-
-const Home = props => {
-  // TODO: Problem with typescript only.  Need this dummy var assign to reference custom
-  // import else something drops it.
-  const y = custom; // eslint-disable-line
-  const { dispatch } = props;
-
-  return (
-    <AppContext.Consumer>
-      {({ isSsr, ssr }) => {
-        return (
-          <div styleName="custom.container">
-            <h1 style={{ textAlign: "center" }}>
-              Hello from{" "}
-              <a href="https://www.electrode.io">
-                Electrode <img src={electrodePng} />
-              </a>
-            </h1>
-          PROPS (Different between server and client): {JSON.stringify(props)}
-            <p>
-              Redux State Demo: <button onClick={() => dispatch(decNumber())}>&#8810;</button>
-              <input style={{ textAlign: "center" }} readOnly size="6" value={props.value} />
-              <button onClick={() => dispatch(incNumber())}>&#8811;</button>
-            </p>
-            <p>message: {message}</p>
-
-
-          </div>
-        );
-
-      }}
-    </AppContext.Consumer>
-  );
+import { Navigation } from "../components/navigation";
+import { Products } from "../components/products";
 
+const MainBody = props => {
+  return <div>Home</div>;
 };
 
-Home.propTypes = {
+MainBody.propTypes = {
   value: PropTypes.number,
   dispatch: PropTypes.func
 };
 
-export const reload = msg => {
-  console.log("reload", msg, message); // eslint-disable-line
-};
-
 //
 // REDUX
 //
@@ -85,7 +22,7 @@ const mapStateToProps = state => {
   return { value: state.number.value, items: state.items };
 };
 
-const ReduxHome = connect(mapStateToProps, dispatch => ({ dispatch }))(Home);
+const ReduxHome = connect(mapStateToProps, dispatch => ({ dispatch }))(MainBody);
 
 //
 // ROUTING
@@ -93,17 +30,15 @@ const ReduxHome = connect(mapStateToProps, dispatch => ({ dispatch }))(Home);
 const Stores = () => `Stores`;
 const Contact = () => `Contact`;
 
-const HomeRouter = () => {
+const MainRouter = () => {
   return (
     <div>
       <Navigation />
       <Switch>
         <Route path="/" exact component={ReduxHome} />
-        <Route path="/home" component={ReduxHome} />
         <Route path="/products" component={Products} />
         <Route path="/stores" component={Stores} />
         <Route path="/contact" component={Contact} />
-
       </Switch>
     </div>
   );
@@ -112,12 +47,12 @@ const HomeRouter = () => {
 //const ReduxHomeRouter = connect(mapStateToProps, dispatch => ({ dispatch }))(HomeRouter);
 
 export const subapp: ReactSubApp = {
-  Component: HomeRouter,
+  Component: MainRouter,
   wantFeatures: [
     reduxFeature({
       React,
       shareStore: true,
-      reducers: true,
+      reducers: x => x,
       // provider({ Component, props }) {}
       prepare: async initialState => {
         xarcV2.debug("Home (home.tsx) subapp redux prepare, initialState:", initialState);
@@ -179,27 +114,3 @@ export const subapp: ReactSubApp = {
     // recoilFeature({})
   ]
 };
-
-//
-// REDUX reducer
-//
-
-export const reduxReducers = {
-  number: (store, action) => {
-    if (action.type === "INC_NUMBER") {
-      return {
-        value: store.value + 1
-      };
-    } else if (action.type === "DEC_NUMBER") {
-      return {
-        value: store.value - 1
-      };
-    }
-
-    return store || { value: 999 };
-  },
-  items: (s) => {
-    console.log(`redux reducer called here in home.tsx`)
-    return s || { items: [] };
-  }
-};
diff --git a/samples/subapp2-store/src/06.suspense-demo/suspense-demo.tsx b/samples/subapp2-store/src/subapps/suspense-demo.tsx
similarity index 97%
rename from samples/subapp2-store/src/06.suspense-demo/suspense-demo.tsx
rename to samples/subapp2-store/src/subapps/suspense-demo.tsx
index f41c0010f..c8bb69b96 100644
--- a/samples/subapp2-store/src/06.suspense-demo/suspense-demo.tsx
+++ b/samples/subapp2-store/src/subapps/suspense-demo.tsx
@@ -51,8 +51,6 @@ class SuspenseDemo extends React.Component {
   }
 }
 
-export { SuspenseDemo as Component };
-
 export const subapp: ReactSubApp = {
   Component: SuspenseDemo
 };