andreypopp / react-quickstart Goto Github PK

[DEPRECATED] React project template with server-side UI rendering and routing

CSS 3.23% JavaScript 96.77%

react-quickstart's Introduction

react-quickstart

A minimal React project template which combines:

react-router-component to provide HTML5 History routing and navigation
react-async to create "asynchronous" React components
express to serve pre-rendered React components, assets and provide API
browserify to provide module system for a browser
npm to install and manage server-side and client-side dependencies

Every "page" in the application is pre-rendered on server so the user can see the UI before the client code is shipped to a browser. After that application starts functioning like a single page application, navigating between "pages" without reloads.

Project structure

Project structure is really minimal, you'd probably like to customize it for your specific needs and taste:

.
├── assets
├── client.js
├── package.json
└── server.js

Directory assets is served under /assets URL, client.js module contains UI code while server.js — HTTP server which serves pre-rendered React components, assets and provide a stub for a REST API.

Development workflow

After cloning a git repo, run:

% npm install

to install all needed dependencies and then:

% npm run start

to start a development server.

Now you can start edit the source code — on changes, server will be reloaded and client code bundle will be rebuilt.

Going "production"

To build an optimized bundle of client code run:

% npm run build

which will produce assets/bundle.js build, then:

% npm run start-prod

to start server in "production" mode (no source code watching and serving optimized bundle to browser).

react-quickstart's People

Contributors

Stargazers

Watchers

react-quickstart's Issues

Update PeerDependencies to allow react-async 0.9.0

$ npm install --save react-router-component
...
npm ERR! peerinvalid The package react-async does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react-async@~0.8.0

npm ERR! System Darwin 13.1.0
npm ERR! command "/usr/local/bin/node" "/usr/local/bin/npm" "install" "--save" "react-router-component"
npm ERR! cwd /Users/tjmehta/Developer/+github/harbormaster
npm ERR! node -v v0.11.10
npm ERR! npm -v 1.3.22
npm ERR! code EPEERINVALID
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /Users/tjmehta/Developer/+github/harbormaster/npm-debug.log
npm ERR! not ok code 0

Missing superagent

It looks like you forgot to include superagent on package.json

Error: No compatible version found: uglifyjs@'^2.3.6'

When running npm install

npm ERR! Error: No compatible version found: uglifyjs@'^2.3.6'
npm ERR! Valid install targets:
npm ERR! ["2.3.6"]
npm ERR!     at installTargetsError (/usr/local/lib/node_modules/npm/lib/cache.js:719:10)
npm ERR!     at /usr/local/lib/node_modules/npm/lib/cache.js:638:10
npm ERR!     at saved (/usr/local/lib/node_modules/npm/node_modules/npm-registry-client/lib/get.js:142:7)
npm ERR!     at /usr/local/lib/node_modules/npm/node_modules/graceful-fs/polyfills.js:133:7
npm ERR!     at Object.oncomplete (fs.js:107:15)
npm ERR! If you need help, you may report this log at:
npm ERR!     <http://github.com/isaacs/npm/issues>
npm ERR! or email it to:
npm ERR!     <[email protected]>

npm ERR! System Darwin 13.1.0
npm ERR! command "node" "/usr/local/bin/npm" "install"
npm ERR! cwd /Users/vjeux/www/mongo-graphql
npm ERR! node -v v0.10.15
npm ERR! npm -v 1.3.5

Are you going to upgrade this quickstart to use rrouter?

node_modules is 90M

The project's node_modules is 90M which seems a bit too tough for a barebones project.
I have no idea whether that can be fixed.
Just keep that in mind.

How to use react-forms with react-quickstart?

Hey People,

I try to incorporate the getting started example from react-forms into this project structure
But then I get this syntax error.

node_modules/react-forms/lib/index.js:30
FormMixin, FormContextMixin, FormElementMixin,
^
SyntaxError: Unexpected token ,
at Module._compile (module.js:439:25)
at Object.require.extensions.(anonymous function) as .js
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (/home/djan/dev/react-quickstart/pages/main.js:8:18)
at Module._compile (module.js:456:26)
at Object.require.extensions.(anonymous function) as .js
at Module.load (module.js:356:32)
Program node server.js exited with code 8

Starting child process with 'node server.js'

Here my code:

  var React       = require('react');                                      
