Coder Social home page Coder Social logo

react-redux-starter-kit's Introduction

Deprecation Warning

This project was started at the advent of the Redux ecosystem, and was intended to help users get up and running quickly. Since then, tooling and best practices have evolved tremendously. In order to get the most modern experience possible, I recommend checking out something like create-react-app which is supported by many core React and Redux developers.

You are welcome to use this project if it is a better fit for your needs, but if you are brand new to the ecosystem I highly recommend checking out something that has received more recent updates.

Thank you to everyone who made this project possible over the past year(s).

React Redux Starter Kit

Build Status dependencies devDependency Status js-standard-style

This starter kit is designed to get you up and running with a bunch of awesome front-end technologies.

The primary goal of this project is to provide a stable foundation upon which to build modern web appliications. Its purpose is not to dictate your project structure or to demonstrate a complete real-world application, but to provide a set of tools intended to make front-end development robust, easy, and, most importantly, fun. Check out the full feature list below!

Finally, This project wouldn't be possible without the help of our many contributors. What you see today is the product of hundreds changes made to keep up with an ever-evolving ecosystem. Thank you for all of your help.

Table of Contents

  1. Requirements
  2. Installation
  3. Running the Project
  4. Project Structure
  5. Live Development
  6. Routing
  7. Testing
  8. Building for Production
  9. Deployment
  10. Thank You

Requirements

  • node ^5.0.0
  • yarn ^0.23.0 or npm ^3.0.0

Installation

After confirming that your environment meets the above requirements, you can create a new project based on react-redux-starter-kit by doing the following:

$ git clone https://github.com/davezuko/react-redux-starter-kit.git <my-project-name>
$ cd <my-project-name>

When that's done, install the project dependencies. It is recommended that you use Yarn for deterministic dependency management, but npm install will suffice.

$ yarn  # Install project dependencies (or `npm install`)

Running the Project

After completing the installation step, you're ready to start the project!

$ yarn start  # Start the development server (or `npm start`)

While developing, you will probably rely mostly on yarn start; however, there are additional scripts at your disposal:

yarn <script> Description
start Serves your app at localhost:3000
build Builds the application to ./dist
test Runs unit tests with Karma. See testing
test:watch Runs test in watch mode to re-run tests when changed
lint Lints the project for potential errors
lint:fix Lints the project and fixes all correctable errors

Project Structure

The project structure presented in this boilerplate is fractal, where functionality is grouped primarily by feature rather than file type. This structure is only meant to serve as a guide, it is by no means prescriptive. That said, it aims to represent generally accepted guidelines and patterns for building scalable applications. If you wish to read more about this pattern, please check out this awesome writeup by Justin Greenberg.

.
├── build                    # All build-related code
├── public                   # Static public assets (not imported anywhere in source code)
├── server                   # Express application that provides webpack middleware
│   └── main.js              # Server application entry point
├── src                      # Application source code
│   ├── index.html           # Main HTML page container for app
│   ├── main.js              # Application bootstrap and rendering
│   ├── normalize.js         # Browser normalization and polyfills
│   ├── components           # Global Reusable Components
│   ├── containers           # Global Reusable Container Components
│   ├── layouts              # Components that dictate major page structure
│   │   └── PageLayout       # Global application layout in which to render routes
│   ├── routes               # Main route definitions and async split points
│   │   ├── index.js         # Bootstrap main application routes with store
│   │   ├── Home             # Fractal route
│   │   │   ├── index.js     # Route definitions and async split points
│   │   │   ├── assets       # Assets required to render components
│   │   │   ├── components   # Presentational React Components
│   │   │   └── routes **    # Fractal sub-routes (** optional)
│   │   └── Counter          # Fractal route
│   │       ├── index.js     # Counter route definition
│   │       ├── container    # Connect components to actions and store
│   │       ├── modules      # Collections of reducers/constants/actions
│   │       └── routes **    # Fractal sub-routes (** optional)
│   ├── store                # Redux-specific pieces
│   │   ├── createStore.js   # Create and instrument redux store
│   │   └── reducers.js      # Reducer registry and injection
│   └── styles               # Application-wide styles (generally settings)
└── tests                    # Unit tests

