combine/universal-react-redux

🧐 A sensible universal starter kit for React + Redux

universal-react-redux's Issues

Why copy server path into dist folder ?

I noticed that the command prod:build:server copy server folder into public dist folder.
Server side code is therefore served by express in HTTP.
Is it wanted or is it a mistake ?

I suggest to build public files into dist/public and serve this directory with express rather than entiere dist directory

Following links on Chrome forces hard reload

When clicking the links in the header on a fresh install, the browser reloads the entire page rather than changing the routes using the history api.

`if [ "$NODE_ENV" = "production" ]; then npm run build:production; fi`

Can't do npm install. a have done all what you wrote at readme.md

my system:

• windows 10 x64
• node 6.2.2
• npm latest

npm-debug.txt

Add server-side HMR

It could be a great alternative to nodemon

What do you think ?

Upgrade to react-redux 5.0.0

Material ui integration

Good job. I wish to know if this project supports material ui integration. I have tried with other similar projects to no avail.

Please let me know.

HMR on Android not working

Your project is wonderful, congratulations.

The only thing which is not working for me is HMR in the Android emulator. Is that supposed to work somehow?

How to fetch component data

Hi @calvinl!

First of all, thanks for your work in this starter kit. I'm getting started with react-redux ecosystem and I would like to know where is the best place to retrieve component data. I saw that you are using isomorphic-fetch. Are you planning to release some kind of example (e.g todo app)? Or could you give me some advice how to retrieve data using your starter kit?

Errors when trying to add vendor CSS

Currently, normal .css files are processed through css-loader and sass-loader. This seems to cause issues when importing a vendor css file.

Unable to start application using yarn start

C:\Research\GIT\Public\universal-react-redux>yarn start
yarn start v0.27.5
$ better-npm-run dev:start
running better-npm-run in C:\Research\GIT\Public\universal-react-redux
Executing script: dev:start

to be executed: "npm run dev:start:client & npm run dev:start:server"

[email protected] dev:start:client C:\Research\GIT\Public\universal-react-redux
better-npm-run dev:start:client

running better-npm-run in C:\Research\GIT\Public\universal-react-redux
Executing script: dev:start:client

to be executed: "npx babel-node webpack/development.client.babel"
npx: installed 1 in 9.304s
Path must be a string. Received undefined
C:\Research\GIT\Public\universal-react-redux\node_modules\babel-cli\bin\babel-node.js
path.js:28
throw new TypeError('Path must be a string. Received ' + inspect(path));
^

