Coder Social home page Coder Social logo

tomaash / react-example-filmdb Goto Github PK

View Code? Open in Web Editor NEW
178.0 13.0 39.0 296 KB

Isomorphic React + Flux film database example

Home Page: https://www.toptal.com/react/navigating-the-react-ecosystem

JavaScript 69.39% CSS 2.01% Handlebars 0.60% Makefile 0.51% HTML 24.19% CoffeeScript 3.29%

react-example-filmdb's Introduction

Isomorphic React + Flux film database example

Complete application example including user authentication using koa on server side, and React/Flux(Alt) on frontend. Also uses koa-mongo-rest to generate REST API, and restful.js to consume them. With a healthy dose of Bootstrap, using react-bootstrap.

Demo: https://react-example-filmdb.herokuapp.com

Libraries Included

TL;DR

Use with iojs^1.8.0 or nodejs^0.12.0, clone the repo, npm install and npm run dev.

Learn React (react-prime-draft), learn Flux and Alt (alt guide).

Build for production with npm run build.

Concepts

Koa will be our server for the server side rendering, we use alt for our Flux architecture and react-router for routing in our app.

With iso as helper we can populate alt flux stores before the first rendering and have a complete async isomorphic React application.

For a more comprehensive guide to the source code, see wiki

Flux

We use alt singleton as Flux implementation.

On the server, it's similar but Flux is initialized using alt.bootstrap and for next rendering, the data are emptied using alt.flush

Installation / How-to

I recommend to use io.js to take advantages of ES6 without --harmony flag on NodeJS.

It's super easy to do with nvm:

  • $ nvm install iojs
  • $ nvm use iojs
  • $ nvm alias default iojs (to make node default to iojs)

But it works well with nodejs^0.12.0 as well :)

Run the project in development:

  • $ npm run dev

Run tests

  • $ npm test will run the tests once
  • $ ./node_modules/.bin/karma start will watch for changes and run the tests on change

Build project:

Just run $ npm run build, it will produce these tasks:

  • Run tests from test/spec/**/*.jsx
  • Concat & minify styles to /dist/app-[hash].css
  • Concat & minify scripts to /dist/js/app-[hash].js

Run in production

Build the project first:

  • $ npm run build

Then start the koa server:

  • $ NODE_ENV=production node server/index.js (iojs)
  • $ NODE_ENV=production node --harmony server/index.js (nodejs 0.12.x)

You can also use processes.json to run the application with PM2 Monitor on your production server (customize it for your use):

  • $ pm2 start processes.json

react-example-filmdb's People

Contributors

tomaash avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-example-filmdb's Issues

issue with login and create account

Hi ,

when I am logging to the filmdb example, there is an error like,

dev return html content +3s
--> POST /auth/login 401 16ms 49b

401 - unauthorized login .

and, also I can not create account , since it will give an error as "Username already exists".

I followed the steps as in README,
so, appreciate if you could go through that.

Thanks in advance.

Thank you

An excellent project for those who love to learn

Old data is shown when open detail page

  • open "director detail page"
  • go back
  • open another "director detail page"
    At the first moment you'll see old data and after some time correct data will be shown.

You should show spinner while flux-action is in processing instead of old data from flux-store.

see what happens when I run "npm test"

ERROR in ./test/spec/components/app.test.jsx
Module not found: Error: Cannot resolve module 'utils/flux' in /Users/vinicius/remote/P-D/react-example-filmdb/test/spec/components
@ ./test/spec/components/app.test.jsx 13:17-38

ERROR in ./test/spec/components/header.test.jsx
Module not found: Error: Cannot resolve module 'utils/flux' in /Users/vinicius/remote/P-D/react-example-filmdb/test/spec/components
@ ./test/spec/components/header.test.jsx 13:17-38

ERROR in ./test/spec/components/lang-picker.test.jsx
Module not found: Error: Cannot resolve module 'utils/flux' in /Users/vinicius/remote/P-D/react-example-filmdb/test/spec/components
@ ./test/spec/components/lang-picker.test.jsx 17:17-38

ERROR in ./test/spec/components/profile.test.jsx
Module not found: Error: Cannot resolve module 'utils/flux' in /Users/vinicius/remote/P-D/react-example-filmdb/test/spec/components
@ ./test/spec/components/profile.test.jsx 19:17-38

ERROR in ./test/spec/components/users.test.jsx
Module not found: Error: Cannot resolve module 'utils/flux' in /Users/vinicius/remote/P-D/react-example-filmdb/test/spec/components
@ ./test/spec/components/users.test.jsx 13:17-38

ERROR in ./test/spec/stores/users.test.js
Module not found: Error: Cannot resolve module 'utils/flux' in /Users/vinicius/remote/P-D/react-example-filmdb/test/spec/stores
@ ./test/spec/stores/users.test.js 9:17-38