Live Development

Hot Reloading

Hot reloading is enabled by default when the application is running in development mode (yarn start). This feature is implemented with webpack's Hot Module Replacement capabilities, where code updates can be injected to the application while it's running, no full reload required. Here's how it works:

  • For JavaScript modules, a code change will trigger the application to re-render from the top of the tree. Global state is preserved (i.e. redux), but any local component state is reset. This differs from React Hot Loader, but we've found that performing a full re-render helps avoid subtle bugs caused by RHL patching.

  • For Sass, any change will update the styles in realtime, no additional configuration or reload needed.

Redux DevTools

We recommend using the Redux DevTools Chrome Extension. Using the chrome extension allows your monitors to run on a separate thread and affords better performance and functionality. It comes with several of the most popular monitors, is easy to configure, filters actions, and doesn't require installing any packages in your project.

However, it's easy to bundle these developer tools locally should you choose to do so. First, grab the packages from npm:

yarn add --dev redux-devtools redux-devtools-log-monitor redux-devtools-dock-monitor

Then follow the manual integration walkthrough.

Routing

We use react-router route definitions (<route>/index.js) to define units of logic within our application. See the project structure section for more information.

Testing

To add a unit test, create a .spec.js file anywhere inside of ./tests. Karma and webpack will automatically find these files, and Mocha and Chai will be available within your test without the need to import them. Here are a few important plugins and packages available to you during testing:

dirty-chai

Some of the assertions available from chai use magical getters. These are problematic for a few reasons:

  1. If you mistype a property name (e.g. expect(false).to.be.tru) then the expression evaluates to undefined, the magical getter on the true is never run, and so your test silently passes.
  2. By default, linters don't understand them and therefore mark them as unused expressions, which can be annoying.

Dirty Chai fixes this by converting these getters into callable functions. This way, if mistype an assertion, our attempt to invoke it will throw due to the property being undefined.

// This silently passes because the getter on `true` is never invoked!
it('should be true', () => {
  expect(false).to.be.tru // evalutes to undefined :(
})

// Much better! Our assertion is invalid, so it throws rather than implicitly passing.
it('should be true', () => {
  expect(false).to.be.tru() // `tru` is not defined!
})

Building for Production

Deployment

Out of the box, this starter kit is deployable by serving the ./dist folder generated by yarn build. This project does not concern itself with the details of server-side rendering or API structure, since that demands a more opinionated structure that makes it difficult to extend the starter kit. The simplest deployment strategy is a static deployment.

Static Deployments

Serve the application with a web server such as nginx by pointing it at your ./dist folder. Make sure to direct incoming route requests to the root ./dist/index.html file so that the client application will be loaded; react-router will take care of the rest. If you are unsure of how to do this, you might find this documentation helpful. The Express server that comes with the starter kit is able to be extended to serve as an API and more, but is not required for a static deployment.

Thank You

This project wouldn't be possible without help from the community, so I'd like to highlight some of its biggest contributors. Thank you all for your hard work, you've made my life a lot easier and taught me a lot in the process.

  • Justin Greenberg - For all of your PR's, getting us to Babel 6, and constant work improving our patterns.
  • Roman Pearah - For your bug reports, help in triaging issues, and PR contributions.
  • Spencer Dixon - For your creation of redux-cli.
  • Jonas Matser - For your help in triaging issues and unending support in our Gitter channel.

And to everyone else who has contributed, even if you are not listed here your work is appreciated.

react-redux-starter-kit's People

Contributors

davezuko avatar justingreenberg avatar neverfox avatar dougvk avatar SimonSelg avatar StevenLangbroek avatar rsilvestre avatar nuragic avatar AndreiRailean avatar apaatsio avatar davecarlson avatar davidgtonge avatar werelax avatar vkvelho avatar ipanasenko avatar abbviemr avatar mmermerkaya avatar Mistereo avatar nathanielks avatar nodkz avatar SpencerCDixon avatar timtyrrell avatar iamstarkov avatar anthonyraymond avatar patrickheeney avatar inooid avatar alexhayes avatar brancusi avatar hoodwink73 avatar kid avatar

