foxhound87/rfx-stack

RFX Stack - Universal App

rfx-stack's Issues

Maybe remove deprecated webpack DedupePlugin

It's used there:
https://github.com/foxhound87/rfx-stack/blob/master/webpack/config.client.build.js#L62

"DedupePlugin: This plugin was removed from webpack. remove it from configuration."
https://github.com/webpack/webpack/blob/5b2afd0bf742e25f8ed118358aaa7b2228cfb625/lib/optimize/DedupePlugin.js#L10

async import state

I have specific stores for some routes, would it be possible to requires those async? I know it's possible with redux. Maybe pass the store to react-router? I'll se what I can do

Warnings while running `web:dev`

osx 10.11
node 6.3.1

WARNING in ./src/shared/stores/ui.js

/Volumes/Data/development/dev/one/src/shared/stores/ui.js
  87:14  warning  Unexpected console statement  no-console

✖ 1 problem (0 errors, 1 warning)


WARNING in ./~/ajv/lib/async.js
Module not found: Error: Cannot resolve module 'regenerator' in /Volumes/Data/development/dev/one/node_modules/ajv/lib
 @ ./~/ajv/lib/async.js 95:20-47

WARNING in ./~/ajv/lib/async.js
Module not found: Error: Cannot resolve module 'nodent' in /Volumes/Data/development/dev/one/node_modules/ajv/lib
 @ ./~/ajv/lib/async.js 116:26-48

WARNING in ./~/ajv/lib/compile/index.js
Module not found: Error: Cannot resolve module 'js-beautify' in /Volumes/Data/development/dev/one/node_modules/ajv/lib/compile
 @ ./~/ajv/lib/compile/index.js 8:42-69
webpack: bundle is now VALID.
[BS] Proxying: http://localhost:3000
[BS] Access URLs:
 ----------------------------------
       Local: http://localhost:3100
    External: http://10.0.0.3:3100
 ----------------------------------
          UI: http://localhost:3001
 UI External: http://10.0.0.3:3001
 ----------------------------------
route: /
Warning: Unknown prop `onTouchTap` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by Overlay)
    in Overlay (created by Drawer)
    in div (created by Drawer)
    in Drawer (created by AppNav)
    in AppNav (created by AppLayout)
    in div (created by MatchMediaProvider)
    in MatchMediaProvider (created by AppLayout)
    in AppLayout (created by RouterContext)
    in RouterContext
    in ContextProvider
    in MuiThemeProvider
route: /favicon.ico

Invalid checksum warning ?

Is anyone else seeing this React Warning upon running npm run server:dev ?

React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) tid="3"><div style="position:fixed;heigh
(server) tid="3"><div style="button:[object Objec.....

Just curious if other folks have seen this.
anyway, i'll dig into and see if I can fix....

Error running npm run web:dev on windows

Hi

When I try running your project web part on windows 10 machine I get the following error:

D:\DEV\react\rfx\node_modules\webpack-dev-middleware\middleware.js:106
                        if(err) throw err;
                                ^
 Error: invalid argument
    at pathToArray (D:\DEV\react\rfx\node_modules\memory-fs\lib\MemoryFileSystem.js:44:10)
    at MemoryFileSystem.mkdirpSync (D:\DEV\react\rfx\node_modules\memory-fs\lib\MemoryFileSystem.js:139:13)
    at MemoryFileSystem.(anonymous function) [as mkdirp] (D:\DEV\react\rfx\node_modules\memory-fs\lib\MemoryFileSystem.js:279:34)
    at Compiler.<anonymous> (D:\DEV\react\rfx\node_modules\webpack\lib\Compiler.js:229:25)
    at Compiler.applyPluginsAsync (D:\DEV\react\rfx\node_modules\tapable\lib\Tapable.js:60:69)
    at Compiler.emitAssets (D:\DEV\react\rfx\node_modules\webpack\lib\Compiler.js:226:7)
    at Watching.<anonymous> (D:\DEV\react\rfx\node_modules\webpack\lib\Compiler.js:54:18)
    at D:\DEV\react\rfx\node_modules\webpack\lib\Compiler.js:403:12
    at Compiler.next (D:\DEV\react\rfx\node_modules\tapable\lib\Tapable.js:67:11)
    at Compiler.<anonymous> (D:\DEV\react\rfx\node_modules\webpack\lib\CachePlugin.js:40:4)
    at Compiler.applyPluginsAsync (D:\DEV\react\rfx\node_modules\tapable\lib\Tapable.js:71:13)
    at Compiler.<anonymous> (D:\DEV\react\rfx\node_modules\webpack\lib\Compiler.js:400:9)
    at Compilation.<anonymous> (D:\DEV\react\rfx\node_modules\webpack\lib\Compilation.js:577:13)
    at Compilation.applyPluginsAsync (D:\DEV\react\rfx\node_modules\tapable\lib\Tapable.js:60:69)
    at Compilation.<anonymous> (D:\DEV\react\rfx\node_modules\webpack\lib\Compilation.js:572:10)
    at Compilation.applyPluginsAsync (D:\DEV\react\rfx\node_modules\tapable\lib\Tapable.js:60:69)