ERROR in ./test/spec/utils/alt-resolver.test.js
Module not found: Error: Cannot resolve module 'utils/flux' in /Users/vinicius/remote/P-D/react-example-filmdb/test/spec/utils
@ ./test/spec/utils/alt-resolver.test.js 13:17-38

ERROR in ./test/spec/components/header.test.jsx
Module not found: Error: Cannot resolve module 'components/header' in /Users/vinicius/remote/P-D/react-example-filmdb/test/spec/components
@ ./test/spec/components/header.test.jsx 29:24-52

ERROR in ./test/spec/components/lang-picker.test.jsx
Module not found: Error: Cannot resolve module 'components/shared/lang-picker' in /Users/vinicius/remote/P-D/react-example-filmdb/test/spec/components
@ ./test/spec/components/lang-picker.test.jsx 25:34-74

ERROR in ./test/spec/components/profile.test.jsx
Module not found: Error: Cannot resolve module 'components/profile' in /Users/vinicius/remote/P-D/react-example-filmdb/test/spec/components
@ ./test/spec/components/profile.test.jsx 23:25-54

ERROR in ./test/spec/components/users.test.jsx
Module not found: Error: Cannot resolve module 'components/users' in /Users/vinicius/remote/P-D/react-example-filmdb/test/spec/components
@ ./test/spec/components/users.test.jsx 25:23-50
INFO [karma]: Karma v0.12.37 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 43.0.2357 (Mac OS X 10.10.3)]: Connected on socket 3EwjrKjnnEZ8JlbieM9D with id 22349418
Chrome 43.0.2357 (Mac OS X 10.10.3) ERROR
Uncaught Error: Cannot find module "utils/flux"
at /Users/vinicius/remote/P-D/react-example-filmdb/tests.webpack.js:4518:0 <- null:0:0

"You may need an appropriate loader to handle this file type" after "npm install"

Hello

See below - I get quite alot of errors when trying to install with "npm install". ANy ideas what I can od to fix?

thanks!

[email protected] postinstall /var/www/www.ug.guru/htmlroot/react-example-filmdb
npm run build

[email protected] build /var/www/www.ug.guru/htmlroot/react-example-filmdb
webpack --progress --stats --config ./webpack/prod.config.js

30% 1/3 build modules[boostrap-sass-loader]: styleLoader: /var/www/www.ug.guru/htmlroot/react-example-filmdb/node_modules/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":true}!style-loader!css-loader!sass-loader
43% 5/9 build modules[boostrap-sass-loader]: bootstrap-sass location: /var/www/www.ug.guru/htmlroot/react-example-filmdb/node_modules/bootstrap-sass/assets
[boostrap-sass-loader]: Setting: $icon-font-path: "../../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
[boostrap-sass-loader]: fileName for preBootstrapCustomizations: /var/www/www.ug.guru/htmlroot/react-example-filmdb/app/styles/_pre-bootstrap-customizations.scss
[boostrap-sass-loader]: fileName for bootstrapCustomizations: /var/www/www.ug.guru/htmlroot/react-example-filmdb/app/styles/_bootstrap-customizations.scss
[boostrap-sass-loader]: fileName for mainSass: /var/www/www.ug.guru/htmlroot/react-example-filmdb/app/styles/_main.scss
68% 554/572 build modules[boostrap-sass-loader]: bootstrap-sass location: /var/www/www.ug.guru/htmlroot/react-example-filmdb/node_modules/bootstrap-sass/assets
[boostrap-sass-loader]: Setting: $icon-font-path: "../../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
[boostrap-sass-loader]: fileName for preBootstrapCustomizations: /var/www/www.ug.guru/htmlroot/react-example-filmdb/app/styles/_pre-bootstrap-customizations.scss
[boostrap-sass-loader]: fileName for bootstrapCustomizations: /var/www/www.ug.guru/htmlroot/react-example-filmdb/app/styles/_bootstrap-customizations.scss
[boostrap-sass-loader]: fileName for mainSass: /var/www/www.ug.guru/htmlroot/react-example-filmdb/app/styles/_main.scss
Hash: d929b9ca6bea8ac8143e
Version: webpack 1.10.0
Time: 31052ms
Asset Size Chunks Chunk Names
b9d01ac1742192a7c9d30f3fe346a9f4.woff 25 kB [emitted]
4d9f3f9e5195e7b074bb63ba4ce42208.eot 21.4 kB [emitted]
1d2af757de4340d6b644360e517a2a47.ttf 45.3 kB [emitted]
f7c2b4b747b1a225eb8dee034134a1b0.eot 60.8 kB [emitted]
2980083682e94d33a66eef2e7d612519.svg 313 kB [emitted]
706450d7bba6374ca02fe167d86685cb.ttf 122 kB [emitted]
88e897b6e48f9b57cbed1ad9256f18ee.svg 71.8 kB [emitted]
97493d3f11c0a3bd5cbd959f5d19b699.woff2 56.8 kB [emitted]
d9ee23d59d0e0e727b51368b458a0bff.woff 71.5 kB [emitted]
app-823767efa2d3125d8569.js 681 kB 0 [emitted] app
app-823767efa2d3125d8569.css 103 kB 0 [emitted] app
app-823767efa2d3125d8569.js.map 5.51 MB 0 [emitted] app
app-823767efa2d3125d8569.css.map 105 bytes 0 [emitted] app
[0] multi app 40 bytes {0} [built]
+ 570 hidden modules

