Mo Binni mobinni

## webpack.dev.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: {
        // entry point for your app
        app: ['webpack-hot-middleware/client', __dirname + '/../app/scripts/app.js'],
        // vendors
        vendors: [

## folder-structure.txt
.
├── app
│   ├── images
│   ├── index.html
│   ├── scripts
│   │   ├── app.js
│   │   ├── components
│   │   │   └── Main.jsx
│   │   ├── devtools.js
│   │   └── routes

## package.json
{
  "name": "redux_isomorphic_kit",
  "version": "0.0.1",
  "description": "A modern isomorphic setup containing: React, Redux, NodeJS, WebPack, Redux DevTools, Serverside rendering, React Router, etc.",
  "dependencies": {
    "ejs": "^2.3.4",
    "history": "^1.13.1",
    "lodash": "^3.10.1",
    "react": "^0.14.0",
    "react-dom": "^0.14.3",

## Webpack_Explanation.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              1 star
            
          
                mobinni
                / Webpack_Explanation.md
            
            
              Last active
              December 21, 2015 14:09
            
              
                A Modern Isomorphic Stack with Redux - Part 1
              
          
    #Summary:


We wrap 3 entries: app, tools and vendors. These point to the files they will be bundling so to speak the entries to your React app, a separate app that will contain your development tools for Redux and a vendors file that contains the vendors necessary to run the app (ReactJS, Redux, etc.).
(line 6 to 17)


We define that the output path should go to a /build/ folder and that each output file should have the name of the key you defined for it in the the entry object ([name].js). The same applies to the source-maps.
(line 18 to 23)


We define that the output stats of WebPack should be coloured and the reasons should also be outputted. “Reasons” are reasons why a module is included.
(line 24 to 27)


## main.jsx
import React, {Component} from 'react';
import {Link} from 'react-router';

class Main extends Component {
    render() {
        return (
            <div>
                {this.props.children}
            </div>
        )

## app.js
// Your main stylesheet
import '../styles/general/styles.scss';

// Modules
import React from 'react';
import ReactDOM from 'react-dom';
import createBrowserHistory from 'history/lib/createBrowserHistory'
import Router from 'react-router';
import routes from './routes';

## index.html
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<div id="root"><%- reactOutput %></div>

## index.js
// Components
import App from '../components/Main';
import feed from './feed';

export default {
    path: '/',
    component: App,
    childRoutes: [
        feed.index,
        feed.item

## index.js
import Feed from './components/Feed';
import Item from './components/Item';

export default {
    index: {
        path: 'feed',
        getComponent(location, cb) {
            cb(null, Feed);
        }
    },

## Feed.jsx
/**
 * Created by mobinni on 08/12/15.
 */
import React, {Component} from 'react';
import {Link} from 'react-router';
if(process.env.BROWSER) {
  require( '../../../../styles/components/feed.scss');
}
class Feed extends Component {
    constructor(props, context) {
	var webpack = require('webpack');
	var HtmlWebpackPlugin = require('html-webpack-plugin');
	var ExtractTextPlugin = require("extract-text-webpack-plugin");

	module.exports = {
	entry: {
	// entry point for your app
	app: ['webpack-hot-middleware/client', __dirname + '/../app/scripts/app.js'],
	// vendors
	vendors: [
	.
	├── app
	│ ├── images
	│ ├── index.html
	│ ├── scripts
	│ │ ├── app.js
	│ │ ├── components
	│ │ │ └── Main.jsx
	│ │ ├── devtools.js
	│ │ └── routes
	{
	"name": "redux_isomorphic_kit",
	"version": "0.0.1",
	"description": "A modern isomorphic setup containing: React, Redux, NodeJS, WebPack, Redux DevTools, Serverside rendering, React Router, etc.",
	"dependencies": {
	"ejs": "^2.3.4",
	"history": "^1.13.1",
	"lodash": "^3.10.1",
	"react": "^0.14.0",
	"react-dom": "^0.14.3",
	import React, {Component} from 'react';
	import {Link} from 'react-router';

	class Main extends Component {
	render() {
	return (
	<div>
	{this.props.children}
	</div>
	)
	// Your main stylesheet
	import '../styles/general/styles.scss';

	// Modules
	import React from 'react';
	import ReactDOM from 'react-dom';
	import createBrowserHistory from 'history/lib/createBrowserHistory'
	import Router from 'react-router';
	import routes from './routes';
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<link href="styles.css" rel="stylesheet" type="text/css"/>
	</head>
	<body>

	<div id="root"><%- reactOutput %></div>
	// Components
	import App from '../components/Main';
	import feed from './feed';

	export default {
	path: '/',
	component: App,
	childRoutes: [
	feed.index,
	feed.item
	import Feed from './components/Feed';
	import Item from './components/Item';

	export default {
	index: {
	path: 'feed',
	getComponent(location, cb) {
	cb(null, Feed);
	}
	},
	/**
	* Created by mobinni on 08/12/15.
	*/
	import React, {Component} from 'react';
	import {Link} from 'react-router';
	if(process.env.BROWSER) {
	require( '../../../../styles/components/feed.scss');
	}
	class Feed extends Component {
	constructor(props, context) {