My npm-debug.log file is as follows:

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'web:dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'preweb:dev', 'web:dev', 'postweb:dev' ]
5 info lifecycle [email protected]~preweb:dev: [email protected]
6 silly lifecycle [email protected]~preweb:dev: no script for preweb:dev, continuing
7 info lifecycle [email protected]~web:dev: [email protected]
8 verbose lifecycle [email protected]~web:dev: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~web:dev: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;D:\DEV\react\rfx\node_modules\.bin;C:\Program Files\nodejs;D:\Home\BAT\;d:\dev\tools\graphicsmagick;C:\Program Files (x86)\Intel\iCLS Client\;C:\Program Files\Intel\iCLS Client\;C:\ProgramData\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files\Microsoft SQL Server\110\Tools\Binn\;C:\Program Files\Git\cmd;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\bin;C:\Program Files (x86)\Skype\Phone\;C:\Program Files\Python2;C:\Users\dariu\.dnx\bin;C:\Program Files\Microsoft DNX\Dnvm\;C:\Program Files (x86)\Windows Kits\8.1\Windows Performance Toolkit\;c:\Program Files\MongoDB\Server\3.2\bin\;C:\Program Files\Microsoft\Web Platform Installer\;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\110\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\120\Tools\Binn\;C:\Program Files\Microsoft SQL Server\120\Tools\Binn\;C:\Program Files\Microsoft SQL Server\120\DTS\Binn\;C:\Program Files (x86)\Microsoft SQL Server\120\Tools\Binn\ManagementStudio\;C:\Program Files (x86)\Microsoft SQL Server\120\DTS\Binn\;C:\Program Files\nodejs\;C:\Program Files\cURL\bin;C:\Users\dariu\.dnx\bin;D:\DEV\Ruby\bin;C:\Users\dariu\AppData\Local\.meteor\;C:\Users\dariu\AppData\Local\atom\bin;C:\Program Files (x86)\Microsoft VS Code\bin;C:\Users\dariu\AppData\Roaming\npm
10 verbose lifecycle [email protected]~web:dev: CWD: D:\DEV\react\rfx
11 silly lifecycle [email protected]~web:dev: Args: [ '/d /s /c',
11 silly lifecycle   'SET NODE_ENV=development & node ./run/start.web.js' ]
12 silly lifecycle [email protected]~web:dev: Returned: code: 1  signal: null
13 info lifecycle [email protected]~web:dev: Failed to exec web:dev script
14 verbose stack Error: [email protected] web:dev: `SET NODE_ENV=development & node ./run/start.web.js`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:245:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:852:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5)
15 verbose pkgid [email protected]
16 verbose cwd D:\DEV\react\rfx
17 error Windows_NT 10.0.10586
18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "web:dev"
19 error node v6.2.1
20 error npm  v3.9.3
21 error code ELIFECYCLE
22 error [email protected] web:dev: `SET NODE_ENV=development & node ./run/start.web.js`
22 error Exit status 1
23 error Failed at the [email protected] web:dev script 'SET NODE_ENV=development & node ./run/start.web.js'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the rfx-stack package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     SET NODE_ENV=development & node ./run/start.web.js
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs rfx-stack
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls rfx-stack
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

api part starts fine. What might be a problem

Many thanks.

Plugin is not defined

Hello, @foxhound87, you created the good boilerplate! Thanks )
But I have the error message with text:

/home/anoru/git/rfx-stack/node_modules/browser-sync-webpack-plugin/index.js:21
Plugin.prototype.apply = function (compiler) {
^

ReferenceError: Plugin is not defined

Can you help me? :)

npm run seed:dev - Seeding Error.