ERROR in .//react-router/modules/components/DefaultRoute.js
Module parse failed: /var/www/www.ug.guru/htmlroot/react-example-filmdb/node_modules/react-router/modules/components/DefaultRoute.js Line 11: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| * route hierarchy.
| */
| class DefaultRoute extends Route {}
|
| // TODO: Include these in the above class definition
@ ./
/react-router/modules/index.js 1:23-59

ERROR in .//react-router/modules/components/NotFoundRoute.js
Module parse failed: /var/www/www.ug.guru/htmlroot/react-example-filmdb/node_modules/react-router/modules/components/NotFoundRoute.js Line 12: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| * route hierarchy.
| */
| class NotFoundRoute extends Route {}
|
| // TODO: Include these in the above class definition
@ ./
/react-router/modules/index.js 3:24-61

ERROR in .//react-router/modules/components/Redirect.js
Module parse failed: /var/www/www.gu.guru/htmlroot/react-example-filmdb/node_modules/react-router/modules/components/Redirect.js Line 8: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| * redirects to another route when it matches.
| */
| class Redirect extends Route {}
|
| // TODO: Include these in the above class definition
@ ./
/react-router/modules/index.js 4:19-51

ERROR in .//react-router/modules/components/RouteHandler.js
Module parse failed: /var/www/www.ug.guru/htmlroot/react-example-filmdb/node_modules/react-router/modules/components/RouteHandler.js Line 12: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| * when routes are nested.
| */
| class RouteHandler extends React.Component {
|
| getChildContext() {
@ ./
/react-router/modules/index.js 6:24-60

ERROR in .//react-router/modules/components/Route.js
Module parse failed: /var/www/www.ug.guru/htmlroot/react-example-filmdb/node_modules/react-router/modules/components/Route.js Line 46: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| * If no handler is provided for the route, it will render a matched child route.
| */
| class Route extends React.Component {
|
| render() {
@ ./
/react-router/modules/index.js 5:16-45

ERROR in .//react-router/modules/locations/HistoryLocation.js
Module parse failed: /var/www/www.ug.guru/htmlroot/react-example-filmdb/node_modules/react-router/modules/locations/HistoryLocation.js Line 30: Unexpected token (
You may need an appropriate loader to handle this file type.
| var HistoryLocation = {
|
| addChangeListener(listener) {
| _listeners.push(listener);
|
@ ./
/react-router/modules/index.js 10:26-64

ERROR in .//react-router/modules/components/Link.js
Module parse failed: /var/www/www.ug.guru/htmlroot/react-example-filmdb/node_modules/react-router/modules/components/Link.js Line 31: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| * <Link to="showPost" params={{ postID: "123" }} query={{ show:true }}/>
| */
| class Link extends React.Component {
|
| handleClick(event) {
@ ./
/react-router/modules/index.js 2:15-43

ERROR in .//react-router/modules/locations/RefreshLocation.js
Module parse failed: /var/www/www.ug.guru/htmlroot/react-example-filmdb/node_modules/react-router/modules/locations/RefreshLocation.js Line 11: Unexpected token (
You may need an appropriate loader to handle this file type.
| var RefreshLocation = {
|
| push(path) {
| window.location = path;
| },
@ ./
/react-router/modules/index.js 11:26-64

ERROR in .//react-router/modules/locations/HashLocation.js
Module parse failed: /var/www/www.ug.guru/htmlroot/react-example-filmdb/node_modules/react-router/modules/locations/HashLocation.js Line 50: Unexpected token (
You may need an appropriate loader to handle this file type.
| var HashLocation = {
|
| addChangeListener(listener) {
| _listeners.push(listener);
|
@ ./
/react-router/modules/index.js 9:23-58

ERROR in .//react-router/modules/locations/StaticLocation.js
Module parse failed: /var/www/www.ug.guru/htmlroot/react-example-filmdb/node_modules/react-router/modules/locations/StaticLocation.js Line 12: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| * only the path that was used in the request.
| */
| class StaticLocation {
|
| constructor(path) {
@ ./
/react-router/modules/index.js 12:25-62

ERROR in .//react-router/modules/locations/TestLocation.js
Module parse failed: /var/www/www.ug.guru/htmlroot/react-example-filmdb/node_modules/react-router/modules/locations/TestLocation.js Line 8: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| * A location that is convenient for testing and does not require a DOM.
| */
| class TestLocation {
|
| constructor(history) {
@ ./
/react-router/modules/index.js 13:23-58

ERROR in .//react-router/modules/Navigation.js
Module parse failed: /var/www/www.ug.guru/htmlroot/react-example-filmdb/node_modules/react-router/modules/Navigation.js Line 31: Unexpected token (
You may need an appropriate loader to handle this file type.
| * name, URL parameters, and query values.
| */
| makePath(to, params, query) {
| return this.context.router.makePath(to, params, query);
| },
@ ./
/react-router/modules/index.js 19:21-44

ERROR in .//react-router/modules/Route.js
Module parse failed: /var/www/www.ug.guru/htmlroot/react-example-filmdb/node_modules/react-router/modules/Route.js Line 8: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| var _currentRoute;
|
| class Route {
|
| /**
@ ./
/react-router/modules/index.js 22:22-40 23:29-47 24:30-48 25:25-43

ERROR in .//react-router/modules/State.js
Module parse failed: /var/www/www.ug.guru/htmlroot/react-example-filmdb/node_modules/react-router/modules/State.js Line 30: Unexpected token (
You may need an appropriate loader to handle this file type.
| * Returns the current URL path.
| */
| getPath() {
| return this.context.router.getCurrentPath();
| },
@ ./
/react-router/modules/index.js 20:16-34

ERROR in .//react-router/modules/PropTypes.js
Module parse failed: /var/www/www.ug.guru/htmlroot/react-example-filmdb/node_modules/react-router/modules/PropTypes.js Line 10: Unexpected token (
You may need an appropriate loader to handle this file type.
| * Indicates that a prop should be falsy.
| */
| falsy(props, propName, componentName) {
| if (props[propName])
| return new Error(<${componentName}> should not have a "${propName}" prop);
@ ./
/react-router/modules/createRouter.js 16:16-38

ERROR in .//react-router/modules/Match.js
Module parse failed: /var/www/www.ug.guru/htmlroot/react-example-filmdb/node_modules/react-router/modules/Match.js Line 41: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| }
|
| class Match {
|
| /**
@ ./
/react-router/modules/createRouter.js 20:12-30

ERROR in .//react-router/modules/PathUtils.js
Module parse failed: /var/www/www.ug.guru/htmlroot/react-example-filmdb/node_modules/react-router/modules/PathUtils.js Line 47: Unexpected token ,
You may need an appropriate loader to handle this file type.
|
| return {
| pattern,
| escapedSource,
| paramNames,
@ ./
/react-router/modules/createRouter.js 23:16-38
Child extract-text-webpack-plugin:
+ 12 hidden modules
[email protected] node_modules/koa-body-parser

[email protected] node_modules/restful.js

[email protected] node_modules/modularized-normalize-scss

[email protected] node_modules/formsy-react

[email protected] node_modules/flowcheck-loader
└── [email protected] ([email protected], [email protected])

[email protected] node_modules/jscs-loader
├── [email protected]
├── [email protected] ([email protected], [email protected])
└── [email protected] ([email protected], [email protected])

[email protected] node_modules/eslint-loader
├── [email protected]
└── [email protected] ([email protected], [email protected])

[email protected] node_modules/extract-text-webpack-plugin
├── [email protected]
├── [email protected] ([email protected])
└── [email protected] ([email protected], [email protected])

[email protected] node_modules/style-loader
└── [email protected] ([email protected], [email protected])

[email protected] node_modules/sass-loader
└── [email protected] ([email protected], [email protected])

[email protected] node_modules/isparta-loader
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
ubuntu@ip-xx-xx-xx-xx:/var/www/www.ug.guru/htmlroot/react-example-filmdb$

Great example - but stupid questions

I am having trouble replicating and building the example on my mac air. It now build but ' npm start dev' provides me with a non-styled view and I get the network error! with a retry button. My assumption is has something to do with connecting to the mongodb environment.

Is there a specific database i need to set up with certain users already?

Any help would be greatly appreciated!!!

io.js no more a dependancy?

I have been looking for a good boilerplate example app and this came close to perfect but then I noticed that some frameworks like iojs are now deprecated, so this repo needs some updates. Here is what io.js website states:

io.js has merged with the Node.js project again.
There won't be any further separate io.js releases (except for critical security fixes). All of the features in io.js are available in Node.js v4 and above.

@tomaash Do you plan to update this repo?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.