protium/index.html at master · 3five/protium · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <base href="./docs/dist/" />
  <title data-ice="title">Protium API Document</title>
  <link type="text/css" rel="stylesheet" href="css/style.css">
  <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
  <script src="script/prettify/prettify.js"></script>


  <script src="script/manual.js"></script>
</head>
<body class="layout-container" data-ice="rootContainer">

<header>
  <a href="./">Home</a>

  <a href="identifiers.html">Reference</a>
  <a href="source.html">Source</a>

  <a data-ice="repoURL" href="https://github.com/3five/protium.git" class="repo-url-github">Repository</a>
  <div class="search-box">
  <span>
    <img src="./image/search.png">
    <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
  </span>
    <ul class="search-result"></ul>
  </div>
</header>

<nav class="navigation" data-ice="nav"><div>
  <ul>

  <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/application.js~Application.html">Application</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/devtools.js~DevTools.html">DevTools</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/error.js~ErrorComponent.html">ErrorComponent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/fetch-client.js~FetchClient.html">FetchClient</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/htmlpage.js~HtmlPage.html">HtmlPage</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/router.js~Router.html">Router</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/store.js~Store.html">Store</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-asyncMiddleware">asyncMiddleware</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-contextThunkMiddleware">contextThunkMiddleware</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-renderer">renderer</a></span></span></li>
</ul>
</div>
</nav>

<div class="content" data-ice="content"><div data-ice="index" class="github-markdown"><h1 id="protium">Protium</h1>
<p>Protium is a micro framework for building universal React/Redux apps.</p>
<p>Bundles <code>react</code>, <code>react-router</code>, and <code>redux</code> into a nice little package, takes care of routing and store/reducer setup for you (more examples forthcoming).</p>
<p>Uses <a href="https://github.com/nfl/react-helmet">react-helmet</a> for <code>&lt;head&gt;</code> management.</p>
<p><code>import {Helmet} from &apos;protium&apos;</code>, and include that component within any of your views.</p>
<h2 id="example">Example</h2>
<p><strong>webpack.config.js</strong></p>
<pre><code class="lang-javascript"><code class="source-code prettyprint">var DevTools = require(&apos;protium/devtools&apos;).default

var devtools = new DevTools(__dirname) // sets webpack context for your app

module.exports = [
  devtools.serverConfig(&apos;./app&apos;), // points to exported application
  devtools.browserConfig(&apos;./client&apos;)  // points to client entrypoint
]</code>
</code></pre>
<p><strong>app.js</strong></p>
<pre><code class="lang-javascript"><code class="source-code prettyprint">
import React from &apos;react&apos;
import Root  from &apos;./views/root&apos;
import Comp  from &apos;./views/comp&apos;
import * as reducers from &apos;./reducers&apos;
import { Application } from &apos;protium&apos;
import {
  Router,
  Route,
  IndexRoute
} from &apos;protium/router&apos;

const router = new Router({
  routes(store) { // use onEnter props to validate routes based on app state
    // Can also return a promise here, for async route definition
    return &lt;Route path=&quot;/&quot; component={Root}&gt;
      &lt;IndexRoute component={Comp} /&gt;
      &lt;Route path=&quot;/a&quot; component={Comp} /&gt;
      &lt;Route path=&quot;/b&quot; component={Comp} /&gt;
      &lt;Route path=&quot;/c&quot; component={Comp} /&gt;
      &lt;Route path=&quot;*&quot; component={NotFoundComp} notFound={true} /&gt; // signals 404 on server
    &lt;/Route&gt;
  }
})

export default new Application({
  router,
  store: {
    reducers
  }
})</code>
</code></pre>
<p><strong>client.js</strong></p>
<pre><code class="lang-javascript"><code class="source-code prettyprint">// client.js (short and sweet!)
import app from &apos;./app&apos;

app.render()</code>
</code></pre>
<pre><code class="lang-javascript"><code class="source-code prettyprint">// server.js
import express       from &apos;express&apos;
import path          from &apos;path&apos;
import { renderer }  from &apos;protium/server&apos;
import app           from &apos;./app&apos;

const server = express()
export default server

server.use(&apos;/assets&apos;, express.static(&apos;dist&apos;))
server.get(&apos;/*&apos;, renderer(path.resolve(&apos;./app.js&apos;), {
  page: {
    main: require(&apos;./webpack-assets.json&apos;).javascript.client
  }
}))</code>
</code></pre>
</div>
</div>

<footer class="footer">
  Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(0.4.8)</span></a>
</footer>

<script src="script/search_index.js"></script>
<script src="script/search.js"></script>
<script src="script/pretty-print.js"></script>
<script src="script/inherited-summary.js"></script>
<script src="script/test-summary.js"></script>
<script src="script/inner-link.js"></script>
<script src="script/patch-for-local.js"></script>
</body>
</html>