Hey man. Great work on this stack. 👍

Curious though, if you could tell me something about this issue:

When:
npm run seed:dev

Get:

> [email protected] seed:dev /Users/zjh266/Desktop/rfx-stack
> cross-env NODE_ENV=development node ./run/start.seeder.js

/Users/zjh266/Desktop/rfx-stack/src/utils/logger.js:1
(function (exports, require, module, __filename, __dirname) { import log from 'winston';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:387:25)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:16:19)
    at Object.<anonymous> (/Users/zjh266/Desktop/rfx-stack/run/init.js:5:17)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)

npm ERR! Darwin 15.6.0
npm ERR! argv "/Users/zjh266/.nvm/versions/node/v5.8.0/bin/node" "/Users/zjh266/.nvm/versions/node/v5.8.0/bin/npm" "run" "seed:dev"
npm ERR! node v5.8.0
npm ERR! npm  v3.7.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] seed:dev: `cross-env NODE_ENV=development node ./run/start.seeder.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] seed:dev script 'cross-env NODE_ENV=development node ./run/start.seeder.js'.

Looks to me that this isn't babel-fying properly or something?
If I run babel-node on this proceess it actually works fine, but then the globals from the .env aren't detected and it errors in shared/app.js

Again, great work here, thanks for any solutions you can spot.

Error running "npm run web:dev" on ubuntu 16.04 Node 6.9.2 npm 3.10.9

TypeError: Plugin 0 specified in "/root/app/.babelrc" was expected to return a function but returned "undefined"

Tried searching the web but found nothing.

npm install not working on ubuntu 14.04.4

This is probably a user error, but I'm trying to test out the RFX stack on Digital Ocean, and when I run npm install there are a bazillion warnings, followed by these errors:

npm WARN unmet dependency /root/rfx-stack/node_modules/babel-preset-es2015/node_modules/babel-plugin-transform-regenerator requires babel-core@'^6.9.0' but will load
npm WARN unmet dependency /root/rfx-stack/node_modules/babel-core,
npm WARN unmet dependency which is version 6.7.7
npm ERR! Linux 3.13.0-85-generic
npm ERR! argv "/opt/node/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v4.4.5
npm ERR! npm v2.15.5
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants eslint-plugin-react@^4.3.0

Any ideas?

Need less opinionated backend

As much as I like this starter kit, I think it would have much better success if it was a bit less opinionated (or more configurable) on the backend.

I think there are a lot of people who would benefit from a clean react+mobx+react-router stack like this.

But then there is just 0.0{something} percent of people who would use that stack with Feathers.js and out of that just a 0.{something} percent of people who would use Feathers.js specifically with MongoDB instead of one of other 20 database adapters that Feathers.js supports.

Even though I think Feathers.js is really cool (and I didn't even know about it before) and that Feathers does benefit from some promotion, I sadly don't consider MongoDB cool at all.

Since Feathers comes with some really streamlined command line tools to quickly kickstart a backend project with a database of one's choice, I think this project would gain much more popularity, if instead of shipping with fully opinionated backend code, there would be just some written (and ideally copy-pastable) instructions on how to kickstart a Feathers backend yourself.

The written instructions could be for MongoDB instructions no problem. It is just that for non-mongodb people it would be much easier to start a project from scratch rather than first figuring out which parts of existing code they should first delete before new stuff can be implemented.

Please don't consider this as a negative opinion. I really care about this starter and find it as a awesome selection of tools an libraries and I wish it would gain more popularity. I feel that it has great potential in the mobx space but that it might miss its goals just because it goes a little bit too far.

One option would be to split the project into client (react) and server (feathers) code and have an option for other people to contribute different backend solutions. I myself might be willing to write one for Postgres or Rethinkdb.

[Question] Use of UUID in Models/Services

I've been using Mongo/Mongoose for a few years in a MEAN stack app and am trying to figure out some implementation details here. I noticed that the default services (user and post) all generate a UUID (using the setUUID hook), have uuid defined in the model, and in the service config have id: uuid.

What's the main reason for this and not using the builtin Mongo _id property, or Mongoose id virtual?

Enabling the use of id (or _id) in the client side would require the following changes:

• Remove _id from the list of hooks.remove in the SERVICE/hooks.after.js file
• Add toJSON: { virtuals: true }, in the SERVICE/model.js Schema Definition

Light version

Hello, @foxhound87. Thanks for nice boilerplate, but can you make light version of boilerplate in other branch? (without features, and tons pages, components, stores, utils, etc) Only with 1-2 components :)

Migrating to router v4 from v3

Hello,

I am migrating my application to v4 react-router but the application localy seems unresponsive.
It keeps loading with no response.

I tried console.log, debug in /src/web/client.jsx method of renderApp(), but nothing is logged out.

I tried logging in handleRouter()

I tried logging in ssr.js

I am out of thoughts what could cause this.
Maybe any offers on what I should try, maybe there is lower level where I could log something out.
At the moment I don't even know where to start reproducing the issue.

Bluebird.js errors and HMR

Enjoying using rfx-stack on a large project. Thank you for the work.

Was looking at some past issues, but they didn't really address my specific problem.

I am seeing this bluebird.js warning A LOT. to the point it's difficult to use the console.

Warning: a promise was rejected with a non-error: [object String]
    at Manager.eval (eval at <anonymous> (http://localhost:3000/bundle.js:2084:2), <anonymous>:21:15)
    at Socket.eval (eval at <anonymous> (http://localhost:3000/bundle.js:2084:2), <anonymous>:21:15)
From previous event:
    at connected (eval at <anonymous> (http://localhost:3000/bundle.js:5294:2), <anonymous>:15:10)
From previous event:
    at Object.app.authenticate (eval at <anonymous> (http://localhost:3000/bundle.js:5288:2), <anonymous>:45:25)
    at Array.forEach (native)
    at rehydrate (eval at <anonymous> (http://localhost:3000/bundle.js:3974:2), <anonymous>:35:26)

I'm having a difficulty figuring out how to resolve these. They happen:

1. when I make changes and hot reload any pure or stateless component. That includes stateless functional components.
2. Doesn't seem to happen on components that are hooked up to a store via connect

I looked up this:
http://bluebirdjs.com/docs/warning-explanations.html

But to resolve them, I'm not sure where I'd add errors or whatnot without line numbers or files. they're all bundle.js errors

Secondly, I noticed that, config.client.js if I remove:

      new webpack.ProvidePlugin({
        Promise: 'bluebird',
        fetch: 'imports?this=>global!exports?global.fetch!whatwg-fetch',
      }),

It will stop the errors. What exactly is this doing? Is it overriding the normal Promise with a bluebird.js promise? What's the second line doing? My app seemed to work fine without it.

How is bluebird helping?

Sorry for a pretty unspecific issue. Looking for help around hydration.

My basic question is:

• How can I resolve these warnings?
• How can I go about troubleshooting them?
• Can I safely suppress them and go on with my life? How?

Thanks! Hope this isn't too annoying/vague. Thanks for your work.

page total doesn't update when adding new items

Hi,

when I add several items via "Add Random Item" button the "total" page count doesn't get updated. Only once I click i.e. 'next page', then number updates. Seems like it isn't observed.

It's a small thing, nothing serious/urgent/etc.

Many thanks for your hard work on this project!!

universal render and css-modules

Hey Claudio,

css-modules is a very good idea but it's not working properly in isomorphic render.
Server side does not recognise the following code:

import cx from 'classnames';
import styles from './styles.css';
...

class Header extends Component {
    render() {
        return (
            <h1 className={cx('m0', 'py2', 'h4', styles.siteName)} >
...

It seems that the server ignore the styles.siteName class.

Error
Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) "/" class="m0 py2 h4 styles__site-name__
(server) "/" class="m0 py2 h4" data-reactid="15">

I found a topic about this subject on Github css-modules/css-modules#9 (comment)
also it seems to have found a solution css-modules/css-modules#9 (comment)

Maybe we can apply it in rfx-stack too.

Live Linter now applicable on API files during development?

It seems that the linter is not being applied on API files when development server is running. Only when we build:server:api that the linter is applied.

Live Linter on other files are fine.

Using System.import for code splitting seems to mess up the development server

Hey mate!

Since this stack now has Webpack 2 👍 , I thought it would be a great idea to also implement code splitting using React Router's getComponent method.

Here's the new routes.jsx (POC)

import React from 'react';
import Route from 'react-router/lib/Route';
import IndexRoute from 'react-router/lib/IndexRoute';
import AppLayout from './containers/AppLayout';

function handleError(err) {
  // TODO: Error handling
  console.log(err); // eslint-disable-line no-console
}

// Async Components
const NotFound = (nextState, cb) =>
  System.import('./containers/NotFound')
    .then(module => cb(null, module.default))
    .catch(handleError);

const Home = (nextState, cb) =>
  System.import('./containers/Home')
    .then(module => cb(null, module.default))
    .catch(handleError);

const Messages = (nextState, cb) =>
  System.import('./containers/Messages')
    .then(module => cb(null, module.default))
    .catch(handleError);

const Breakpoints = (nextState, cb) =>
  System.import('./containers/Breakpoints')
    .then(module => cb(null, module.default))
    .catch(handleError);

const FormsManagement = (nextState, cb) =>
  System.import('./containers/FormsManagement')
    .then(module => cb(null, module.default))
    .catch(handleError);

export default (
  <Route path="/" component={AppLayout}>
    <IndexRoute getComponent={Home} />
    <Route path="messages" getComponent={Messages} />
    <Route path="breakpoints" getComponent={Breakpoints} />
    <Route path="forms" getComponent={FormsManagement} />
    <Route path="*" getComponent={NotFound} status={404} />
  </Route>
);

When I start in development mode (npm run web:dev), I get:

info:    ------------------------------------------
info:    --------------- RFX STACK ----------------
info:    ------------------------------------------

Webpack is watching the files…

The react/require-extension rule is deprecated. Please use the import/extensions rule from eslint-plugin-import instead.
Hash: 903bf157e548acb81b78
Version: webpack 2.1.0-beta.25
Time: 9351ms
                  Asset     Size  Chunks             Chunk Names
     0.903bf-9fa201c.js  55.6 kB       0  [emitted]
     1.903bf-2ccae62.js  19.7 kB       1  [emitted]
     2.903bf-5d76742.js  4.07 kB       2  [emitted]
     3.903bf-ab1991b.js  9.21 kB       3  [emitted]
     4.903bf-65dc178.js  17.5 kB       4  [emitted]
start.web.dev.bundle.js  3.29 MB       5  [emitted]  main
  [61] multi main 64 bytes {5} [built]
    + 154 hidden modules

and... that's it! I don't see the server actually starting :(

It works in production when running npm run web:prod (with code splitting!)

Any idea's why this might happen?

npm run api:prod cannot find module /api/services/post/config.js

Hi, I can run all the npm commands, but npm run api:prod throws an error:

Error: Cannot find module 'C:/Users/Joe/Documents/GitHub/FXBook/RFX/src/api/services/post/config.js'.
...
npm ERR! Failed at the [email protected] api:prod script 'cross-env NODE_ENV=production node ./run/build/start.api.bundle.js'.

I suspect webpack is unable to discover the feathers js files. Possibly something to do with autoloader.js? I am developing on a Windows 10 machine, fwiw.

warnings

Hello, I got the following client warnings

WARNING in ./src/shared/stores/ui.js

C:\Users\rickm\Documents\Google Drive\Projects\NodeJS\rfx-stack\src\shared\stores\ui.js
87:14 warning Unexpected console statement no-console

✖ 1 problem (0 errors, 1 warning)

---

WARNING in .//ajv/lib/async.js
Module not found: Error: Cannot resolve module 'regenerator' in C:\Users\rickm\Documents\Google Drive\Projects\NodeJS\rfx-stack\node_modules\ajv\lib
@ .//ajv/lib/async.js 95:20-47

WARNING in .//ajv/lib/async.js
Module not found: Error: Cannot resolve module 'nodent' in C:\Users\rickm\Documents\Google Drive\Projects\NodeJS\rfx-stack\node_modules\ajv\lib
@ .//ajv/lib/async.js 116:26-48

WARNING in .//ajv/lib/compile/index.js
Module not found: Error: Cannot resolve module 'js-beautify' in C:\Users\rickm\Documents\Google Drive\Projects\NodeJS\rfx-stack\node_modules\ajv\lib\compile
@ .//ajv/lib/compile/index.js 8:42-69

---

Warning: Unknown prop onTouchTap on

tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
in div (created by Overlay)
in Overlay (created by Drawer)
in div (created by Drawer)
in Drawer (created by AppNav)
in AppNav (created by AppLayout)
in div
in MatchMediaProvider (created by AppLayout)
in AppLayout (created by RouterContext)
in RouterContext
in ContextProvider
in MuiThemeProvider

Adding facebook/google auth

@foxhound87 I noticed that you may have had the same issues as me trying to integrate auth for facebook/google etc. I am having trouble getting those to work. is there a reason why to don't consider auth a 'service' in your app ?
You obviously have more experience with the feathers framework as I am basically going through the 'starter' examples where the auth is a service....
thanks for any insight.

DB agnostic or rethinkDB support

rfx-stack requires mongoose, and I am using feathers-rethinkdb; prefer a single DB. Enhancement supporting a flexible DB or add'l DBs would extend rfx-stack and reduce dependencies. Thanks

Improve debugging in development mode?

RFX Stack is great, thanks for taking the time to work on it and share.

My main issue right now is obscure debugging in development mode - when jumping to error line numbers in Chrome from the console I'm usually confronted with things like this:

eval("'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar 

Making it quite difficult to see where any errors are occurring. Perhaps due to source map settings in WebPack? I'm not very familiar with the build system of RFX stack (yet).

Is that something I'm doing wrong - or is anyone else having this issue?

how to hot reload mobx store

I found "rfx-core" because of react-mobx-react-router4-boilerplate, I think I have done the same thing, but I still can not make mobx store hot reload.
my project is ts-react

Unhandled Rejection 'bluebird.js'

Anyone have this warning when running the current repo? I didn't change anything in the source code.

Unhandled rejection [object Object](No stack trace)
From previous event:
at authenticateSocket (eval at (http://localhost:3100/bundle.js:10160:2), :45:10)
From previous event:
at _default (eval at (http://localhost:3100/bundle.js:2036:2), :26:20)
at eval (eval at (http://localhost:3100/bundle.js:3080:2), :27:36)
at Object. (http://localhost:3100/bundle.js:3080:2)
at webpack_require (http://localhost:3100/bundle.js:556:30)
at fn (http://localhost:3100/bundle.js:87:20)
at Object. (http://localhost:3100/bundle.js:589:19)
at webpack_require (http://localhost:3100/bundle.js:556:30)
at http://localhost:3100/bundle.js:579:37
at http://localhost:3100/bundle.js:582:10

Help with running mongo DB

Hey I love that you are using mobx with react !
I am new to Mongo so I was just curious if you could elaborate on this:
'Run a local mongodb instance before start the server (port 27017).'

I have mongo installed on my Mac but that is as far as Ive gotten.
What is the recommended approach to doing this ?
Thanks

Better name for container component

https://github.com/foxhound87/rfx-stack/blob/master/src/shared/containers/FormsManagement.jsx#L10

Better change it from NotFound to FormsManagement

map is not a function

Hi Claudio,

I'm having trouble running npm run web:dev with the latest rfx-stack. Seems something wrong with mobx-react-form, but I can't figure out what's the problem. Here is the full error.

/home/rich/dev/rfx-stack/node_modules/mobx-react-form/lib/Form.js:256
    return _mobx.observable.map({}) || (0, _mobx.asMap)({});
                            ^

TypeError: _mobx.observable.map is not a function
    at AuthForm.initializer (/home/rich/dev/rfx-stack/node_modules/mobx-react-form/lib/Form.js:256:29)
    at /home/rich/dev/rfx-stack/node_modules/mobx/lib/mobx.js:2573:76
    at /home/rich/dev/rfx-stack/node_modules/mobx/lib/mobx.js:2612:122
    at Array.forEach (native)
    at runLazyInitializers (/home/rich/dev/rfx-stack/node_modules/mobx/lib/mobx.js:2612:82)
    at AuthForm.get [as fields] (/home/rich/dev/rfx-stack/node_modules/mobx/lib/mobx.js:2579:25)
    at AuthForm.select (/home/rich/dev/rfx-stack/node_modules/mobx-react-form/lib/shared/Utils.js:56:54)
    at /home/rich/dev/rfx-stack/node_modules/mobx-react-form/lib/shared/Initializer.js:86:41
    at /home/rich/dev/rfx-stack/node_modules/lodash/_createBaseFor.js:17:11
    at baseForOwn (/home/rich/dev/rfx-stack/node_modules/lodash/_baseForOwn.js:13:20)

Best way to toggle browsersync ?

Love what your doing so far with this @foxhound87 . so i love brwsersync, but im just wondering the cleanest way to toggle it , so I can have 2 clients (browsers) seeing the same list, but with separate views. IE, sort of like a 'chat' app.
Sorry im still wrapping my head around some of the code, but wondering if you had any thoughts ?

Migrating to router v4.

Cannot find module './_baseClone' running api:dev

Error: Cannot find module './_baseClone'
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.Module._load (module.js:276:25)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/home/slikts/rfx-stack/node_modules/babel-core/node_modules/babel-register/node_modules/lodash/cloneDeep.js:1:79)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)

OS: Debian 8
Node: v6.2.2

Updating Service from another service

This is not so much an issue with this stack, but more like a newbie question about putting things together.

Let's say I added a new service called 'review' which 'user' can give to each 'post' service. Then I added a property of the 'post' called 'noOfReviews' which is just a computed value of total number of reviews on each post.

How would you best approach this issue with the current stack?

I tried to add an after-hook to 'review' service at ./api/hooks/
export function noOfReviews() { return (hook, next) => { const post = hook.app.service('post'); id = hook.data.objectid; post.patch(id, { numberOfReviews: 20, }) return next(); }; }

I use 'numberOfReviews: 20' just to see if it fires up

This is the ./api/services/review/hooks.after.js
`import hooks from 'feathers-hooks';
import { noOfReviews } from '~/src/api/hooks/noOfReviews';

