diff --git a/packages/xarc-create-app/package.json b/packages/xarc-create-app/package.json
index 3ffe7c3fb..f17c5dc57 100644
--- a/packages/xarc-create-app/package.json
+++ b/packages/xarc-create-app/package.json
@@ -54,7 +54,7 @@
     "prettier": "^2.2.1",
     "prompts": "^2.3.2",
     "run-verify": "^1.2.5",
-    "shcmd": "^0.7.9",
+    "shcmd": "^0.8.4",
     "sinon": "^7.2.6",
     "sinon-chai": "^3.3.0",
     "webpack": "^4.41.0",
diff --git a/packages/xarc-create-app/template/_package.js b/packages/xarc-create-app/template/_package.js
index 1069ec554..ec9f2eb87 100644
--- a/packages/xarc-create-app/template/_package.js
+++ b/packages/xarc-create-app/template/_package.js
@@ -31,6 +31,9 @@ module.exports = (base, merge) => {
       node: ">= 12",
       npm: ">= 6",
     },
+    prettier: {
+      printWidth: 100,
+    },
     dependencies: {
       "@babel/runtime": "^7.12.5",
       "@xarc/app": "^9.0.3", // version will come from ../package.json
@@ -44,6 +47,7 @@ module.exports = (base, merge) => {
       "@xarc/app-dev": "^9.0.3", // version will come from ../package.json
       "@xarc/opt-postcss": "^1.0.0",
       "@xarc/opt-stylus": "^1.0.0",
+      prettier: "^2.2.1",
       "ts-node": "^9.1.1",
       typescript: "^4.1.3",
     },
diff --git a/samples/create-app-demo/babel.config.js b/samples/create-app-demo/babel.config.js
index dfaac876b..030f5e192 100644
--- a/samples/create-app-demo/babel.config.js
+++ b/samples/create-app-demo/babel.config.js
@@ -3,5 +3,5 @@
 const { babelPresetFile } = require("@xarc/app-dev");
 
 module.exports = {
-  presets: [babelPresetFile]
+  presets: [babelPresetFile],
 };
diff --git a/samples/create-app-demo/package.json b/samples/create-app-demo/package.json
index b32acfa83..40f176550 100644
--- a/samples/create-app-demo/package.json
+++ b/samples/create-app-demo/package.json
@@ -29,6 +29,9 @@
     "node": ">= 12",
     "npm": ">= 6"
   },
+  "prettier": {
+    "printWidth": 100
+  },
   "dependencies": {
     "@babel/runtime": "^7.12.5",
     "@xarc/app": "^9.0.4",
@@ -42,6 +45,7 @@
     "@xarc/app-dev": "^9.0.4",
     "@xarc/opt-postcss": "^1.0.0",
     "@xarc/opt-stylus": "^1.0.0",
+    "prettier": "^2.2.1",
     "ts-node": "^9.1.1",
     "typescript": "^4.1.3"
   }
diff --git a/samples/create-app-demo/src/app.tsx b/samples/create-app-demo/src/app.tsx
index e47936ca7..63d4e6b42 100644
--- a/samples/create-app-demo/src/app.tsx
+++ b/samples/create-app-demo/src/app.tsx
@@ -2,17 +2,17 @@ import { declareSubApp, xarcV2 } from "@xarc/react";
 
 export const home = declareSubApp({
   name: "home",
-  getModule: () => import("./home")
+  getModule: () => import("./home"),
 });
 
 export const Demo2 = declareSubApp({
   name: "demo2",
-  getModule: () => import("./demo2")
+  getModule: () => import("./demo2"),
 });
 
 export const Demo3 = declareSubApp({
   name: "demo3",
-  getModule: () => import("./demo3")
+  getModule: () => import("./demo3"),
 });
 
 xarcV2.debug("app.tsx");
diff --git a/samples/create-app-demo/src/demo1/index.tsx b/samples/create-app-demo/src/demo1/index.tsx
index f4201d343..b655aef86 100644
--- a/samples/create-app-demo/src/demo1/index.tsx
+++ b/samples/create-app-demo/src/demo1/index.tsx
@@ -5,7 +5,7 @@ import styles from "../styles/demo1.mod.styl";
 // CSS module support for .css
 import styles2 from "../styles/demo1.mod.css";
 