Stargazers

zengqingfu1442 avatar Muhammad Junaid Tariq avatar SoftwareDev avatar 波仔糕 avatar Alex avatar CHEN, Jimmy avatar  avatar 飞天小女警 avatar Aditya avatar Mohit Maderna  avatar miwa avatar tangzhi avatar Anil Kumar H V avatar Daris avatar  avatar Sakthivel avatar  avatar 发短轻长 avatar Mahdi Pakravan avatar Surya Kanigolla avatar 勞友刑✨ avatar  avatar Antenor Pires avatar Linux Fish avatar Frankfurtlin avatar Felix Gartsman avatar  avatar  avatar  avatar Thunf avatar Sadık Kahveci avatar Swarupa avatar yumeyuniko avatar Lê Hoàng Nguyên avatar frankfanslc avatar Monark avatar  avatar Melih Bahri AKTAN avatar Nguyen Anh Tuan avatar Niloufar Vatanara avatar  avatar asdas12312weq avatar Lisa Lee avatar Adithya Ricky avatar  avatar  avatar Piotr Senkow avatar vmagnus avatar Don avatar franz lopez avatar Uvacoder avatar lebron avatar  avatar Rafly Maulana avatar Sandy  avatar Rhinestone Cowboy avatar Jeremy avatar Colin Mickelson avatar Sarvesh Dubey avatar  avatar ChanMo Yang avatar GeorgeLin avatar  avatar  avatar xiaohaitang avatar Michael Norton avatar leiyuecheng avatar  avatar Yasin ATEŞ avatar niceGuyPoca avatar Rishabh Bhatia avatar  avatar Irini Strangeloop avatar  avatar  avatar Trần Trọng Bình avatar IdisToan avatar Murat YAVUZ avatar kurocraft0312 avatar Jongho Park avatar Doglashi avatar  avatar  avatar 流浪大法师 avatar Nicholas Hofbauer avatar Rajnish Kumar avatar  avatar Artem Zinoviev avatar shikelong avatar  avatar  avatar Vikrant Sagar avatar Furkan Portakal avatar  avatar Hubert Zhu avatar annaqode avatar  avatar Ha Huy Long Hai avatar JoyEnJoy avatar Roy avatar

Watchers

Weliton Freitas avatar Sascha Dückers avatar Justin Ricaurte avatar Chorn Sokun avatar Clay vanSchalkwijk avatar Ian Ibbotson avatar Panayiotis Tzagkarakis avatar Miguel avatar Frode Reinertsen avatar  avatar Li YuBei avatar zshuaibin avatar Gregory Sitnin avatar Helmy Giacoman avatar Daniel Rech avatar evandrix avatar Konstantin Tarkus avatar AJ Tarachanowicz II avatar Daniil Harik avatar Jason avatar Amadou Cisse avatar  avatar Richard Hess avatar Cosmin Pițu avatar  avatar Jarek Cichy avatar 燃冰 avatar Eric avatar Artur Miglio avatar rama avatar Bo Li avatar Juhana Koski avatar Leonardo Fernandez Sanchez avatar Rakesh Menon avatar Marshall Ford avatar Oleksandr  avatar Kevin Deloria avatar 于其先 avatar Nathan Hagen avatar Ryan Oliver avatar Fu Jie avatar Sinh avatar James Cloos avatar Viktor Dzundza avatar Robert Casanova avatar  avatar Valentin Kostadinov avatar Riccardo Ravaro avatar Stewart Campbell avatar Ken Doman avatar  avatar Manfred Haltner avatar Viktor Zhokhov avatar Krister Kari avatar Ricardo García Vega avatar Roman Kholonyuk avatar  avatar Julian Duta avatar Ewan Valentine avatar ShFu avatar m4recek avatar Javier Chamizo avatar  avatar 0xdoux avatar Juan David Arroyave avatar Viacheslav Shabelnyk avatar EurekaO avatar Alex Kerney avatar Tristan Smith avatar Ryan Munger avatar Aldo Gonzalez Carlos avatar  avatar Emil avatar  avatar  avatar  avatar  avatar moro-programmer avatar marco comparato avatar Richie avatar Charles avatar Mike G. avatar Jake Gibbons avatar Brandon Clark avatar Piet Groot Kormelink avatar Tony Brown avatar 蔡正海 avatar 豆 avatar Dave Springer avatar  avatar Athiwat avatar Dan Osborne avatar Lévai Csaba avatar xiongwei avatar Cris Kedmenec avatar Alex Nudelman avatar Cody Wackerman avatar Jacky avatar Kiichi Tachibana avatar Mustafa YILDIRIM avatar

