codebelt / hapi-react-hot-loader-example

Simple React Hot Loading example with Hapi Server-side rendering

[No longer maintained] I will continue to maintain the TypeScript version.

hapi-react-hot-loader-example

Example universal/isomorphic application demonstrating react-hot-loader-3 with webpack-3, react and friends, async code splitting, and hapi.

Check out the TypeScript version here

Found this usefull? give it a ⭐

Windows users see the last section of this README

get started

1. $ yarn
2. $ yarn dev
3. http://localhost:3000

dev tasks

• $ yarn lint (eslint)
• $ yarn dev (local development w/ server)

Type rs with a carriage return to restart nodemon if you make changes to the server.js file or any files within the server folder. It's not efficient to automatically restart nodemon on file changes.

Note: Saga's do not hot load. You will have to reload the browser. Read more about potential issues and/or implement yourself.

production tasks

• $ yarn prod (production build w/ server)
• $ yarn prod:build (production build)

staging tasks

• $ yarn staging (staging build w/ server)
• $ yarn staging:build (staging build)

---

Other features/examples I am working:

• Jest / Enzyme

Window Users

Use $ yarn devWindows during development. Note rs to restart nodemon will not work on windows.

If you want rs to restart nodemon you will need to run yarn watchServer and yarn devServer in two separate terminals.

hapi-react-hot-loader-example's Issues

Add Jest and Enzyme

https://www.codementor.io/vijayst/unit-testing-react-components-jest-or-enzyme-du1087lh8
http://ricostacruz.com/cheatsheets/enzyme.html
https://github.com/sapegin/jest-cheat-sheet

Webpack 3

https://medium.com/netscape/webpack-3-react-production-build-tips-d20507dba99a

Looking into Redirect on server

https://github.com/codeBelt/hapi-react-hot-loader-example/blob/master/src/server/controllers/ReactController.jsx#L43

Nodemon restart with 'rs' not working

Nodemon restart with 'rs' not working. It's related to an issue with concurrently:
https://github.com/kimmobrunfeldt/concurrently/issues/121

If you want this to work and you are on a mac. Change the dev task to "dev": "npm run watchServer & npm run devServer",

Add Code Splitting

react-async-component

ctrlplusb/react-async-component#14 (comment)

Take a look at Source Map Explorer

https://github.com/danvk/source-map-explorer

And/or

https://medium.com/@adamrackis/vendor-and-code-splitting-in-webpack-2-6376358f1923

Use PostCSS

Use PostCSS

Add Modal Example

Do it!

Code Splitting

Test out other types:

• https://github.com/faceyspacey/react-universal-component
• https://github.com/thejameskyle/react-loadable

Code Splitting is not working

Seems like code splitting is not working but is working on the TypeScript version. If you go to the about page you don't see the js file being loaded. Seems like it all getting compiled into the main js file.

Tips

• two-tips-to-improve-performance-by-30-with-react-and-webpack
  -- ?react_perf
• https://medium.com/netscape/webpack-3-react-production-build-tips-d20507dba99a
• https://github.com/danvk/source-map-explorer
• https://medium.com/@adamrackis/vendor-and-code-splitting-in-webpack-2-6376358f1923
• Reselect

TSLint

https://github.com/piotrwitek/react-redux-typescript-guide#tslintjson

Add Google Maps (3rd Party Library) Example

Do it!

Dev build not working on Windows (yarn dev)

Hi

I got the latest version of the project
ran
yarn
yarn dev

I see the logs:

