├── .gitignore
├── LICENSE
├── README.md
├── build
└── build.js
├── lib
├── app
│ ├── Application.jsx
│ └── Widget.jsx
├── client
│ └── clientMain.jsx
└── server
│ ├── nodeJSRequireJSX.js
│ └── serverMain.js
├── offlineBuild.sh
├── package.json
└── static_resources
├── ReactAppLogo.png
└── index.html
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 | .DS_Store
4 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Apache License
2 | Version 2.0, January 2004
3 | http://www.apache.org/licenses/
4 |
5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
6 |
7 | 1. Definitions.
8 |
9 | "License" shall mean the terms and conditions for use, reproduction,
10 | and distribution as defined by Sections 1 through 9 of this document.
11 |
12 | "Licensor" shall mean the copyright owner or entity authorized by
13 | the copyright owner that is granting the License.
14 |
15 | "Legal Entity" shall mean the union of the acting entity and all
16 | other entities that control, are controlled by, or are under common
17 | control with that entity. For the purposes of this definition,
18 | "control" means (i) the power, direct or indirect, to cause the
19 | direction or management of such entity, whether by contract or
20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the
21 | outstanding shares, or (iii) beneficial ownership of such entity.
22 |
23 | "You" (or "Your") shall mean an individual or Legal Entity
24 | exercising permissions granted by this License.
25 |
26 | "Source" form shall mean the preferred form for making modifications,
27 | including but not limited to software source code, documentation
28 | source, and configuration files.
29 |
30 | "Object" form shall mean any form resulting from mechanical
31 | transformation or translation of a Source form, including but
32 | not limited to compiled object code, generated documentation,
33 | and conversions to other media types.
34 |
35 | "Work" shall mean the work of authorship, whether in Source or
36 | Object form, made available under the License, as indicated by a
37 | copyright notice that is included in or attached to the work
38 | (an example is provided in the Appendix below).
39 |
40 | "Derivative Works" shall mean any work, whether in Source or Object
41 | form, that is based on (or derived from) the Work and for which the
42 | editorial revisions, annotations, elaborations, or other modifications
43 | represent, as a whole, an original work of authorship. For the purposes
44 | of this License, Derivative Works shall not include works that remain
45 | separable from, or merely link (or bind by name) to the interfaces of,
46 | the Work and Derivative Works thereof.
47 |
48 | "Contribution" shall mean any work of authorship, including
49 | the original version of the Work and any modifications or additions
50 | to that Work or Derivative Works thereof, that is intentionally
51 | submitted to Licensor for inclusion in the Work by the copyright owner
52 | or by an individual or Legal Entity authorized to submit on behalf of
53 | the copyright owner. For the purposes of this definition, "submitted"
54 | means any form of electronic, verbal, or written communication sent
55 | to the Licensor or its representatives, including but not limited to
56 | communication on electronic mailing lists, source code control systems,
57 | and issue tracking systems that are managed by, or on behalf of, the
58 | Licensor for the purpose of discussing and improving the Work, but
59 | excluding communication that is conspicuously marked or otherwise
60 | designated in writing by the copyright owner as "Not a Contribution."
61 |
62 | "Contributor" shall mean Licensor and any individual or Legal Entity
63 | on behalf of whom a Contribution has been received by Licensor and
64 | subsequently incorporated within the Work.
65 |
66 | 2. Grant of Copyright License. Subject to the terms and conditions of
67 | this License, each Contributor hereby grants to You a perpetual,
68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
69 | copyright license to reproduce, prepare Derivative Works of,
70 | publicly display, publicly perform, sublicense, and distribute the
71 | Work and such Derivative Works in Source or Object form.
72 |
73 | 3. Grant of Patent License. Subject to the terms and conditions of
74 | this License, each Contributor hereby grants to You a perpetual,
75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
76 | (except as stated in this section) patent license to make, have made,
77 | use, offer to sell, sell, import, and otherwise transfer the Work,
78 | where such license applies only to those patent claims licensable
79 | by such Contributor that are necessarily infringed by their
80 | Contribution(s) alone or by combination of their Contribution(s)
81 | with the Work to which such Contribution(s) was submitted. If You
82 | institute patent litigation against any entity (including a
83 | cross-claim or counterclaim in a lawsuit) alleging that the Work
84 | or a Contribution incorporated within the Work constitutes direct
85 | or contributory patent infringement, then any patent licenses
86 | granted to You under this License for that Work shall terminate
87 | as of the date such litigation is filed.
88 |
89 | 4. Redistribution. You may reproduce and distribute copies of the
90 | Work or Derivative Works thereof in any medium, with or without
91 | modifications, and in Source or Object form, provided that You
92 | meet the following conditions:
93 |
94 | (a) You must give any other recipients of the Work or
95 | Derivative Works a copy of this License; and
96 |
97 | (b) You must cause any modified files to carry prominent notices
98 | stating that You changed the files; and
99 |
100 | (c) You must retain, in the Source form of any Derivative Works
101 | that You distribute, all copyright, patent, trademark, and
102 | attribution notices from the Source form of the Work,
103 | excluding those notices that do not pertain to any part of
104 | the Derivative Works; and
105 |
106 | (d) If the Work includes a "NOTICE" text file as part of its
107 | distribution, then any Derivative Works that You distribute must
108 | include a readable copy of the attribution notices contained
109 | within such NOTICE file, excluding those notices that do not
110 | pertain to any part of the Derivative Works, in at least one
111 | of the following places: within a NOTICE text file distributed
112 | as part of the Derivative Works; within the Source form or
113 | documentation, if provided along with the Derivative Works; or,
114 | within a display generated by the Derivative Works, if and
115 | wherever such third-party notices normally appear. The contents
116 | of the NOTICE file are for informational purposes only and
117 | do not modify the License. You may add Your own attribution
118 | notices within Derivative Works that You distribute, alongside
119 | or as an addendum to the NOTICE text from the Work, provided
120 | that such additional attribution notices cannot be construed
121 | as modifying the License.
122 |
123 | You may add Your own copyright statement to Your modifications and
124 | may provide additional or different license terms and conditions
125 | for use, reproduction, or distribution of Your modifications, or
126 | for any such Derivative Works as a whole, provided Your use,
127 | reproduction, and distribution of the Work otherwise complies with
128 | the conditions stated in this License.
129 |
130 | 5. Submission of Contributions. Unless You explicitly state otherwise,
131 | any Contribution intentionally submitted for inclusion in the Work
132 | by You to the Licensor shall be under the terms and conditions of
133 | this License, without any additional terms or conditions.
134 | Notwithstanding the above, nothing herein shall supersede or modify
135 | the terms of any separate license agreement you may have executed
136 | with Licensor regarding such Contributions.
137 |
138 | 6. Trademarks. This License does not grant permission to use the trade
139 | names, trademarks, service marks, or product names of the Licensor,
140 | except as required for reasonable and customary use in describing the
141 | origin of the Work and reproducing the content of the NOTICE file.
142 |
143 | 7. Disclaimer of Warranty. Unless required by applicable law or
144 | agreed to in writing, Licensor provides the Work (and each
145 | Contributor provides its Contributions) on an "AS IS" BASIS,
146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 | implied, including, without limitation, any warranties or conditions
148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 | PARTICULAR PURPOSE. You are solely responsible for determining the
150 | appropriateness of using or redistributing the Work and assume any
151 | risks associated with Your exercise of permissions under this License.
152 |
153 | 8. Limitation of Liability. In no event and under no legal theory,
154 | whether in tort (including negligence), contract, or otherwise,
155 | unless required by applicable law (such as deliberate and grossly
156 | negligent acts) or agreed to in writing, shall any Contributor be
157 | liable to You for damages, including any direct, indirect, special,
158 | incidental, or consequential damages of any character arising as a
159 | result of this License or out of the use or inability to use the
160 | Work (including but not limited to damages for loss of goodwill,
161 | work stoppage, computer failure or malfunction, or any and all
162 | other commercial damages or losses), even if such Contributor
163 | has been advised of the possibility of such damages.
164 |
165 | 9. Accepting Warranty or Additional Liability. While redistributing
166 | the Work or Derivative Works thereof, You may choose to offer,
167 | and charge a fee for, acceptance of support, warranty, indemnity,
168 | or other liability obligations and/or rights consistent with this
169 | License. However, in accepting such obligations, You may act only
170 | on Your own behalf and on Your sole responsibility, not on behalf
171 | of any other Contributor, and only if You agree to indemnify,
172 | defend, and hold each Contributor harmless for any liability
173 | incurred by, or claims asserted against, such Contributor by reason
174 | of your accepting any such warranty or additional liability.
175 |
176 | END OF TERMS AND CONDITIONS
177 |
178 | APPENDIX: How to apply the Apache License to your work.
179 |
180 | To apply the Apache License to your work, attach the following
181 | boilerplate notice, with the fields enclosed by brackets "[]"
182 | replaced with your own identifying information. (Don't include
183 | the brackets!) The text should be enclosed in the appropriate
184 | comment syntax for the file format. We also recommend that a
185 | file or class name and description of purpose be included on the
186 | same "printed page" as the copyright notice for easier
187 | identification within third-party archives.
188 |
189 | Copyright [yyyy] [name of copyright owner]
190 |
191 | Licensed under the Apache License, Version 2.0 (the "License");
192 | you may not use this file except in compliance with the License.
193 | You may obtain a copy of the License at
194 |
195 | http://www.apache.org/licenses/LICENSE-2.0
196 |
197 | Unless required by applicable law or agreed to in writing, software
198 | distributed under the License is distributed on an "AS IS" BASIS,
199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 | See the License for the specific language governing permissions and
201 | limitations under the License.
202 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 |
4 | - Simple, single-page application structure.
5 | - **instantly** package/compile files on-the-fly.
6 | - *Just Works* on Mac/Linux/Windows.
7 | - One-click server rendering.
8 |
9 |
10 |
11 |
12 |
13 | ###Install
14 |
15 | > All you need to get started is git/node/npm.
16 |
17 | git clone https://github.com/jordwalke/reactapp
18 | cd reactapp
19 | npm install # install dependencies.
20 |
21 |
22 |
23 | ### Run and Build on the Fly
24 |
25 | > Just hit your browser's refresh button to run an always-up-to-date version of your app.
26 |
27 | node lib/server/serverMain.js
28 | open http://localhost:8080 # App rendered on the client.
29 | open http://localhost:8080/index.server.html # App rendered on the server.
30 |
31 | - Dynamically packages/compiles your app on each server request.
32 |
33 |
34 | ###Structure
35 |
36 | > `reactapp` is a basic structure for you app and development environment.
37 |
38 |
39 | reactapp/
40 | ├── index.html
41 | ├── package.json # Add npm dependencies here.
42 | ├── README.md
43 | ├── offlineBuild.sh # Serverless static build.
44 | ├── static_resources/ # Shared images/css go here.
45 | ├── build/
46 | │ └── build.js
47 | └── lib/
48 | ├── app/ # All application components, including UI.
49 | │ └── Application.jsx # The Top Level Component
50 | │ └── Widget.jsx # A View style component.
51 | ├── client/ # client-only code
52 | │ └── clientMain.jsx
53 | └── server # server-only code
54 | └── serverMain.jsx
55 |
56 |
57 | ### Create Your UI:
58 |
59 | - `reactapp` allows you to require `JSX` files when rendering on either the client or the server.
60 | - `var Widget = require('./Widget.jsx');`
61 | - `reactapp` considers the `lib/app/Application.jsx` to be your main entry point
62 | component. Start by editing that file to create your user experience.
63 | - Add your own component directory structure inside of `lib/app/` to your liking.
64 | - Build up an applications by composing lower level components into more sophisticated components.
65 |
66 |
67 |
68 | ### Build For Production or Sharing
69 | > Pre-Build your app for use on CDN, or to allow your committed project to be
70 | > effeciantly loaded without a server/build-step.
71 |
72 | sudo npm install -g browserify
73 | ./offlineBuild.sh # Output build/build.js is included in index.html
74 | open index.html # No server needed now!
75 |
76 | You may wish to run `offlineBuild.sh` before you push your branch to a public
77 | repo, so that others can easily download and try your app without having to set
78 | up a toolchain. `./offlineBuild.sh` will create a "one-click" demoable package
79 | for anyone to try in any browser - they only need to open `index.html` on their
80 | local file system.
81 | (If you have a purely client side app (no server side data fetching) this will "just work").
82 |
83 |
84 | **Possible Add-Ons**:
85 | - Reload/rerender modules as you type in text editor (only the ones that changed).
86 | - Reload style without page refresh as style files change.
87 |
88 |
--------------------------------------------------------------------------------
/lib/app/Application.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2013 Facebook, Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | *
16 | * @jsx React.DOM
17 | */
18 | var Widget = require('./Widget.jsx');
19 | var React = require('react-core').React;
20 |
21 | var Application = React.createClass({
22 | handleClick: function() {
23 | alert('You clicked this again!');
24 | },
25 | render: function() {
26 | var imgStyle = {
27 | marginLeft: '50%',
28 | position: 'relative',
29 | left: -360,
30 | marginTop: 50
31 | };
32 | return (
33 |
34 |
35 |
27 | Hello, this is a Widget
28 |
29 | );
30 | }
31 | });
32 |
33 | module.exports = Widget;
34 |
--------------------------------------------------------------------------------
/lib/client/clientMain.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2013 Facebook, Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | *
16 | * @jsx React.DOM
17 | */
18 | var React = require('react-core').React;
19 | var Application = require('../app/Application.jsx');
20 |
21 | /**
22 | * TODO: Support IE8.
23 | */
24 | document.addEventListener("DOMContentLoaded", function() {
25 | React.renderComponent(, document.getElementById('mainContainer'));
26 | });
27 |
28 | module.exports = {};
29 |
--------------------------------------------------------------------------------
/lib/server/nodeJSRequireJSX.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2013 Facebook, Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | *
16 | * @providesModule ReactComponent
17 | */
18 |
19 | var fs = require('fs');
20 | var reactTools = require('react-tools');
21 | require.extensions['.jsx'] = function(module) {
22 | module._compile(reactTools.transform(fs.readFileSync(module.filename, 'utf8')), module.filename);
23 | };
24 |
--------------------------------------------------------------------------------
/lib/server/serverMain.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2013 Facebook, Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | var browserifyMiddleware = require('browserify-middleware');
18 | var reactify = require('reactify');
19 | var express = require('express');
20 | var reactCore = require('react-core');
21 | var fs = require('fs');
22 | var app = express();
23 | var React = reactCore.React;
24 | var path = require('path');
25 |
26 | require('./nodeJSRequireJSX.js');
27 |
28 | /**
29 | * `reactapp` server:
30 | * A simple express server that automatically serves the lastest packaged and
31 | * transformed resources to the client - in addition to being a testing ground
32 | * for server rendering your app.
33 | *
34 | * Interestingly the server rendering setup becomes a huge benefit to
35 | * productivity. When a file changes, it's very fast to reload those modules
36 | * inside of nodejs, but takes longer to repackage a completely new browserified
37 | * bundle.
38 | */
39 |
40 |
41 | /**
42 | * TODO:
43 | * - Put server rendered experience on a different port number.
44 | * - Encode currently running server react version into the 's script
45 | * include version.
46 | * - Allow the "top level component" to be defined in a configuration
47 | * (package.json?) as well as the top level query module (perhaps). Then,
48 | * `clientMain.js` will be auto generated according to how:
49 | * --1. The main package is constructed based on that entry point module.
50 | * --2. The initial server rendering that is performed based on that entry point
51 | * module.
52 | * - Document the fact that everything in app/ should be wiped on each page
53 | * request (cache cleared in require) so that no info leaks across page
54 | * requests. Also recommend contextify. Everything in `server/` will remain
55 | * untouched.
56 | */
57 |
58 | /**
59 | * Using our index.html as a quick-and-dirty template. Not using any kind of {}
60 | * convention so as not to give the impression that we're actually using
61 | * templates (we're not) - this is only used for server rendering.
62 | */
63 | var END_OF_HEAD_MARKER = '';
64 | var RENDER_OUTPUT_MARKER = '';
65 | var PORT_NUMBER = 8080;
66 | var BUILD_TARGET_WRT_SERVER_ROOT = '/build/build.js';
67 | var CLIENT_MAIN_WRT_SERVER_MAIN = '../client/clientMain.jsx';
68 | var HTML_MAIN_ABSOLUTE =
69 | path.resolve(__dirname, '..', '..', 'static_resources/index.html');
70 | var PUBLIC_ROOT_ABSOLUTE =
71 | path.resolve(__dirname, '..', '..', 'static_resources/');
72 | var TOP_LEVEL_COMPONENT_PATH =
73 | path.resolve(__dirname, '..', 'app/Application.jsx');
74 | var APP_DIRECTORY_ABSOLUTE = path.resolve(__dirname, '..', 'app');
75 | var SERVER_RENDER_VIRT_RESOURCE = 'index.server.html';
76 |
77 | /**
78 | * Simulating long durations of markup generation is useful for testing that we
79 | * are optimally downloading resources before the server completes markup
80 | * generation. We should receive the script includes in the head and begin
81 | * downloading scripts almost immediately. Usually, the markup will be received
82 | * before the JS download is complete, but by flushing the head early, we ensure
83 | * that the JS is downloaded as close as possible to the time when the markup is
84 | * received. This setting is just useful for looking at network timing diagrams
85 | * to see that the js download begins long before the markup is fully received
86 | * (you'll see a long html send time and a js download begin at the start of
87 | * that send time).
88 | */
89 | var SIMULATE_SLOW_MARKUP = false;
90 | var SIMULATE_SLOW_MARKUP_MS = 4000;
91 |
92 | /**
93 | * These simulation variables recreate what *actually* typically happens in
94 | * cold-cache page loads on server rendering systems, and demonstrates the value
95 | * of React's client/server rendering capabilities. The markup will be delivered
96 | * instantly, and the user can view and scroll the page. Shortly afte, the JS
97 | * arrives and the page becomes interactive. (It turns out, even without these
98 | * enabled, server rendering in reactapp more or less models the cold cache
99 | * network behavior).
100 | */
101 | // var SIMULATE_SLOW_JS_DOWNLOAD = true;
102 | // var SIMULATE_SLOW_JS_DOWNLOAD_MS = 4000;
103 |
104 |
105 | /**
106 | * TODO: Form a grid showing the variety of scenerios and where various
107 | * client/server configurations could benefit/hurt the perfomance.
108 | * [ ] JS Cache Cold/Warm
109 | * [ ] Network speed [slow, fast, n]
110 | * [ ] Rendering time [slow, fast, n]
111 | * [ ] Rendering location [client, server]
112 | */
113 |
114 | var BROWSERIFY_CONFIG = {
115 | cache: false, // until 'dynamic' works
116 | transform: reactify,
117 | debug: true // Source maps
118 | };
119 |
120 |
121 | var fetchAppConfigThen = function(then) {
122 | fs.readFile(HTML_MAIN_ABSOLUTE, 'utf8', function (err, data) {
123 | if (err) {
124 | return console.error(err);
125 | }
126 | then({indexHTML: data});
127 | });
128 | };
129 |
130 | /**
131 | * Clears application modules that may have been modified since the last
132 | * request.
133 | */
134 | var isApplicationModule = function(modulePath) {
135 | return modulePath.indexOf(APP_DIRECTORY_ABSOLUTE) === 0;
136 | };
137 | var clearApplicationModules = function() {
138 | for (var key in require.cache) {
139 | if (!require.cache.hasOwnProperty(key)) {
140 | continue;
141 | }
142 | if (isApplicationModule(key)) {
143 | delete require.cache[key];
144 | }
145 | }
146 | };
147 |
148 | var splitOnMarker = function(str, marker) {
149 | var splitPage = str.split(marker);
150 | if (splitPage.length !== 2) {
151 | throw new Error('Did not find properly formatted markup');
152 | }
153 | return splitPage;
154 | };
155 |
156 | var performServerRendering = function(reactAppConfig, req, res) {
157 | var topProps = {};
158 | var Application = require(TOP_LEVEL_COMPONENT_PATH);
159 | React.renderComponentToString(Application(topProps), function(appRender) {
160 | var renderIntoBodyAndSend = function(renderlessBody) {
161 | var splitOnRenderMarker = splitOnMarker(renderlessBody, RENDER_OUTPUT_MARKER);
162 | var allBody = splitOnRenderMarker[0] + appRender + splitOnRenderMarker[1];
163 | res.end(allBody);
164 | };
165 | var splitOnHeadMarker = splitOnMarker(reactAppConfig.indexHTML, END_OF_HEAD_MARKER);
166 | var head = splitOnHeadMarker[0];
167 | var renderlessBody = splitOnHeadMarker[1];
168 |
169 | res.setHeader('Content-Type', 'text/html');
170 | // TODO: Use byte length, not character length! (If this is even needed at
171 | // all)
172 | // res.setHeader('Content-Length', length);
173 | res.write(head);
174 | if (!SIMULATE_SLOW_MARKUP) {
175 | renderIntoBodyAndSend(renderlessBody);
176 | } else {
177 | setTimeout(
178 | renderIntoBodyAndSend.bind(null, renderlessBody),
179 | SIMULATE_SLOW_MARKUP_MS
180 | );
181 | }
182 | clearApplicationModules();
183 | });
184 | };
185 |
186 | var launchServer = function(reactAppConfig) {
187 | app.use(express.logger('dev'));
188 | app.use(express.static(PUBLIC_ROOT_ABSOLUTE));
189 |
190 | /**
191 | * Deliver package of all resources.
192 | */
193 | app.get(
194 | BUILD_TARGET_WRT_SERVER_ROOT,
195 | browserifyMiddleware(CLIENT_MAIN_WRT_SERVER_MAIN, BROWSERIFY_CONFIG)
196 | );
197 |
198 | /**
199 | * Same as `index.html` but prerendered on the server.
200 | */
201 | app.get('/index.server.html', performServerRendering.bind(null, reactAppConfig));
202 |
203 | /**
204 | * Listen.
205 | */
206 | app.listen(PORT_NUMBER);
207 |
208 | console.log(
209 | 'listening on port ' + PORT_NUMBER +
210 | ' from ' + PUBLIC_ROOT_ABSOLUTE
211 | );
212 | };
213 |
214 | fetchAppConfigThen(launchServer);
215 |
--------------------------------------------------------------------------------
/offlineBuild.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | browserify -t reactify lib/client/clientMain.jsx > ./build/build.js
3 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "reactapp",
3 | "version": "0.1.0",
4 | "description": "Example React Application",
5 | "main": "lib/index.js",
6 | "dependencies": {
7 | "react-core": "git://github.com/jordwalke/npm-react-core.git",
8 | "browserify": "2.22.0",
9 | "react-tools": "0.3.3",
10 | "reactify": "0.1.3",
11 | "browserify-middleware": "1.14.0",
12 | "express": "3.3.3"
13 | },
14 | "repository": {
15 | "type": "git",
16 | "url": "git://github.com/jordwalke/reactapp.git"
17 | },
18 | "homepage": "",
19 | "keywords": [
20 | "react",
21 | "browserify",
22 | "jsx",
23 | "js",
24 | "plugin",
25 | "transform"
26 | ],
27 | "author": {
28 | "name": "Jordan Walke",
29 | "email": "jordojw@gmail.com",
30 | "url": "http://github.com/jordwalke"
31 | },
32 | "license": "MIT"
33 | }
34 |
35 |
--------------------------------------------------------------------------------
/static_resources/ReactAppLogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jordwalke/reactapp/ec7ae8f653a8f566ca5b8fd9083073af84a825ff/static_resources/ReactAppLogo.png
--------------------------------------------------------------------------------
/static_resources/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | React Application
5 |
6 |
7 |
8 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------