var Schema = ReactForms.schema.Schema;                                   
var Property = ReactForms.schema.Property;                               
var Form = ReactForms.Form;   

  var schema = (                                                           
    <Schema>                                                               
    . <Property name="firstName" />                                        
    . <Property name="lastName" />                                         
    . <Property name="age" type="number" />                                
    </Schema>                                                              
  );                                                                       

  var MainPage = React.createClass({                                       

    render: function() {                                                       
    . return (                                                             
    . . <div className="container">                                        
    . . . <div className="col-md-9 home">                                      
. . . . <div className="navbar navbar-default">                        
    . . . . . <div className="navbar-header">                              
    . . . . . . <a href="/" className="navbar-brand"></a>                  
    . . . . . </div>                                                       
    . . . . </div>                                                         
    . . . . <h1>Hello, anonymous!</h1>                                     
    . . . . . <ul className="nav nav-pills">                               
    . . . . . . <li className="active"><a href="/">Home</a></li>           
    . . . . . . <li><a href="/tasks">Todo List</a></li>                    
    . . . . . . <li><a href="/register">Register</a></li>                  
    . . . . . </ul>                                                        
    . . . . . <Form schema={schema} />                                     
    . . . </div>                                                           
    . . </div>                                                             
    . );

To be complete, here is also my package.json.

{                                                                          
  name: react-quickstart,                                                  
  version: 0.0.0,                                                          
  description: React project,                                              
  main: ./server.js,                                                       
  browser: ./client.js,                                                    
  browserify: {                                                            
  . transform: [                                                           
  . . [reactify, {harmony: true}]                                          
  . ]                                                                      
  },                                                                       
  dependencies: {                                                          
  . react: 0.11.0,                                                         
  . react-forms:0.6.3,                                                     
  . react-async: 1.0.2,                                                    
  . react-router-component: 0.22.0,                                        
  . react-bootstrap:0.12.0,                                                
  . node-jsx: ~0.10.0,                                                     
  . express: ~4.9.0,                                                       
  . body-parser:1.9.1,                                                     
  . less-middleware: 1.0.4,                                                  
 . errorhandler: 1.1.1,                                                   
  . connect-flash:0.1.1,                                                   
  . passport:0.2.1,                                                        
  . superagent: ~0.18.0,                                                   
  . fibers: ~1.0.1                                                         
  },                         
devDependencies: {                                                       
  . reactify: ~0.13.1,                                                     
  . envify: ~1.2.0,                                                          
  . browserify: ~3.44.2,                                                   
  . connect-browserify: ~2.0.1,                                            
  . uglify-js: ~2.4.13,                                                    
  . supervisor: ~0.6.0                                                     
  },                                                                       
  scripts: {                                                               
  . test: echo \"Error: no test specified\" && exit 1,                     
  . start: supervisor -i node_modules -e js,jsx server.js,                 
  . build: NODE_ENV=production browserify ./ | uglifyjs -cm 2>/dev/null    > ./assets/bundle.js,                                                      
  . start-prod: NODE_ENV=production node server.js,                        
  . clean: rm -f ./assets/bundle.js                                        
  },                                                                       
  author: "",                                                              
  license: MIT                                                             
}

Can you help me? I do not see what's wrong.

Best regards
Jan

Fails when dependencies are updated.

I'd like to use the latest https://github.com/STRML/react-router-component but it depends on react 0.11.0.

I forked this repo chrisdew@d8ed623 and updated the package.json to:

    "react": "~0.11.2",
    "react-async": "~1.0.2",
    "react-router-component": "~0.22.0",

When running, the client has trouble as soon as you click "login" then "/users/ivan".

The error (in the Javascript console, in Chrome) is:

Uncaught TypeError: Cannot read property 'getUserInfo' of undefined client.js:58
React.createClass.componentWillReceiveProps client.js:58
ReactCompositeComponentMixin.performUpdateIfNecessary ReactCompositeComponent.js:1036
ReactComponent.Mixin.receiveComponent ReactComponent.js:315
ReactCompositeComponentMixin.receiveComponent ReactCompositeComponent.js:1150
ReactMultiChild.Mixin._updateChildren ReactMultiChild.js:294
ReactMultiChild.Mixin.updateChildren ReactMultiChild.js:254
ReactDOMComponent.Mixin._updateDOMChildren ReactDOMComponent.js:396
(anonymous function) ReactDOMComponent.js:249
(anonymous function) ReactPerf.js:58
ReactComponent.Mixin.performUpdateIfNecessary ReactComponent.js:334
ReactComponent.Mixin.receiveComponent ReactComponent.js:315
ReactDOMComponent.Mixin.receiveComponent ReactDOMComponent.js:222(anonymous function) ReactCompositeComponent.js:1182
(anonymous function) ReactPerf.js:58ReactCompositeComponentMixin._performComponentUpdate ReactCompositeComponent.js:1124
ReactCompositeComponentMixin.performUpdateIfNecessary ReactCompositeComponent.js:1064
ReactComponent.Mixin.receiveComponent ReactComponent.js:315
ReactCompositeComponentMixin.receiveComponent ReactCompositeComponent.js:1150
(anonymous function) ReactCompositeComponent.js:1182
(anonymous function) ReactPerf.js:58ReactCompositeComponentMixin._performComponentUpdate ReactCompositeComponent.js:1124
ReactCompositeComponentMixin.performUpdateIfNecessary ReactCompositeComponent.js:1064
runBatchedUpdates ReactUpdates.js:153
Mixin.perform Transaction.js:142
Mixin.perform Transaction.js:142
mixInto.perform ReactUpdates.js:99
(anonymous function) ReactUpdates.js:177
(anonymous function) ReactPerf.js:58
Mixin.closeAll Transaction.js:215
Mixin.perform Transaction.js:156
ReactDefaultBatchingStrategy.batchedUpdates ReactDefaultBatchingStrategy.js:70
batchedUpdates ReactUpdates.js:114
ReactEventListener.dispatchEvent ReactEventListener.js:182

Script download is waited for unneccessarily

bundle.js loading could be moved from head to the bottom of html, to allow instant screen layout before downloads are ready. But then events such as clicks on links should be disabled at first?

Inserting page data serverside using getInitialStateAsync.

On https://github.com/andreypopp/react-quickstart/blob/master/client.js#L42 you use 'getInitialStateAsync' to load the data (via superagent (AJAX?)) as soon as the page loads in the browser.

As the page is initially rendered on the server, how could I provide the intial data during the server-side rendering (needed for SEO)?

I realise that I will need to split the API into functions which return Javascript (then wrap them into a http API for superagent), but I don't know what to put into getInitialStateAsync.

The initial data for the page can only be retrieved async (it comes form a DB). I tried using superagent in getInitialStateAsync, but the page tried to render before the state was available.

Missing Doctype

Is there a reasonable way to include the doctype?

Can't start the project

I am trying to start the project like this:

$ npm i
$ npm run start

as in README file.

At the start I get this:

$ npm run start 

> [email protected] start /Users/olebedev/pro/csmnt/react-quickstart
> supervisor -i node_modules -e js,jsx server.js


Running node-supervisor with
  program 'server.js'
  --watch '.'
  --ignore 'node_modules'
  --extensions 'js,jsx'
  --exec 'node'

Starting child process with 'node server.js'
Ignoring directory '/Users/olebedev/pro/csmnt/react-quickstart/node_modules'.
Watching directory '/Users/olebedev/pro/csmnt/react-quickstart' for changes.
Point your browser at http://localhost:3000

But I get an error each time requested to http://localhost:3000/:

Error: Error transforming /Users/olebedev/pro/csmnt/react-quickstart/node_modules/fibers/fibers.js to JSX: Error: Parse Error: Line 2: Illegal return statement
    at Object.require.extensions.(anonymous function) [as .js] (/Users/olebedev/pro/csmnt/react-quickstart/node_modules/node-jsx/index.js:24:13)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.renderComponentToStringWithAsyncState (/Users/olebedev/pro/csmnt/react-quickstart/node_modules/react-async/index.js:60:17)
    at Layer.renderApp [as handle] (/Users/olebedev/pro/csmnt/react-quickstart/server.js:16:14)
    at trim_prefix (/Users/olebedev/pro/csmnt/react-quickstart/node_modules/express/lib/router/index.js:230:15)
    at c (/Users/olebedev/pro/csmnt/react-quickstart/node_modules/express/lib/router/index.js:198:9)
    at Function.proto.process_params (/Users/olebedev/pro/csmnt/react-quickstart/node_modules/express/lib/router/index.js:253:12)

Fibers installed, as expected:

$ npm ls | grep fibers
├── [email protected]

So, maybe package's versions in package.json are outdated?
Thoughts?

windows browser error

with Firefox 25 or 10.0.2 :

become crazy and send OPTIONS !

set DEBUG=express:*
node server.js

express:router dispatching OPTIONS /users/doe (/api/users/doe) +0ms
express:router dispatching OPTIONS /api/users/doe (/api/users/doe) +3ms
express:router dispatching OPTIONS /users/doe (/api/users/doe) +4ms
express:router dispatching OPTIONS /api/users/doe (/api/users/doe) +1ms
express:router dispatching OPTIONS /users/doe (/api/users/doe) +1ms
express:router dispatching OPTIONS /api/users/doe (/api/users/doe) +2ms
express:router dispatching OPTIONS /users/doe (/api/users/doe) +1ms
express:router dispatching OPTIONS /api/users/doe (/api/users/doe) +3ms
......
......
......
......
......
......
reapeat and repeat again

Chrome 29.0.1547.66

Click on "Login" and nothing
Console :

Download the React DevTools for a better development experience: http://fb.me/react-devtools React.js:84
Error in event handler: SyntaxError: Unexpected token u event_bindings:325

With IE8

a first, work well !

Thanks
Ami44