File cleanup and fix #40

.eslintrc

@@ -1,7 +1,7 @@
 {
   "extends": [ "airbnb-base" ],
   "plugins": [ "react" ],
-  parser: "babel-eslint",
+  "parser": "babel-eslint",
   "rules": {
     "react/prop-types": [2],
     "no-unused-vars": 0,
@@ -13,22 +13,22 @@
     "import/no-unresolved": 0,
     "import/no-named-as-default": 2,
     "import/extensions": ["off", "never"],
-    "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
+    "comma-dangle": 0,
     "indent": [2, 2, {"SwitchCase": 1}],
     "no-console": 0,
     "no-alert": 0,
-    "no-multi-spaces": ["error", { exceptions: { "ImportDeclaration": true} }], // For import spacing
+    "no-multi-spaces": ["error", { "exceptions": { "ImportDeclaration": true} }], // For import spacing
     "linebreak-style": 0,
     "react/jsx-filename-extension": 0,
     "arrow-body-style": 0,
     "react/jsx-space-before-closing": 0,
-    "no-undef": 0, # Should look into this one #
+    "no-undef": 0,
     "eol-last": 0,
     "max-len": ["error", 120],
     "react/forbid-prop-types": 0,
     "object-curly-spacing": 0
   },
-  "settings": {  
+  "settings": {
     "import/resolve": {
       "moduleDirectory": ["node_modules", "src"]
     }

.stylelintrc

@@ -2,6 +2,6 @@
   "rules": {
     "max-empty-lines": 2,
     "max-line-length": 90,
-    "max-nesting-depth": 3,
+    "max-nesting-depth": 3
   }
 }

.travis.yml

@@ -11,3 +11,4 @@ before_install:
 
 script:
   - npm run lint
+  - npm run build

README.md

@@ -5,7 +5,7 @@
 Basic Structure for React app following Atomic Design.
 
 This base project allows you to have a basic React App folder structure following the principles of [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/).
-It contain some basic components that you can use. All the components are not (or minimally) stylized. The main objective
+It contains some basic components that you can use. All the components are not (or minimally) stylized. The main objective
 of this project is to have a basic structure, that is the reason we are not doing complex styles and/or adding many libs.
 
 Also, each component is a JSX file and a .scss file that is associated to the component. This means, all the 
@@ -20,7 +20,7 @@ web server in your machine that automatically updates the code and the styles wh
 
 ## Features
 
-* Webpack
+* Webpack 3
 * ES6
 * SASS
 * React Router
@@ -32,11 +32,10 @@ web server in your machine that automatically updates the code and the styles wh
 
 ## TODO List
 * Tests
-~~* Upgrade to Webpack 2.^ once stable
 
 ## Requirements
-* nodejs v5.*
-* npm v3.*
+* nodejs >= v8.*
+* npm >= v4.*
 
 
 ## Getting started
@@ -55,11 +54,11 @@ git clone -b master --single-branch --depth 1 git@github.com:Rulox/react-atomic-
 npm install
 ```
 
-##### Run the server
+##### Run the server 
 ```bash
 npm run start
 ```
-A browser webpack server should be ready on  http://localhost:8080/ (or any other URL+PORT that your terminal says). You can start working right now in the code, and all the changes will be visible in the browser just opened.
+A browser webpack server should be ready on  http://localhost:3200/ (or any other URL+PORT that your terminal says). You can start working right now in the code, and all the changes will be visible in the browser just opened.
 
 ## Predefined components
 But first, [What is Atomic Design?](http://bradfrost.com/blog/post/atomic-web-design/)
@@ -99,12 +98,18 @@ Create now the React component in the jsx file. Also create your .scss file and
 This project comes with the following scripts to help you.
 
 ```bash
-npm run start
+npm run watch
 ```
 1. Create CSS and JS bundles from Sass and JS.
 2. Launch a web server.
 3. Launch watchers on JS/CSS files.
 
+```bash
+npm run start
+```
+1. Create CSS and JS bundles from Sass and JS.
+2. Launch a web server.
+
 ```bash
 npm run build
 ```
@@ -113,7 +118,7 @@ npm run build
 ```bash
 npm run lint
 ```
-1. Launch JS Lint checker.
+1. Launch Lint checkers.
 
 ## Contributions
 Feel free to create a pull request or create an issue to add features or fix bugs.

app/_style.scss

@@ -3,4 +3,4 @@
 html, body, ul, li {
   margin: 0;
   padding: 0;
-}
+}

app/app.jsx

@@ -3,18 +3,20 @@ import ReactDOM from 'react-dom';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
 import Home from './components/templates/Home/Home';
-import Main from './components/templates/Main/Main';
+import Nav from './components/organisms/Nav/Nav';
 import About from './components/templates/About/About';
 
 require('./_style.scss');
 
 const App = () => (
   <BrowserRouter>
-    <Switch>
-      <Route exact path="/" component={Main}  />
-      <Route exact path="/" component={Home}  />
-      <Route path="/about"  component={About} />
-    </Switch>
+    <div>
+      <Nav />
+      <Switch>
+        <Route exact path="/" component={Home} />
+        <Route path="/about" component={About} />
+      </Switch>
+    </div>
   </BrowserRouter>
 );
 

app/components/organisms/Nav/Nav.jsx

@@ -9,7 +9,6 @@ const Nav = () =>
       <ul>
         <li><Link to="/">Home</Link></li>
         <li><Link to="/about">About</Link></li>
-        <li><Link to="/another-page">Another Page</Link></li>
       </ul>
     </nav>
   );

app/components/templates/Home/Home.jsx

@@ -1,9 +1,9 @@
-import React      from 'react';
-import PropTypes  from 'prop-types';
+import React from 'react';
+import PropTypes from 'prop-types';
 
-import Title      from '../../atoms/Title/Title';
-import Article    from '../../organisms/Article/Article';
-import Form       from '../../organisms/Form/Form';
+import Title from '../../atoms/Title/Title';
+import Article from '../../organisms/Article/Article';
+import Form from '../../organisms/Form/Form';
 
 require('./_style.scss');
 

package.json

@@ -6,7 +6,7 @@
     "start": "webpack-dev-server --config ./webpack.dev.config.js --inline --hot --progress --colors",
     "build": "webpack --config ./webpack.prod.config.js --progress --colors",
     "lint": "eslint ./app/ --ext .js --ext .jsx --fix",
-    "watch": "webpack --watch --progress",
+    "watch": "webpack-dev-server --config ./webpack.dev.config.js --inline --hot --colors --watch --progress",
     "clean": "rm -rf dist && npm cache clean"
   },
   "repository": {
@@ -33,7 +33,16 @@
     "prop-types": "^15.6.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "react-router-dom": "^4.2.2"
+    "react-router-dom": "^4.2.2",
+    "uglifyjs-webpack-plugin": "^1.0.1",
+    "webpack": "^3.10.0",
+    "webpack-dev-server": "^2.9.5",
+    "html-webpack-plugin": "^2.24.1",
+    "stylelint": "^8.3.1",
+    "stylelint-webpack-plugin": "^0.9.0",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "node-sass-glob-importer": "^5.0.0-alpha.15",
+    "webpack-merge": "^4.1.1"
   },
   "devDependencies": {
     "babel-core": "^6.18.2",
@@ -48,19 +57,11 @@
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.5.1",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "html-webpack-plugin": "^2.24.1",
     "node-sass": "^4.7.2",
-    "node-sass-glob-importer": "^5.0.0-alpha.15",
     "postcss-loader": "^2.0.6",
     "react-hot-loader": "^3.0.0-beta.6",
     "sass-loader": "^6.0.6",
-    "style-loader": "^0.19.0",
-    "stylelint": "^8.3.1",
-    "stylelint-webpack-plugin": "^0.9.0",
-    "uglifyjs-webpack-plugin": "^1.0.1",
-    "webpack": "^3.10.0",
-    "webpack-dev-server": "^2.9.5",
-    "webpack-merge": "^4.1.1"
+    "style-loader": "^0.19.0"
+
   }
 }

webpack.base.config.js

@@ -1,8 +1,7 @@
-const HtmlWebpackPlugin = require('html-webpack-plugin'),
-      StyleLintPlugin   = require('stylelint-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const StyleLintPlugin = require('stylelint-webpack-plugin');
 
-const path              = require('path'),
-      webpack           = require('webpack');
+const path = require('path');
 
 // Plugins
 const StyleLintPluginConfig = new StyleLintPlugin({
@@ -16,7 +15,7 @@ const StyleLintPluginConfig = new StyleLintPlugin({
   quiet: false,
 });
 const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
-  template: path.join(__dirname, "/public/index.html"),
+  template: path.join(__dirname, '/public/index.html'),
   filename: 'index.html',
 });
 
@@ -30,26 +29,15 @@ const fileRules = {
   test: /\.(png|jpg|gif|svg|otf|eot|ttf|woff)$/,
   loader: 'file-loader',
   options: {
-    publicPath: "./",
+    publicPath: './',
     outputPath: './assets/'
   }
 };
-const eslintRules = {
-  enforce: "pre",
-  test: /\.(js|jsx)$/,
-  exclude: /node_modules/,
-  loader: "eslint-loader",
-  options: {
-    emitError: true,
-    failOnError: true
-  }
-};
 
 module.exports = {
   entry: './app/app.jsx',
   module: {
     rules: [
-      eslintRules,
       jsRules,
       fileRules,
     ]

webpack.dev.config.js

@@ -1,31 +1,30 @@
-const merge         = require("webpack-merge"),
-      path          = require('path'),
-      webpack       = require('webpack');
+const merge = require('webpack-merge');
+const path = require('path');
 
-const GlobImporter  = require('node-sass-glob-importer');
+const GlobImporter = require('node-sass-glob-importer');
 
-const BASE_CONFIG   = require("./webpack.base.config");
+const BASE_CONFIG = require('./webpack.base.config');
 
 // Rules
-const sassRules = { 
-  loader: "sass-loader",
-  options: { 
+const sassRules = {
+  loader: 'sass-loader',
+  options: {
     importer: GlobImporter()
   }
 };
-const postcssRules = { 
+const postcssRules = {
   loader: 'postcss-loader',
   options: {
     config: {
       path: './app/postcss.config.js'
     }
   }
 };
-const cssRules = { 
-  test: /\.scss$/, 
+const cssRules = {
+  test: /\.scss$/,
   use: [
-    "style-loader",
-    "css-loader", 
+    'style-loader',
+    'css-loader',
     postcssRules,
     sassRules
   ],
@@ -34,12 +33,12 @@ const cssRules = {
 module.exports = merge(BASE_CONFIG, {
   output: {
     filename: 'index.js',
-    path: path.resolve(__dirname, "dist"),
+    path: path.resolve(__dirname, 'dist'),
     publicPath: '/',
   },
   devtool: 'source-map',
   devServer: {
-    contentBase: path.resolve(__dirname, "dist"),
+    contentBase: path.resolve(__dirname, 'dist'),
     historyApiFallback: true,
     progress: true,
     noInfo: true,