feat(template-minimal): add a minimal example template without react

xing · Oct 13, 2017 · db529d0 · db529d0
1 parent 7c0b076
commit db529d0
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 0 deletions.
diff --git a/packages/template-minimal/.gitignore b/packages/template-minimal/.gitignore
@@ -0,0 +1,6 @@
+.tmp
+build
+docs
+node_modules
+*.log
+.DS_Store
diff --git a/packages/template-minimal/package.json b/packages/template-minimal/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "hops-template-minimal",
+  "version": "7.0.0-2",
+  "browser": "src/browser.js",
+  "server": "src/server.js",
+  "license": "MIT",
+  "config": {
+    "hops": {
+      "browsers": "last 1 Chrome versions"
+    }
+  },
+  "scripts": {
+    "start": "hops start",
+    "build": "hops build"
+  },
+  "dependencies": {
+    "hops-config": "7.0.0-0",
+    "hops-express": "7.0.0-1",
+    "hops-local-cli": "7.0.0-2"
+  },
+  "devDependencies": {
+    "hops-build": "7.0.0-2"
+  }
+}
diff --git a/packages/template-minimal/readme.md b/packages/template-minimal/readme.md
@@ -0,0 +1,24 @@
+# Hops Template Minimal
+
+This is a minimal example of how [hops](https://github.com/xing/hops) can be used without react.
+
+
+## Target audience
+
+You might want to use this if you plan to use something other than react, for example when you want to build a vue.js or preact application - or if you disagree with / want to make more extensive customizations than those done in [hops-react](https://github.com/xing/hops/tree/master/packages/react) and [hops-redux](https://github.com/xing/hops/tree/master/packages/redux).
+
+
+## Overview
+
+#### browser.js
+
+This script (and all of its dependencies) will be bundled through webpack into the `main-[hash].js` bundle located at [hops-config](https://github.com/xing/hops/tree/master/packages/config)s `buildDir`.
+
+It will then be requested by the browser because the [server](#server.js) embeds it into the intial HTML response.
+
+
+#### server.js
+
+This script (and all of its dependencies) will be bundled through webpack into the `server.js` bundle located at [hops-config](https://github.com/xing/hops/tree/master/packages/config)s `cacheDir`.
+
+It will then be used as a Express.js-style middleware for [hops-express](https://github.com/xing/hops/tree/master/packages/express) and the `webpack-dev-server` contained in [hops-build](https://github.com/xing/hops/tree/master/packages/build).
diff --git a/packages/template-minimal/src/browser.js b/packages/template-minimal/src/browser.js
@@ -0,0 +1,11 @@
+import styles from './styles.css';
+
+export default () => {
+  const root = document.getElementById('app');
+
+  const headline = document.createElement('h1');
+  headline.innerText = 'Hello Hops!';
+  headline.className = styles.headline;
+
+  root.appendChild(headline);
+};
diff --git a/packages/template-minimal/src/server.js b/packages/template-minimal/src/server.js
@@ -0,0 +1,23 @@
+import hopsConfig from 'hops-config';
+
+export default (req, res, next) => {
+  res.send(
+`<!doctype html>
+<html charset="utf-8">
+  <head>
+      <title>Hello Hops</title>
+      ${hopsConfig.assets.css.map(css =>
+        `<link rel="stylesheet" href="${css}"></link>`
+      ).join('')}
+  </head>
+  <body>
+    <div id="app"></app>
+    <script>${hopsConfig.manifest}</script>
+    ${hopsConfig.assets.js.map(js =>
+      `<script src="${js}"></script>`
+    ).join('')}
+  </body>
+</html>
+`
+  );
+};
diff --git a/packages/template-minimal/src/styles.css b/packages/template-minimal/src/styles.css
@@ -0,0 +1,3 @@
+.headline {
+  color: blue;
+}