-const Demo1 = props => {
+const Demo1 = (props) => {
   return (
     <div style={{ padding: "5px", border: "solid", marginLeft: "15%", marginRight: "15%" }}>
       <p className={styles.demo1}>subapp demo1 (.styl css module blue color)</p>
@@ -19,5 +19,5 @@ const Demo1 = props => {
 };
 
 export const subapp: ReactSubApp = {
-  Component: Demo1
+  Component: Demo1,
 };
diff --git a/samples/create-app-demo/src/demo2/index.tsx b/samples/create-app-demo/src/demo2/index.tsx
index 8f7ddc70c..7b785cbf6 100644
--- a/samples/create-app-demo/src/demo2/index.tsx
+++ b/samples/create-app-demo/src/demo2/index.tsx
@@ -12,17 +12,17 @@ export { reduxReducers } from "./reducers";
 
 const incNumber = () => {
   return {
-    type: "INC_NUMBER"
+    type: "INC_NUMBER",
   };
 };
 
 const decNumber = () => {
   return {
-    type: "DEC_NUMBER"
+    type: "DEC_NUMBER",
   };
 };
 
-const Demo2 = props => {
+const Demo2 = (props) => {
   const { value, dispatch } = props;
 
   return (
@@ -33,7 +33,7 @@ const Demo2 = props => {
           marginTop: "15px",
           border: "solid",
           marginLeft: "15%",
-          marginRight: "15%"
+          marginRight: "15%",
         }}
       >
         <h2>subapp demo2 with Redux</h2>
@@ -45,20 +45,20 @@ const Demo2 = props => {
   );
 };
 
-const mapStateToProps = state => {
+const mapStateToProps = (state) => {
   return { value: state.number.value };
 };
 
 export const subapp: ReactSubApp = {
-  Component: connect(mapStateToProps, dispatch => ({ dispatch }))(Demo2),
+  Component: connect(mapStateToProps, (dispatch) => ({ dispatch }))(Demo2),
   wantFeatures: [
     reduxFeature({
       React,
       shareStore: true,
       reducers: true, // true => read the reduxReducers export from this file
-      prepare: async initialState => {
+      prepare: async (initialState) => {
         return { initialState: initialState || { number: { value: 999 } } };
-      }
-    })
-  ]
+      },
+    }),
+  ],
 };
diff --git a/samples/create-app-demo/src/demo2/reducers.ts b/samples/create-app-demo/src/demo2/reducers.ts
index 1c885bc4a..b40325ff4 100644
--- a/samples/create-app-demo/src/demo2/reducers.ts
+++ b/samples/create-app-demo/src/demo2/reducers.ts
@@ -1,11 +1,11 @@
 const number = (store = { value: 0 }, action) => {
   if (action.type === "INC_NUMBER") {
     return {
-      value: store.value + 1
+      value: store.value + 1,
     };
   } else if (action.type === "DEC_NUMBER") {
     return {
-      value: store.value - 1
+      value: store.value - 1,
     };
   }
 
@@ -13,5 +13,5 @@ const number = (store = { value: 0 }, action) => {
 };
 
 export const reduxReducers = {
-  number
+  number,
 };
diff --git a/samples/create-app-demo/src/demo3/index.tsx b/samples/create-app-demo/src/demo3/index.tsx
index fffee3800..2e59ee705 100644
--- a/samples/create-app-demo/src/demo3/index.tsx
+++ b/samples/create-app-demo/src/demo3/index.tsx
@@ -22,7 +22,7 @@ const Demo3 = () => {
           marginTop: "15px",
           border: "solid",
           marginLeft: "15%",
-          marginRight: "15%"
+          marginRight: "15%",
         }}
       >
         <h2>subapp demo3 with react-query</h2>
@@ -38,7 +38,7 @@ export const subapp: ReactSubApp = {
   wantFeatures: [
     reactQueryFeature({
       React,
-      serverModule: require.resolve("./react-query-fetch")
-    })
-  ]
+      serverModule: require.resolve("./react-query-fetch"),
+    }),
+  ],
 };