TypeError: Path must be a string. Received undefined
at assertPath (path.js:28:11)
at Object.join (path.js:489:7)
at Object. (C:/Research/GIT/Public/universal-react-redux/webpack/base.js:78:16)
at Module._compile (module.js:652:30)
at loader (C:\Research\GIT\Public\universal-react-redux\node_modules\babel-register\lib\node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (C:\Research\GIT\Public\universal-react-redux\node_modules\babel-register\lib\node.js:154:7)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev:start:client: `better-npm-run dev:start:client

After clean install, cannot find module 'kind-of'

First install, followed instructions. When npm start, I first got:

Error: Cannot find module 'kind-of' at Function.Module._resolveFilename (module.js:326:15) at Function.Module._load (module.js:277:25) at Module.require (module.js:354:17) at require (internal/module.js:12:17) at Object.<anonymous> (/Users/rd/Sites/lc2/react-redux-starter/node_modules/is-number/index.js:10:14) at Module._compile (module.js:398:26) at Object.Module._extensions..js (module.js:405:10) at Module.load (module.js:344:32) at Function.Module._load (module.js:301:12) at Module.require (module.js:354:17)

Then, I did npm i kind-of --save, and the error went away.

No idea if it should be dev or non dev dependency, and whether or not there is something specific about my setup, so instead of proposing a package.json patch myself, I let you decide having the overall information what is to be done.

TY.

babel-jest is missing

tests do not work correctly out of the box, due to the import error mentioned here: jestjs/jest#2081

installing babel-jest as suggested in that thread fixes this issue.

Can't install on Windows 10

I deleted "postinstall": "if [ \"$NODE_ENV\" = \"production\" ]; then yarn run prod:build; fi" from package.json and try to install but got an error.

Your boilerplate is suit good for me, but this bug make me unhappy(

TypeError: Cannot read property 'visitClass' of undefined

When running npm start.

Add svg loading to svg files

I'm having some trouble loading svg files into the project

Module not found: Error: Can't resolve

Just tried adding svg loader test to base.config but nothing seems to change...

Example Crashes on npm start

Here's the attached log

➜  react-redux-starter git:(master) npm start

> [email protected] start /Users/Peter/code/community/react-redux-starter
> npm run build:development && npm run start:development


> [email protected] build:development /Users/Peter/code/community/react-redux-starter
> $(npm bin)/webpack --progress --colors --display-error-details --config webpack/config.development.js

Hash: e43d9fd4afc3baa58ff4
Version: webpack 1.13.1
Time: 12242ms
                                 Asset      Size  Chunks             Chunk Names
  f4769f9bdb7466be65088239c12046d1.eot   20.1 kB          [emitted]
448c34a56d699c29117adc64c43affeb.woff2     18 kB          [emitted]
 fa2772327f55d8198301fdb8bcfc8158.woff   23.4 kB          [emitted]
  e18bbf611f2a2e43afc071aa2f4e1512.ttf   45.4 kB          [emitted]
  89889688147bd7575d6327160d64e760.svg    109 kB          [emitted]
                             bundle.js   1.55 MB       0  [emitted]  main
                            styles.css    152 kB       0  [emitted]  main
                         bundle.js.map   1.91 MB       0  [emitted]  main
                        styles.css.map  87 bytes       0  [emitted]  main
   [0] multi main 28 bytes {0} [built]
    + 913 hidden modules
Child extract-text-webpack-plugin:
        + 7 hidden modules

> [email protected] start:development /Users/Peter/code/community/react-redux-starter
> npm run start:development:client & npm run start:development:server


> [email protected] start:development:server /Users/Peter/code/community/react-redux-starter
> $(npm bin)/nodemon server


> [email protected] start:development:client /Users/Peter/code/community/react-redux-starter
> node webpack/config.development.hot

Firing up Wepback dev server...
🚧 Webpack client dev-server listening on http://localhost:3001 with publicPath:http://localhost:3001/dist/
[nodemon] 1.9.2
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: server/**/*.js server/**/*.json common/layouts/server.html
[nodemon] starting `node server`
module.js:442
    throw err;
    ^

Error: Cannot find module '../webpack/config.dev'
    at Function.Module._resolveFilename (module.js:440:15)
    at Function._module3.default._resolveFilename (/Users/Peter/code/community/react-redux-starter/node_modules/require-hacker/babel-transpiled-modules/require hacker.js:403:34)
    at Function.Module._load (module.js:388:25)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (config.js:4:21)
    at Module._compile (module.js:541:32)
    at loader (/Users/Peter/code/community/react-redux-starter/node_modules/babel-register/lib/node.js:158:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/Peter/code/community/react-redux-starter/node_modules/babel-register/lib/node.js:168:7)
    at Module.load (module.js:458:32)
[nodemon] app crashed - waiting for file changes before starting...
Time: 8219ms
                                 Asset     Size  Chunks             Chunk Names
  f4769f9bdb7466be65088239c12046d1.eot  20.1 kB          [emitted]
  e18bbf611f2a2e43afc071aa2f4e1512.ttf  45.4 kB          [emitted]
 fa2772327f55d8198301fdb8bcfc8158.woff  23.4 kB          [emitted]
448c34a56d699c29117adc64c43affeb.woff2    18 kB          [emitted]
  89889688147bd7575d6327160d64e760.svg   109 kB          [emitted]
                             bundle.js  2.28 MB       0  [emitted]  main
webpack: bundle is now VALID.
^C

Switch to immutabable data

It could be great to add a library like ImmutableJS on the redux store

Updating the URL directly in the browser doesn't affect React Router

I have a very weird issue. I'm not sure if this is expected behaviour or a bug.

Assume that we are on route /example/2 and I change the url of the browser to point to /example. The page reloads but the route loaded is still /example/2

My guess is the redux state store in the Local storage forces the previous route to be reloaded since the route change wasn't triggered from the page itself but the browser url. But I thought this would be handled by the universal routing.

What am I missing here? is there any way I can solve this problem?

[Question] Pre fetch data before react renders

Similarly, this is a feature that Next.js has provided with getInitialProps function (if you might already know, it basically giving us the possibility to run redux actions to prefetch data from backend, so the component will already has data to render with). Has anyone tried it ? any help would be great because Next.js is the last thing I want to use for my work. Thanks~

Switch to styled-components

Because it's dope.

CSS base/_style not counted as part of style

Hi,

I'm unable to configure webpack to build the .scss files from the path common/css/base and manage them as hot reload

Any idea ?

Is it ok if I work toward a simpler webpack config ?

I notice that the production webpack config is not working at all (using HMR, etc.).

Is it ok if I work toward a simpler configuration for webpack, keeping features the same for development?

The idea would be to

1. have a very readable configuration (as in python's «Explicit is better than implicit.»)
2. have the minimum duplication possible (plugin definitions, but more importantly configuration variables that for now are split between a lot of file, and that do not have a lot of meaning in their names)

MissingEnvVarsError on yarn start

yarn start v0.27.5
$ better-npm-run dev:build && better-npm-run dev:start
running better-npm-run in /Users/alexandergolovanov/Node/universal-react-redux
Executing script: dev:build

to be executed: yarn run babel-node -- ./script/build webpack/development.js 

/Users/alexandergolovanov/Node/universal-react-redux/node_modules/dotenv-safe/index.js:37
            throw new MissingEnvVarsError(allowEmptyValues, options.path || '.env', sample, missing, dotenvResult.error);
            ^
MissingEnvVarsError: The following variables are defined in .env.example but are not defined in the environment: APPLICATION_PORT, ASSET_HOST, WEBPACK_OUTPUT_PATH, DEV_SERVER_PORT, DEV_SERVER_HOSTNAME.
Make sure to add them to .env or directly to the environment.
If you expect any of these missing variables to be empty, you can use the allowEmptyValues option: 

require('dotenv-safe').load({
  allowEmptyValues: true
});
Also, the following error was thrown when trying to read variables from .env: ENOENT: no such file or directory, open '.env'
    at Object.config (/Users/alexandergolovanov/Node/universal-react-redux/node_modules/dotenv-safe/index.js:37:19)
    at Object.<anonymous> (/Users/alexandergolovanov/Node/universal-react-redux/webpack/base.js:1:24)
    at Module._compile (module.js:569:30)
    at loader (/Users/alexandergolovanov/Node/universal-react-redux/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/alexandergolovanov/Node/universal-react-redux/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
error Command failed with exit code 1.
error Command failed with exit code 1.

And then with allowEmptyValues: true

yarn start v0.27.5
$ better-npm-run dev:build && better-npm-run dev:start
running better-npm-run in /Users/alexandergolovanov/Node/universal-react-redux
Executing script: dev:build

to be executed: yarn run babel-node -- ./script/build webpack/development.js 

/Users/alexandergolovanov/Node/universal-react-redux/node_modules/dotenv-safe/index.js:37
            throw new MissingEnvVarsError(allowEmptyValues, options.path || '.env', sample, missing, dotenvResult.error);
            ^
MissingEnvVarsError: The following variables are defined in .env.example but are not defined in the environment: APPLICATION_PORT, ASSET_HOST, WEBPACK_OUTPUT_PATH, DEV_SERVER_PORT, DEV_SERVER_HOSTNAME.
Make sure to add them to .env or directly to the environment.
Also, the following error was thrown when trying to read variables from .env: ENOENT: no such file or directory, open '.env'
    at Object.config (/Users/alexandergolovanov/Node/universal-react-redux/node_modules/dotenv-safe/index.js:37:19)
    at Object.<anonymous> (/Users/alexandergolovanov/Node/universal-react-redux/webpack/base.js:1:24)
    at Module._compile (module.js:569:30)
    at loader (/Users/alexandergolovanov/Node/universal-react-redux/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/alexandergolovanov/Node/universal-react-redux/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
error Command failed with exit code 1.
error Command failed with exit code 1.

Environment Variables for heroku

I tried following the readme on how to deploy the app to heroku, but it seems I still lacks understanding how should I setup the environment variables to heroku. is there any open example on what variables should I set on it ? what are the differences with the one in .env.example values ?

Thanks

Chromium: the checksum was invalid

I'm a newer in NodeJS. Appreciate for your work and appologize if this is something trouble you.

Following the readme install and start, Chromium console warnings here:

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) /a><a style="cursor:pointer;font-weight:
 (server) /a><a style="cursor:text;font-weight:bol

Things just work well but I don't know if this warning helpful.

Is there a reason that store.js is split between dev and prod ?

Before I suggest any code about that, I was wondering if there is actually a reason for the split. I understand that the two factories are not doing the exact same thing, but using conditions that can even be simplified by webpack, one factory can achieve the goals of both dev and prod.

What do you think? If there is no reason, I still need a bit of cleanup in my code but I have a working simplification here.

Also, I'm wondering if it would be ok with you to define the same variables as the webpack "DefinePlugin" defines as globals in server.js, so one can do conditionals like if (__DEVELOPMENT) or if(__PRODUCTION__), etc.

Depending on what you agree on or not, I'll submit patches.

Production build

Why I don't see when I'm doing build index.html file in dist folder?

Upgrade to Webpack 2.2

Import image from containers

I'm facing a problem with ISOtools and babel.
I can't import or require an image from the common folder
The output when server is starting is

/var/www/react/node_modules/babel-core/lib/transformation/file/index.js:590
      throw err;
      ^

SyntaxError: /var/www/react/common/images/favicon.png: Unexpected character '�' (1:0)
> 1 | �PNG
    | ^
  2 |
  3 |
[nodemon] app crashed - waiting for file changes before starting...

My image is correctly intepreted by webpack because it's present in the webpack-assets.json

Any idea ?

react-loadable.json not found

I installed the project and when I run npm run prod:build I received this error:
Module not found: Error: Can't resolve '../../react-loadable.json'

This file does not exists and only is created after the build, which fails.

Add Jest for testing UI components

Reintegrate cordova support

Would be nice to have a develop-cordova branch while it's being worked on as well. Thanks.

Switch to babel-plugin-module-resolver for aliased paths

Including fonts in base _fonts.scss

I'm unable to use the Google fonts via @import in the ./common/css/base/_fonts.scss partial.

It seems as if the @import statement is being rendered rather than the contents of the font url request.

For instance, if I clone this repo and simply add another Font import underneath the included "Open Sans" @import url('https://fonts.googleapis.com/css?family=Roboto'); - I'm unable to reference this Roboto font.

Am I missing a step here?! Thanks for any help.