Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/darul75/web-react
:diamond_shape_with_a_dot_inside: Another React Dev Kit with Webpack and NodeJS
https://github.com/darul75/web-react
nodejs react webpack
Last synced: 2 months ago
JSON representation
:diamond_shape_with_a_dot_inside: Another React Dev Kit with Webpack and NodeJS
- Host: GitHub
- URL: https://github.com/darul75/web-react
- Owner: darul75
- Created: 2015-04-21T08:28:37.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-01-14T10:04:01.000Z (almost 9 years ago)
- Last Synced: 2024-10-12T08:44:41.211Z (3 months ago)
- Topics: nodejs, react, webpack
- Language: JavaScript
- Homepage: https://react-web.herokuapp.com/
- Size: 3.92 MB
- Stars: 81
- Watchers: 11
- Forks: 8
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
web-react [](http://badge.fury.io/js/web-react) [](https://travis-ci.org/darul75/web-react) [](https://gitter.im/darul75/web-react?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
=====================
Another Webpack React Kit.
Why
-------------
Because there are many React starter kits but some are so specific and difficult to take in hands.
Idea was to take in hands following stack :
* [ES6](https://babeljs.io/docs/learn-es6/) : and you will learn React with awesome ECM6 features.
* [Webpack](https://github.com/webpack/webpack) : amazing bundler, still to learn so much about it.
* [React](https://github.com/facebook/react) : choosed because I love idea of Virtual DOM.
* [Flux](https://facebook.github.io/flux/docs/overview.html) : flux and used implementation is [Alt](http://alt.js.org/)
* [Immutable](https://facebook.github.io/immutable-js/) : Immutable everywhere.
* [EsLint](http://eslint.org/): JS and JSX syntax validator.
* [Express](http://expressjs.com/): Version 4.
* [Mocha](http://mochajs.org/): Testing.
For a simple website with no server side it is really fine.
For a more complex website, an Express server is used but work is not finished.
- Server side React rendering is ready and done through [React-Router](https://github.com/rackt/react-router)
- Flux on server side has begin thanks to [Iso](https://github.com/goatslacker/iso/) and Alt feature to bootstrap your app with data.
- Some API server routes are just given as example.
- You can debug it on server side thanks to sourcemaps.
- *NEW FEATURE* : hot reloading of you code on server side too (node), it will patch silently without restarting your node server.
On both client/server [Fetch](https://github.com/github/fetch) request handler is used (for example on server side)
Hope you will enjoy.
CODE, DEBUG in an isomorphic JS way !
Demo
-------------
https://react-web.herokuapp.com/
Try reload page, put wrong path, snapshot todo list...play, I will improve it later to show how it works.
How to use it
-------------
*DEV ONLY CLIENT*
Webpack with hot changes loading but no own server, enough for a single presentation page app by instance. Port: 8080
See changes at [http://127.0.0.1:8080](http://127.0.0.1:8080)
```bash
npm run dev
```
*DEV ONLY CLIENT/SERVER*
Let's use your own NodeJS server.
Start webpack in background with *hot changes loading* and *debug* in both client/server sides.
```bash
npm run dev-server-client
```
*THEN* when bundle is generated in build folder, start your node server (express), launched in ES6 thanks to Babel.
```bash
npm run dev-server
```
or with debug nodejs mode :
```bash
node-inspector &
```
```bash
npm run dev-server-debug
```
Go to inspector (because of break mode) [http://localhost:8080/?ws=localhost:8080&port=5858](http://localhost:8080/?ws=localhost:8080&port=5858)
See changes at [http://127.0.0.1:3000](http://127.0.0.1:3000)
*PRODUCTION*
Build production bundle both client and server.
```
npm run build
```
Run production client/server React/Express website.
```
npm run start
```
See it at [http://127.0.0.1:3000](http://127.0.0.1:3000)
STRUCTURE
-------------
```
.
├── /build/ # Compiled output
├── /conf/ # Webpack scripts + testing glue.
├── /dist/ # Production compiled output
├── /node_modules/ # 3rd-party libraries and utilities
├── /app/ # Source code of the client application
│ ├── /actions/ # Action creators that allow to trigger a dispatch to stores
│ ├── /components/ # React components
| |── /__tests__/ # React components unit tests
│ ├── /stores/ # Stores contain the application state and logic
├── /server/ # The source code of the server application
│ ├── /api/ # REST API
│ ├── /routes/ # Express routes entries
│ ├── /server/ # Server-side startup script
│ ├── /utils/ # Some specific, rendering...
├── /assets/ # Static resources
│ ├── index.html # Html templates used for `dev client` / `dev server` / `production`
│ ├── config # JSON configuration file, used for metas today, more later...
└── package.json # The list of 3rd party libraries and utilities
```
FOCUS
-------------
Thanks to [react-helmet](https://github.com/nfl/react-helmet), now you will be able to enhance head dom part with one json configuration [file](https://github.com/darul75/web-react/blob/master/assets/config.json).
```json
{
"title": "web-react",
"meta":[
{
"name": "description",
"content": "Webpack Node React Starter Kit"
},
{
"name": "viewport",
"content": "width=device-width, initial-scale=1"
}
],
"link": [
{
"rel": "shortcut icon",
"href": "/favicon.ico",
"type": "image/x-icon"
},
{
"rel": "icon",
"href": "/favicon.ico",
"type": "image/x-icon"
}
]
}
```
RELEASE
-------------
* 1.2.0: see CHANGELOG.md file
* 1.1.0: react 0.14.0 + react-router 1.0.x => refactoring
* 1.0.9: bump RHL version, may remove NoErrorsPlugin with React Hot Loader 1.3.0
* 1.0.8: record/reload all dispatched payload example
* 1.0.7: Immutable integration + code refactoring + todo task edition + some actions
* 1.0.6: branding
* 1.0.5: fix runtime dependency
* 1.0.4: