earnubs / react-hot-loader-starter-kit

react 16, redux 5, react router 4, universal, webpack 3

Universal React/Redux Starter Kit with Hot Reloading

Install the project deps:

npm install

If you're just wanted to get set up with React, take a look at https://github.com/facebookincubator/create-react-app

Other than a couple of bare bones 'container' components there is very little to this project aside from the setup for a JavaScript app that renders react both on server and client, with Expressjs and Webpack.

Server side JS is compiled at install time (postinstall script) with Babel & Make using the babel config found in the Makefile, client side js is compiled via Webpack and uses the .babelrc found in the root directory (TODO consider making this clearer with .babelrc.server and .babelrc.client).

To start a development instance:

make start-dev

To start a development instance with debugging:

make start-debug

To build:

make build

To start production:

make start

To run tests (cough what tests? cough)

make test

Deploy to heroku simply by pushing to heroku git or connecting to the repo on github, everything else should be setup to go, for example this repo is deployed here: https://react-universal-hot-starter.herokuapp.com/

react-hot-loader-starter-kit's Issues

make the babel configs for server and client explicit and clear

Server side babel config is stored in Makefile and passed as args, Webpack babel-loader config uses .bablerc, this could be made more explicit and clear possibly by having a .server.babelrc and .client.babelrc

Whole page is reloading

Hi,

I have used your app in dev mode and I have noticed the whole page is reloading once a change is saved.

Is is possible to keep logs + avoid browser/ full page reload?

Cheers,

Julien

React checksum invalid between server rendered markup and client

React-router adds extra slash, will be fixed in upcoming react-router release

remix-run/react-router#4484

creation of client and server under lib folder

Just curious to know what is the advantage here with these files generated? How to remove this and the makefile from the project? @earnubs

webpack loaders right way

Hello. Can you provide some info about using loaders in webpack configs?
I trying to load png and jpg files in my component:
import image from "../../assets/cover.png"
and have error:
Unexpected character '�' (1:0)

i tried with url-loader and file-loader in my webpack/developement.js and webpack/production.js, like this:

{
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "file-loader",
            options: {}
          }
        ]
}

Thx!