diff --git a/samples/create-app-demo/src/demo3/react-query-fetch.ts b/samples/create-app-demo/src/demo3/react-query-fetch.ts
index dfa87d808..30b19c867 100644
--- a/samples/create-app-demo/src/demo3/react-query-fetch.ts
+++ b/samples/create-app-demo/src/demo3/react-query-fetch.ts
@@ -5,7 +5,7 @@ const maxDelay = 50;
 export const demo3QueryFn = async ({ queryKey }) => {
   const delay = Math.floor(Math.random() * maxDelay);
 
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     setTimeout(resolve, delay);
   }).then(() => {
     return { msg: "react-query", queryKey, delay };
@@ -17,6 +17,6 @@ export const prefetchQuery = async ({ queryClient, ssrData }) => {
 
   return {
     queryClient,
-    dehydratedState: dehydrate(queryClient)
+    dehydratedState: dehydrate(queryClient),
   };
 };
diff --git a/samples/create-app-demo/src/home/index.tsx b/samples/create-app-demo/src/home/index.tsx
index 83f987b44..35be611ba 100644
--- a/samples/create-app-demo/src/home/index.tsx
+++ b/samples/create-app-demo/src/home/index.tsx
@@ -5,12 +5,12 @@ import { message } from "./message";
 export const Demo1 = createDynamicComponent(
   {
     name: "demo1",
-    getModule: () => import("../demo1")
+    getModule: () => import("../demo1"),
   },
   { ssr: true }
 );
 
-const Home = props => {
+const Home = (props) => {
   return (
     <div style={{ textAlign: "center" }}>
       <h1>
@@ -30,7 +30,7 @@ export const subapp: ReactSubApp = {
   Component: Home,
   wantFeatures: [
     staticPropsFeature({
-      serverModule: require.resolve("./static-props")
-    })
-  ]
+      serverModule: require.resolve("./static-props"),
+    }),
+  ],
 };
diff --git a/samples/create-app-demo/src/home/static-props.tsx b/samples/create-app-demo/src/home/static-props.tsx
index 71e62c354..8d5f393ea 100644
--- a/samples/create-app-demo/src/home/static-props.tsx
+++ b/samples/create-app-demo/src/home/static-props.tsx
@@ -2,7 +2,7 @@ const maxDelay = 50;
 
 export async function getStaticProps() {
   const delay = Math.floor(Math.random() * maxDelay);
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     return setTimeout(
       () => resolve({ props: { message: "Hello from static props", delay } }),
       delay
diff --git a/samples/create-app-demo/src/server/config.ts b/samples/create-app-demo/src/server/config.ts
index 8084a27aa..453b94af8 100644
--- a/samples/create-app-demo/src/server/config.ts
+++ b/samples/create-app-demo/src/server/config.ts
@@ -7,7 +7,7 @@ const connection: ConnectionConfig = {
   host: process.env.HOST || "localhost",
   // The env APP_SERVER_PORT allows Electrode X to control app's listening port during dev
   // to serve both static assets and app under a unified proxy port
-  port: parseInt(process.env.APP_SERVER_PORT || process.env.PORT || "3000")
+  port: parseInt(process.env.APP_SERVER_PORT || process.env.PORT || "3000"),
 };
 
 //
@@ -19,8 +19,8 @@ const plugins: PluginsConfig = {
    */
   "@xarc/app-dev": {
     priority: -1,
-    enable: Boolean(process.env.WEBPACK_DEV)
-  }
+    enable: Boolean(process.env.WEBPACK_DEV),
+  },
 };
 
 /**
@@ -37,5 +37,5 @@ export const config: ElectrodeServerConfig = {
   // don't start fastify server automatically so app can setup routes
   deferStart: true,
   connection,
-  plugins
+  plugins,
 };
diff --git a/samples/create-app-demo/src/server/index.ts b/samples/create-app-demo/src/server/index.ts
index ecb80089f..77d818c2f 100644
--- a/samples/create-app-demo/src/server/index.ts
+++ b/samples/create-app-demo/src/server/index.ts
@@ -10,8 +10,8 @@ import { config } from "./config";
 export async function start() {
   await loadRuntimeSupport({
     isomorphicCdnOptions: {
-      prodOnly: true
-    }
+      prodOnly: true,
+    },
   });
 
   const server = await electrodeServer(config);
diff --git a/samples/create-app-demo/src/server/routes.ts b/samples/create-app-demo/src/server/routes.ts
index 38ef931e7..e13e58c34 100644
--- a/samples/create-app-demo/src/server/routes.ts
+++ b/samples/create-app-demo/src/server/routes.ts
@@ -12,11 +12,11 @@ export function setupRoutes(server) {
     subApps: [
       { name: home.name, ssr: true },
       { name: Demo2.name, ssr: true },
-      { name: Demo3.name, ssr: true }
+      { name: Demo3.name, ssr: true },
     ],
     prodAssetData: {
-      cdnMap: "config/assets.json"
-    }
+      cdnMap: "config/assets.json",
+    },
   });
 
   server.route({
@@ -35,6 +35,6 @@ export function setupRoutes(server) {
       } catch (error) {
         reply.send(error.stack);
       }
-    }
+    },
   });
 }
diff --git a/samples/create-app-demo/xrun-tasks.ts b/samples/create-app-demo/xrun-tasks.ts
index 52933a1f8..f7e2e91c3 100644
--- a/samples/create-app-demo/xrun-tasks.ts
+++ b/samples/create-app-demo/xrun-tasks.ts
@@ -10,7 +10,7 @@ xrun.updateEnv(
      * In dev mode, a proxy server listens at `PORT` and forward requests to
      * to actual node.js app server and webpack dev server.
      */
-    PORT: 3000
+    PORT: 3000,
     /**
      * In dev mode, `APP_SERVER_PORT` sets the proxy forward port for the
      * node.js app server.  If it's not defined or `0`, then a randomly available
@@ -26,7 +26,7 @@ xrun.updateEnv(
   },
   {
     // do not override any env flag already set in process.env
-    override: false
+    override: false,
   }
 );
 
@@ -34,6 +34,6 @@ loadDevTasks(xrun, {
   // options to customize features
   webpackOptions: {
     // enable CSS module for files other than `.mod.css`
-    cssModuleSupport: "byModExt"
-  }
+    cssModuleSupport: "byModExt",
+  },
 });