`
$ cross-env npm run removeAndBuildServer

[email protected] removeAndBuildServer D:\Work\rococode\reacthotloader
cross-env npm run remove && npm run buildServer

[email protected] remove D:\Work\rococode\reacthotloader
cross-env rimraf dist

[email protected] buildServer D:\Work\rococode\reacthotloader
cross-env BABEL_ENV=server ./node_modules/.bin/babel src --out-dir dist

src\client.jsx -> dist\client.js
src\RouterWrapper.jsx -> dist\RouterWrapper.js
src\server\controllers\AssetsController.js -> dist\server\controllers\AssetsController.js
src\server\controllers\ReactController.jsx -> dist\server\controllers\ReactController.js
src\server\plugin\HapiWebpackHotPlugin.js -> dist\server\plugin\HapiWebpackHotPlugin.js
src\server\ServerManager.js -> dist\server\ServerManager.js
src\server.js -> dist\server.js
src\services\ProviderService.js -> dist\services\ProviderService.js
src\services\ServerService.js -> dist\services\ServerService.js
src\stores\loading\LoadingAction.js -> dist\stores\loading\LoadingAction.js
src\stores\loading\LoadingReducer.js -> dist\stores\loading\LoadingReducer.js
src\stores\meta\MetaAction.js -> dist\stores\meta\MetaAction.js
src\stores\meta\MetaReducer.js -> dist\stores\meta\MetaReducer.js
src\stores\render\RenderReducer.js -> dist\stores\render\RenderReducer.js
src\stores\rootReducer.js -> dist\stores\rootReducer.js
src\stores\rootSaga.js -> dist\stores\rootSaga.js
src\stores\user\UserAction.js -> dist\stores\user\UserAction.js
src\stores\user\UserReducer.js -> dist\stores\user\UserReducer.js
src\stores\user\UserSaga.js -> dist\stores\user\UserSaga.js
src\views\about\About.jsx -> dist\views\about\About.js
src\views\about\AboutAsync.jsx -> dist\views\about\AboutAsync.js
src\views\contact\Contact.jsx -> dist\views\contact\Contact.js
src\views\contact\ContactForm.jsx -> dist\views\contact\ContactForm.js
src\views\errors\NotFound.jsx -> dist\views\errors\NotFound.js
src\views\errors\NotFoundAsync.jsx -> dist\views\errors\NotFoundAsync.js
src\views\home\Home.jsx -> dist\views\home\Home.js
src\views\landmarks\Footer.jsx -> dist\views\landmarks\Footer.js
src\views\landmarks\FooterAsync.jsx -> dist\views\landmarks\FooterAsync.js
src\views\landmarks\Header.jsx -> dist\views\landmarks\Header.js
$ cross-env npm run watchServer & npm run devServer

[email protected] watchServer D:\Work\rococode\reacthotloader
cross-env BABEL_ENV=server ./node_modules/.bin/babel src --out-dir dist --watch

src\client.jsx -> dist\client.js
src\RouterWrapper.jsx -> dist\RouterWrapper.js
src\server\controllers\AssetsController.js -> dist\server\controllers\AssetsController.js
src\server\controllers\ReactController.jsx -> dist\server\controllers\ReactController.js
src\server\plugin\HapiWebpackHotPlugin.js -> dist\server\plugin\HapiWebpackHotPlugin.js
src\server\ServerManager.js -> dist\server\ServerManager.js
src\server.js -> dist\server.js
src\services\ProviderService.js -> dist\services\ProviderService.js
src\services\ServerService.js -> dist\services\ServerService.js
src\stores\loading\LoadingAction.js -> dist\stores\loading\LoadingAction.js
src\stores\loading\LoadingReducer.js -> dist\stores\loading\LoadingReducer.js
src\stores\meta\MetaAction.js -> dist\stores\meta\MetaAction.js
src\stores\meta\MetaReducer.js -> dist\stores\meta\MetaReducer.js
src\stores\render\RenderReducer.js -> dist\stores\render\RenderReducer.js
src\stores\rootReducer.js -> dist\stores\rootReducer.js
src\stores\rootSaga.js -> dist\stores\rootSaga.js
src\stores\user\UserAction.js -> dist\stores\user\UserAction.js
src\stores\user\UserReducer.js -> dist\stores\user\UserReducer.js
src\stores\user\UserSaga.js -> dist\stores\user\UserSaga.js
src\views\about\About.jsx -> dist\views\about\About.js
src\views\about\AboutAsync.jsx -> dist\views\about\AboutAsync.js
src\views\contact\Contact.jsx -> dist\views\contact\Contact.js
src\views\contact\ContactForm.jsx -> dist\views\contact\ContactForm.js
src\views\errors\NotFound.jsx -> dist\views\errors\NotFound.js
src\views\errors\NotFoundAsync.jsx -> dist\views\errors\NotFoundAsync.js
src\views\home\Home.jsx -> dist\views\home\Home.js
src\views\landmarks\Footer.jsx -> dist\views\landmarks\Footer.js
src\views\landmarks\FooterAsync.jsx -> dist\views\landmarks\FooterAsync.js
src\views\landmarks\Header.jsx -> dist\views\landmarks\Header.js
`

after that everything is stuck and I can't load anything on localhost:3000

any idea what is wrong?

Login Redirect Example

<Route exact path="/" render={() => (
    isLoggedIn
        ? (<Redirect to="/dashboard" />)
        : (<PublicHomePage />)
)} />

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Redirect.md