export default {
all: [
hooks.remove('_id', '__v'),
],
find: [],
get: [],
create: [
noOfReviews(),
],
update: [],
patch: [],
remove: [],
};`
but doesn't seem to fire up after a new 'review' is created.

Strange initial redraw for routes with System.import in Chrome

To reproduce it:

1. start prod server yarn run web:prod
2. go to some route with imported component with System.import
3. reload this Chrome tab
4. You should see page renders 2 times

It looks like browser draws server generated DOM and then, when component is loaded with ajax, react clears root container then draws new DOM. Maybe this is issue of react-router, but it's good to know if someone else can produce this.

http://recordit.co/2ur8zsuxnh

Was trying ff and safari and didn't saw that flickering.

Chrome: Version 55.0.2883.75 beta (64-bit)
MacOS: 10.11.6

Current Build broken : ESLint Errors and Unhandled Promise Rejections

Trying to run the stack today, I'm suddenly running into errors starting up the web app.

Unmet Peer Dependencies & Unknown ESLint rules:

I ran into the following unmet peer dependencies before getting the server to start:

1. [email protected]
2. [email protected]

In the case of eslint, the newest airbnb rule set uses a rule introduced in [email protected], causing the existing [email protected] version throw unknown rule errors.

environment:

• Commit SHA c562f11
• node v6.9.2
• npm v3.10.9

Repro Steps:

1. Pull latest code
2. Run npm install
3. run npm run api:dev in one terminal, and npm run web:dev in another
4. Observe numerous ESLint errors - fix with npm install eslint@latest. Rerun npm run web:dev
5. Observe the following error:
   route: / (node:75116) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 7): [object Object] (node:75116) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 8): [object Object]
6. Throw up arms in despair

Eslinter on Windows throws absurd errors

Basically, when I clone the repo, I get a boatload of errors for every single client-side file.

Those should be "warnings" at the most. Who cares if the indentation is 8 spaces instead of 6?

I had to disable the linter to get the app to start.

Failed to setup

Hey!

So far I still failed to get the server up & running reliably. First of all, there seems to be some missing deps, I needed to add the following:

+    "babel-plugin-transform-decorators": "^6.6.5",
+    "serve-static": "^1.10.2",

After that I get errors on the build:server task:

ERROR in ./~/css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./src/styles/app.bar.mdl.css
Module build failed: Error: ENOENT: no such file or directory, open '/home/michel/mobservable/rfx-stack/src/styles/_basscss-padding.css'
    at Error (native)
 @ ./src/styles/app.bar.mdl.css 2:18-207

ERROR in ./~/css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./src/styles/app.nav.mdl.css
Module build failed: Error: ENOENT: no such file or directory, open '/home/michel/mobservable/rfx-stack/src/styles/_basscss-layout.css'
    at Error (native)
 @ ./src/styles/app.nav.mdl.css 2:18-207

ERROR in ./~/css-loader!./~/postcss-loader!./src/styles/_global.css
Module build failed: Error: ENOENT: no such file or directory, open '/home/michel/mobservable/rfx-stack/src/styles/_basscss-hide.css'
    at Error (native)
 @ ./src/styles/_global.css 2:18-130

And similar ones on the build:clienttask:

> [email protected] build:client /home/michel/mobservable/rfx-stack
> npm run clean:client && NODE_ENV=production webpack -p --progress


> [email protected] clean:client /home/michel/mobservable/rfx-stack
> rimraf ./public/build

 69% 601/604 build modulesModuleBuildError: Module build failed: ModuleBuildError: Module build failed: Error: ENOENT: no such file or directory, open '/home/michel/mobservable/rfx-stack/src/styles/_basscss-padding.css'
    at Error (native)
    at DependenciesBlock.onModuleBuildFailed (/home/michel/mobservable/rfx-stack/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
    at nextLoader (/home/michel/mobservable/rfx-stack/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
    at /home/michel/mobservable/rfx-stack/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15

So I'm guessing I miss some files or I don't have the correct versions of some dependencies, my npm ls output is:

➜  rfx-stack git:(master) ✗ npm ls --depth=0
[email protected] /home/michel/mobservable/rfx-stack
├── [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]
├── [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]
├── [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]
├── [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]
├── [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]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Hope that helps! I'm really curious to try this out :)

Add 'id' option in order to add update/remove on a POST

FYI, since you have uuid as your id key, you need to add the 'id' option in server/services/post/config.js in order to add full CRUD on Posts. this will override mongo's default '_id' field.
IE:

export default {
  model: 'post',
  namespace: '/post',
  options: {
    id:'uuid',
    paginate: {
      default: 25,
      max: 50,
    },
  },
};

Support for Optimistic Updates (feature request)

Currently, updates to store state which is a client representation of a service is performed by calling 'onCreated', 'onUpdated', 'onRemoved' functions once the service call is successful.

Do you plan to implement optimistic update where the state is immediately updated assuming service call would be successful, and revert the update if the service call was not successful. Something like in Meteor or redux-optimistic-ui.

Deploying to Heroku

Hey,

I'm trying to deploy the stack to Heroku, but having trouble starting it up.
Do you have experience with deploying it to Heroku? If so, could you provide an example of how to do so? What are the changes to .env / other changes that I need to do.

I'm pretty sure the problem is with the HOST that probably should not be set when running on Heroku. To run the API + Server on start, I created this: (in package.json / scripts)

"start": "concurrently --kill-others \"npm run web:prod\" \"npm run api:prod\""

But I'm still getting errors that aren't really helping me :/

Any ideas?

Disabling SSR?

@foxhound87 - We've been diagnosing (and fixing) some crazy SSR issues that happen with simultaneous requests. Basically, the second request corrupts the state of the MobX stores and all sorts of uncertainty results. (I'll be reaching out separately to get your input on that)

Where we are right now however is searching for a solution to disabling SSR for production - basically making it run like web:dev. We're having some trouble since the state and SSR stuff is so integral to the setup - everything we try has resulted in hard errors.

The two main points we are trying to solve:

1. Properly initializing the stores and calling fetchData on the components when the load client-side
2. Removing or replacing the code in src/web/ssr.js to simply render everything client side.

Thoughts?

mobx-react-form "constructor.name" is mangled by uglify. [use --keep-fnames]

Hi Claudio,

Thank you so much for the great rfx-stack and mobx-react-form. I follow and use it a lot.

I've been struggling with this strange issue though. When I set a value of a form field manually, it works in development but not in production environment.

For instance, in the AuthFormLogin.jsx file if I add a button

<button type="button" className="btn" onClick={() => form.update({ email: 'test' })} >Test button</button>

I should be able to set the form field value.

This works in development web:dev, but not in production web:prod. Same with form.$field.set('value'). Any idea?

Thank you much appreciated.

"Items found" not immediately updated after "+ Add New Item" is clicked.

New item is correctly created and shown when I clicked "+ Add New Item". However, the "Items found" number is not automatically updated immediately.

Authenticated routes

The way that the app is structured with jwt tokens being used on the frontend provides a delay in fetching the user (occurring asynchronously). How does one create a way to ensure the user is logged in and if not redirects them away from certain routes? It might be a good issue to tackle in this project and also to provide an example in the application of a page that can only be accessed if you're authenticated.

A newbie's question

I am learning mobx by using your react-mobx-react-router4-boilerplate。But i can not understand the purpose of rfx-core package during reading the source code.Could you give me some directions of understanding rfx-core?

Hot module reloadable stores

I haven't actually run this repo, I'm actually bootstrapping my own but with almost identical code for learning purposes!
I was just curious, upon editing a store class in this repo, are they reloadable allowing to maintain state?