Adding initial codebase

JFusco · Jul 14, 2016 · 17b3db6 · 17b3db6
1 parent 40f8258
commit 17b3db6
Show file tree

Hide file tree

Showing 13 changed files with 266 additions and 1 deletion.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,6 @@
+{
+	"presets": [
+		"react",
+		"es2015"
+	]
+}
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,16 @@
+# This file is for unifying the coding style for different editors and IDEs.
+
+# No .editorconfig files above the root directory
+root = true
+
+# All files unicode
+[*]
+charset = utf-8
+
+# Main styles for our files
+[{src/**/*.{js,scss,html},package.json,gulpfile.babel.js,.babelrc,.scsslint.yml,webpack.config.babel.js}]
+indent_style = tab
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_size = 4
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+/node_modules/
+/.idea/
+/build/
+*.DS_Store
+npm-debug.log
diff --git a/README.md b/README.md
@@ -1,2 +1,33 @@
 # react-webpack-es6-chunking
-ES6 react + webpack + react-router + code-splitting starter project
+> ES6 react + webpack + react-router + code-chunking starter project.
+
+## Requirements
+The following tools are required to get this running.
+
+### Dev tools
+* [Node](https://nodejs.org/en/) `~6.2.2` *~NPM will install automatically*
+* NPM `~3.9.5`
+* [Webpack](https://webpack.github.io/) `~1.13.1`
+
+
+## Installation
+### Install Node
+Visit [here](https://nodejs.org/en/) - download and install the latest, stable version.
+This will install `npm` automatically.
+
+### Install Webpack globally
+```sh
+sudo npm install -g webpack
+```
+
+### Install dependencies
+`cd` into the root of the project and run this command
+```sh
+$ npm install
+```
+
+### Run project
+```sh
+$ npm run compile
+```
+**Open your browser and navigate to http://127.0.0.1:8080/**
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>React + Webapack + ES6 Starter</title>
+</head>
+<body>
+	<div id="application"></div>
+
+	<script type="text/javascript" src="/build/bundles/vendor.bundle.js"></script>
+	<script type="text/javascript" src="/build/bundles/main.bundle.js"></script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,28 @@
+{
+	"name": "react-webpack-es6-chunking",
+	"version": "1.0.0",
+	"description": "ES6 react + webpack + react-router + code-chunking starter project",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/JFusco/react-webpack-es6-chunking"
+	},
+	"dependencies": {
+		"react": "~15.2.1",
+		"react-router": "~2.5.2",
+		"react-dom": "~15.2.1"
+	},
+	"devDependencies": {
+		"babel-cli": "^6.10.1",
+	    "babel-core": "^6.10.4",
+	    "babel-loader": "^6.2.4",
+	    "babel-register": "^6.9.0",
+	    "babel-preset-react": "^6.11.1",
+	    "babel-preset-es2015": "^6.9.0",
+	    "http-server": "^0.9.0",
+	    "webpack": "^1.13.1"
+	},
+	"scripts": {
+		"serve": "http-server ./",
+		"compile": "webpack --display-chunks --display-modules --progress --colors && npm run serve"
+	}
+}
diff --git a/src/js/components/app.js b/src/js/components/app.js
@@ -0,0 +1,31 @@
+'use strict';
+
+import React, { Component } from 'react';
+import { Router, Route, Link } from 'react-router';
+import Nav from './nav';
+
+class App extends Component {
+	constructor(props){
+		super(props);
+
+		this.navItems = ['about', 'contact'];
+	}
+
+	render(){
+		return (
+			<div>
+				<h1>Multipage application</h1>
+
+				{/* Main navigation */}
+				<Nav data={this.navItems} />
+
+				{/* Page container */}
+				<div role="main">
+					{this.props.children}
+				</div>
+			</div>
+		);
+	}
+}
+
+export default App;
diff --git a/src/js/components/nav.js b/src/js/components/nav.js
@@ -0,0 +1,22 @@
+'use strict';
+
+import { Link } from 'react-router';
+import React from 'react';
+
+const Nav = ({data}) => {
+	return (
+		<nav>
+			<ul role="menu">
+				{data.map(item => {
+					return (
+						<li key={item}>
+							<Link to={`/${item}`} activeClassName="active">{item} page</Link>
+						</li>
+					)
+				})}
+			</ul>
+		</nav>
+	);
+};
+
+export default Nav;
diff --git a/src/js/index.js b/src/js/index.js
@@ -0,0 +1,10 @@
+'use strict';
+
+import React from 'react';
+import { Router, browserHistory } from 'react-router'
+import { render } from 'react-dom';
+import appRoutes from './routes/app.routes';
+
+render((
+  <Router history={browserHistory} routes={appRoutes} />
+), document.getElementById('application'));
diff --git a/src/js/pages/about.js b/src/js/pages/about.js
@@ -0,0 +1,13 @@
+'use strict';
+
+import React  from 'react';
+
+const About = () => {
+	return (
+		<div>
+			<h2>About page</h2>
+		</div>
+	);
+};
+
+export default About;
diff --git a/src/js/pages/contact.js b/src/js/pages/contact.js
@@ -0,0 +1,13 @@
+'use strict';
+
+import React  from 'react';
+
+const Contact = () => {
+	return (
+		<div>
+			<h2>Contact page</h2>
+		</div>
+	);
+};
+
+export default Contact;
diff --git a/src/js/routes/app.routes.js b/src/js/routes/app.routes.js
@@ -0,0 +1,33 @@
+'use strict';
+
+import { Route } from 'react-router';
+import App from '../components/app';
+
+const appRoutes = {
+	childRoutes: [
+		{
+			path: '/',
+			component: App,
+			childRoutes: [
+				{
+					path: '/about',
+					getComponent(loc, cb){
+						require.ensure([], (require) => {
+							cb(null, require('../pages/about').default);
+						});
+					}
+				},
+				{
+					path: '/contact',
+					getComponent(loc, cb){
+						require.ensure([], (require) => {
+							cb(null, require('../pages/contact').default);
+						});
+					}
+				}
+			]
+		}
+	]
+};
+
+export default appRoutes;
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
@@ -0,0 +1,44 @@
+'use strict';
+
+import webpack from 'webpack';
+import path from 'path';
+
+const paths = {
+	output: path.join(__dirname, '/build'),
+	src: './src/js',
+	bundles: 'bundles',
+	chunks: 'chunks',
+	public: '/build/'
+};
+
+export default {
+	entry: `${paths.src}/index.js`,
+	output: {
+		path: paths.output,
+		filename: `${paths.bundles}/[name].bundle.js`,
+		chunkFilename: `${paths.chunks}/[id].chunk.js`,
+		publicPath: paths.public
+	},
+	node: {
+		fs: 'empty'
+	},
+	module: {
+		loaders: [
+			{
+				loader: 'babel',
+				exclude: '/node_modules/',
+				test: /\.js?$/
+			}
+		]
+	},
+	plugins: [
+		new webpack.optimize.CommonsChunkPlugin({
+			name: 'vendor',
+			filename: `${paths.bundles}/[name].bundle.js`,
+			minChunks: 2
+		})
+	],
+	resolve: {
+		extensions: ['', '.js']
+	}
+};