react-redux-starter-kit's Issues

Support Node v4

Transition to this once all dependencies are verified to work with it.

Reduce size for server bundle

It is possible to reduce server bundle several times if we exclude from it node_modules (https://github.com/MrEfrem/react-redux-starter-kit/blob/master/build/webpack/server.js):

name    : 'server',
  target  : 'node',
  entry   : {
    app : [
      paths.src('entry-points/server')
    ]
  },
  externals: fs.readdirSync('node_modules').filter(function(x) { return x !== '.bin' }),
...

And also I would clean UglifyJsPlugin from bundle, because differently in case of an error in stack trace it isn't clear where in bundle to look it.
And generally what sense in it for NodeJS to squeeze bundle?

Use .js instead of .jsx

A lot of examples and boilerplates, even the Redux official examples are not using .jsx for components.

redbox

I can't manage to see the redbox on error.
The console display an error and the page is refreshed.

I don't have any useful log and I don't know where to look to fix this, any idea ?

Unable to npm run dev on Windows

Everything installed just fine. I run other related react projects with no problem. Here's what happens when I run npm run dev:

npm run dev

> [email protected] dev F:\_vms\HomesteadCode\_live\misc\react-redux-starter-kit
> node --harmony ./build/webpack-dev-server

net.js:633
    throw new TypeError('invalid data');
          ^
TypeError: invalid data
    at WriteStream.Socket.write (net.js:633:11)
    at execFileSync (child_process.js:1364:20)
    at Function.module.exports.sync (F:\_vms\HomesteadCode\_live\misc\react-redux-starter-kit\node_modules\yargs\node_modules\os-locale\index.js:78:16)
    at Argv (F:\_vms\HomesteadCode\_live\misc\react-redux-starter-kit\node_modules\yargs\index.js:22:22)
    at Object.<anonymous> (F:\_vms\HomesteadCode\_live\misc\react-redux-starter-kit\node_modules\yargs\index.js:10:1)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)

npm ERR! Windows_NT 6.3.9600
npm ERR! argv "C:\\Program Files (x86)\\nodejs\\\\node.exe" "C:\\Program Files (x86)\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
npm ERR! node v0.12.7
npm ERR! npm  v2.11.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: `node --harmony ./build/webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script 'node --harmony ./build/webpack-dev-server'.
npm ERR! This is most likely a problem with the react-redux-starter-kit package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node --harmony ./build/webpack-dev-server
npm ERR! You can get their info via:
npm ERR!     npm owner ls react-redux-starter-kit
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     F:\_vms\HomesteadCode\_live\misc\react-redux-starter-kit\npm-debug.log

I noticed that someone commented in another Issue that they are running this package without problems on Windows.

Improve Sample Unit Tests

As title says. Probably would be best to break the HomeView out into a HomeView + Counter component, and then demonstrate how to properly test smart vs. dumb components.

Invariant violation in production mode

NODE_ENV=production npm run compile
npm run server:start

Gives the following error(s)

Error: Invariant Violation: Server-side <Router>s need location, branch, params, and components props. Try using Router.run to get all the props you need

I suppose it is related to remix-run/react-router#1455

Container / smart / dumb components

The project contains a containers directory. Just to be clear, we speak about that kind of "containers".
https://medium.com/@learnreact/container-components-c0e67432e005

Also https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

If yes, it could make sense to add it to the doc/readme. It would also helps understanding why there are different types of components/directories: views, containers and components.
That would also explains why it is nice to have styles and tests close to the component that is now dumb a easily reusable.

Issue with nesting the routes

Playing around with kit. I got this setup for routes :

<Route component={CoreLayout}>
    <Route name='home' path='/' component={HomeView} />

    <Route name='user-info' path='user' component={UsersView}>
      <Route name='profile' path='user/:id' component={Profile} />
    </Route>
    <Route name='about' path='about' component={AboutView} />

    <Route name='dashboard' path='dashboard' component={DashboardView} />
    <Redirect from='admin' to='dashboard' />
  </Route>

Nested routes like 'user/:id' , or even without params, just 'user/profile' doesn't work - error 404 =\
Tried different types of nesting, even without path with '/', like

<Route name='user-info' path='user' component={UsersView}>
       // this should inherit the route, so its /user/profile
      <Route name='profile' path=profiles' component={Profile} />
</Route>

, nothing works... Read through 1.0.0-beta3 docs many times, it seems like i'm doing everything right - but it doesn't work.
Can anyone figure out whats the problem?
Wrapping component UsersView renders {this.props.children}.

Initial Server State

Currently initial server state is entirely separate from what may be produced through initial application events (e.g. componentWillMount). This is fine for basic state injections and store configuration, but ideally the server should be more closely tied to the application (especially for async actions initiated during the componentWillMount event).

Investigate solutions when time allows.

Poll: Keep or Ditch Support for Non-JS Assets?

General question since I don't know how much people are even using this starter kit with non-JS assets (i.e. it's currently setup to allow Sass imports). Basically, do we want the focus of this starter kit to be strong support for client-side development, or should it be a more robust universal kit?

Benefit of going JS only

  • The server would be able to directly import all application source code, thereby eliminating the build step that's currently required to perform server-side rendering. See: #57 for more on this.
  • Server development would be responsible for proxying the webpack assets, so you'd now have a more cohesive development environment.

Downside of going JS only

  • Would no longer be able to use folder aliases.
  • (Obvious) only JavaScript assets would be able to be imported. You'd have to implement your own build step for compiling styles and whatever else you might need.
  • There'd need to be some work to get the server to support hashed asset names.

I probably missed something somewhere, but those are my initial thoughts. Any other perspectives are greatly appreciated.

how to provide initialstate in test

Hi
I try to update the example/todo-application to the current master and it works but I can not find out, how to modify the test.
In beforeEach when component is created with shallowRenderWithProps I try to pass the initialstate but it fails. The strange thing is that HomeView component is initialized with my props but the render method called for the second time with no props so it fails.
Any idea ?

Reducer Hot Loading Broken

Since updating Redux package versions to 2.0.0 there's an error (as reported by https://github.com/iamstarkov in 4c8f393).

"<Provider> does not support changing store on the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically. See https://github.com/rackt/react-redux/releases/tag/v2.0.0 for the migration instructions."
I got this error from the start, so probably with this deps-update source fore reducers also should be updated.

Why specs in source?

I'm curious about your decision to embed your .spec files in the /src directory. I haven't used (or seen) this setup before. IMO it pollutes the source files. It is easy to change the config for a different setup, but I'd be curious as to why you prefer this approach.

Relative path to differanciate between importing files vs node modules ?

Would it not be better to know which one come from app ?

import React        from 'react';
import { Provider } from 'react-redux';
import { Router }   from 'react-router';
import routes       from 'routes';
import invariant    from 'invariant';
import { RoutingContext } from 'react-router';
import { createDevToolsWindow } from 'utils';
import { DevTools, LogMonitor, DebugPanel } from 'redux-devtools/lib/react';

vs

import React        from 'react';
import { Provider } from 'react-redux';
import { Router }   from 'react-router';
import routes       from './routes';
import invariant    from 'invariant';
import { RoutingContext } from 'react-router';
import { createDevToolsWindow } from './utils';
import { DevTools, LogMonitor, DebugPanel } from 'redux-devtools/lib/react';

Clean starter kit

Thanks for creating this repo. Could you move the todo example outside the starter kit? Having an example is very useful, but if you want to use this as a starter kit, you have to remove the todo example source code. If the example were in its own folder (or own repo) it would be a lot simpler to get up and running.

Thanks!

Turn off linting errors in browser console

So, usually a coding session of mine looks like the following:

  1. Write the ugliest code + test that can possibly solve your problem
  2. Refactor the functionality and make a proper structure
  3. Lint and fix stylistic issues

However, with the very verbose setting of linting errors in the browser console, it's hiding most of my other debugging output. I've tried to disable the linting in the browser by commenting out the following part in build/webpack/client.js:

  //eslint : {
  //  configFile : paths.project('.eslintrc'),
  //  failOnError : globals.__PROD__
  //}

But still I see the linting warnings/errors (that also sometimes stops me from continuing developing...).

How can I disable this?

HomeView: Take advantage of ES7 decorators

I know in HomeView, two components are exported for the sake of unit testing. But you still can take advantage of ES7 decorators which IMHO will get us to a cleaner code on the long run in more complicated scenarios.

So instead of

      export default connect(mapDispatchToProps)(HomeView);

create another class within the same file that inherits from HomeView but implements connect as a decorator. i.e.

        @connect(mapDispatchToProps)
        export default class ConnectedHomeView extends HomeView  {
        }

As export default is used anyway we won't have an issue with importing the connected one from the file

Maintain Todo Example

There have been a lot of changes to the starter kit recently, so the todo branch needs to be updated accordingly.

You should fix eslint version in package.json

Can not start todo-example today.
Get error when run npm run dev:debug:

ERROR in ./src/reducers/todos/index.js
Module build failed: TypeError: Cannot read property 'loc' of undefined
    at getNodeIndent (/Users/nod/www/_nodejs/react-redux-todo/node_modules/eslint/lib/rules/indent.js:112:49)
    at EventEmitter.Program (/Users/nod/www/_nodejs/react-redux-todo/node_modules/eslint/lib/rules/indent.js:547:45)
    at EventEmitter.emit (events.js:129:20)
    at Controller.controller.traverse.enter (/Users/nod/www/_nodejs/react-redux-todo/node_modules/eslint/lib/eslint.js:815:25)
    at Controller.__execute (/Users/nod/www/_nodejs/react-redux-todo/node_modules/eslint/node_modules/estraverse/estraverse.js:397:31)
    at Controller.traverse (/Users/nod/www/_nodejs/react-redux-todo/node_modules/eslint/node_modules/estraverse/estraverse.js:495:28)
    at EventEmitter.module.exports.api.verify (/Users/nod/www/_nodejs/react-redux-todo/node_modules/eslint/lib/eslint.js:808:24)
    at processText (/Users/nod/www/_nodejs/react-redux-todo/node_modules/eslint/lib/cli-engine.js:199:27)
    at CLIEngine.executeOnText (/Users/nod/www/_nodejs/react-redux-todo/node_modules/eslint/lib/cli-engine.js:430:26)
    at lint (/Users/nod/www/_nodejs/react-redux-todo/node_modules/eslint-loader/index.js:26:20)
    at Object.module.exports (/Users/nod/www/_nodejs/react-redux-todo/node_modules/eslint-loader/index.js:120:7)
 @ ./src/reducers/index.js 11:13-31

Problem in [email protected] With 1.2.1 works perfectly:

npm uninstall eslint
npm install [email protected]
npm run dev:debug 

fail with current version of react-redux

If I try to upgrade to the current version of react-redux, which is 0.5.3 from the version specified in package.json (0.2.2) then the sample app fails to start:
Uncaught TypeError: (0 , _reactRedux.provide) is not a function

Hot load issue since update

Do you manage to hot reload code ?

I updated my project today to reflect your changes and webpack is unable to hot reload.

[HMR] Cannot apply update. Need to do a full reload!
dev-server.js:19
[HMR] Error: Aborted because 198 is not accepted

To be sure, I cloned a fresh copy and had the same issue

Koa server

I'm fairly new to webpack, but my understanding is you want it to serves up static assets and you would want a second server to handle other types of requests. For example if I want to fetch some data http:localhost:4000/users/1

When you run npm run dev it doesn't appear that a second server is being spun up to handle these requests. How would you recommend setting this up in the starter kit ecosystem?

Thanks!

Issue with isomorphic-fetch

Hello

To learn node, webpack and react, I created my own starter kit based on yours. I started from scratch and slowly built it up into a fully working universal react router redux app :) I still don't understand everything, but I'm getting there. I have a problem with isomorphic-fetch though. I tested with my starter kit and also this one and the problem is the same.

Install isomorphic-fetch and json loader

npm install --save isomorphic-fetch json-loader

Add json loader to webpack config

module: {
      preLoaders : [
        { test: /\.json$/, loader: 'json'}
      ],

When I run npm run compile I get this message

[email protected]:~/www/react/redux-starter$ npm run compile

> [email protected] compile /home/bojan/www/react/redux-starter
> webpack

Container#eachAtRule is deprecated. Use Container#walkAtRules instead.
Container#eachRule is deprecated. Use Container#walkRules instead.
Container#eachDecl is deprecated. Use Container#walkDecls instead.
Node#style() is deprecated. Use Node#raw()
Container#remove is deprecated. Use Container#removeChild
Hash: 430e6819a630127bddb5093b040587334077bbc9
Version: webpack 1.12.1
Child client:
    Hash: 430e6819a630127bddb5
    Version: webpack 1.12.1
    Time: 8379ms
                                       Asset       Size  Chunks             Chunk Names
                 app.430e6819a630127bddb5.js     731 kB       0  [emitted]  app
              vendor.430e6819a630127bddb5.js    2.73 MB       1  [emitted]  vendor
    app.660925c07cbbe319d4e37e587be37fa7.css    7.89 kB       0  [emitted]  app
                                  index.html  577 bytes          [emitted]  
       [0] multi app 52 bytes {0} [built]
       [0] multi vendor 100 bytes {1} [built]
        + 417 hidden modules
    Child extract-text-webpack-plugin:
            + 2 hidden modules
Child server:
    Hash: 093b040587334077bbc9
    Version: webpack 1.12.1
    Time: 7157ms
       Asset     Size  Chunks             Chunk Names
    index.js  1.33 MB       0  [emitted]  app
       [0] multi app 28 bytes {0} [built]
        + 581 hidden modules

    WARNING in ./~/isomorphic-fetch/~/node-fetch/~/encoding/lib/encoding.js
    Critical dependencies:
    9:12-34 the request of a dependency is an expression
     @ ./~/isomorphic-fetch/~/node-fetch/~/encoding/lib/encoding.js 9:12-34

The funny thing is that the app works. But I want to get rid of this error or at least fully understand it. Any ideas?

Use starter-kit as a independant module

It's more a question than an issue, but is it actually possible to use this kit as a standalone module ?

Imagine that I'm building a website, and I want to use the react module in a div, something like :

<body>
  <div id="reactmodule">
  </div>
</body>

And in javascript

ReactDOM.render(node, document.getElementById('reactmodule'));

npm run server:start and npm run start

after update till 0.14.0 there are problems.

In dev server warning:
Warning: React.findDOMNode is deprecated. Please use ReactDOM.findDOMNode from require('react-dom') instead.

In production.

npm run compile --production
npm run server:start

> [email protected] server:start react-redux-starter-kit
> node --harmony bin/server

fs.js:783
  binding.stat(pathModule._makeLong(path), req);
          ^
TypeError: path must be a string
    at TypeError (native)
    at Object.fs.stat (fs.js:783:11)
    at Object.<anonymous> (react-redux-starter-kit/consul/index.js:8:4)
    at Module._compile (module.js:460:26)
    at normalLoader (react-redux-starter-kit/node_modules/babel/node_modules/babel-core/lib/api/register/node.js:199:5)
    at Object.require.extensions.(anonymous function) [as .js] (react-redux-starter-kit/node_modules/babel/node_modules/babel-core/lib/api/register/node.js:216:7)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)

Having trouble with deployment in Windows

I'd like to deploy a compiled server but, for some reason, when I type 'node dist/server/index' nothing happens.

untitled

I've set the node_env to production, even in the .babelrc file. Did anyone else have this issue?

Is there a script to just run this code in the package.json file?

Does hot-reloading mean browser reload?

I have been cutting my teeth on a variety of reactjs examples. I have successfully installed and can run this project on Windows! :) However when I update the line Welcome to the React Redux Starter Kit! and save the file. Console shows module reloaded however, I have to reload the page to see the change. Is this normal? I have seen other projects where the change refreshed without reloading the page.

Socket.io integration

Nice work! I've not a full experience with Redux, so i want to ask you, in your opinion what is the best way to integrate in this stack, Socket.io/websocket events to build components that manage real-time data?

Weaken ESLint Rules

Need to make rules much more lenient since it's far too opinionated right now to be viable in a general starter kit.

Trying to add a navbar

I realize this issue isn't strictly with the code and more a request for a total noob, but your were so prompt yesterday that you were the first person I thought to ask about this.

When I try adding a new component to the core layout I get errors. Here's what it all looks like:
untitled

Any idea what could be going on? Again, It's not really an issue with the code you wrote, it's just something I'm not grasping about the architecture of Redux (or the Flux philosophy)

Full reloads on file change

When I change a file, the whole page reloads. Should the hot loader re-render without a full page refresh (and thus keeping the state)?

Improve how vendor dependencies are defined

Investigate whether or not it is possible to define vendor dependencies by a regex. Currently there are some conflicts in names which lead to various issues (such as module resolution with react and redux-devtools/lib/react). Other issues, such as history needing to be in the vendor bundle are also a bit perplexing, so figure out the best solution for avoiding these issues.

Where does initialState come from?

I stared at this for quite a while now but I can't figure out two things:

  1. Where does the initialState come from? I can see in that server render-routes middleware that the compiled server entrypoint is called via yield runRouter but only location is passed in. In the server entry point I can see that Router.run is called and has a function as a parameter that takes initialState but how does thisnvariable ever get set to anything?
  2. All other starter-kits that I found do something like de-hydrating and re-hydrating the initialState by dumping the state that was used by the server as a variable into the global document scope so that the client render can pick it up again. Why is this not necessary in this starter-kit?

Bonus question: Usually my routes would need to fetch data from APIs onEnter, how would I do this here so that it still works with server sode rendering (needs to wait until everything is fetched).

Support Static Assets

Maybe in a public or static directory. This would be useful for things like favicons (or consider using React Helmet?).

Entry-points files in separate folders

It seems more logical to me to put

  • client/entry-points/client.js in client/main.js
  • client/entry-points/server.js in server/main.js

What do you think ?

Btw, I made some folder restructuration (just for my own little project) because I prefer to work by modules/features, but this is purely opiniated. You can take a look here if you want.

I give you an example.
For a todo feature we have :

  • todo.react.js (to differanciate with todo.js which is a model if necessary)
  • todo.page.js (when in todo is a page in route handler)
  • todo.js (model)
  • todo.spec.js
  • todo.scss
  • reducer.js
  • actions.js

Voilà.

Unable to run npm commands

I've freshly clone the repo, ran npm install and tried to run npm run dev and get this error:

/home/devbox/dev/todo/build/webpack/client/index.js:49
sass-loader?includePaths[]=${projectConfig.inSrc('styles')}
^
SyntaxError: Unexpected token ILLEGAL

It appears node doesn't support string templates even with --harmony flag. Perhaps I missed a step. I have node 0.12.7 installed via nvm running on ubuntu 14.04

How to run the files after `npm run compile`

I just completed development on an app, and have compiled it into a static build. the build folder contains a client and server folder. I'm new to node, so I have no idea how to run this compiled version and probably push it to heroku.
Please help. Thanks.

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.