Totally reorganize project structure

Love it. Inspired by https://gist.github.com/ryanflorence/110d4538bf98694538de ESLint does not yet support glob-based rules, but likely will in v2: eslint/eslint#3611
cooperka · Nov 14, 2015 · 99b093f · 99b093f
1 parent c6407a2
commit 99b093f
Show file tree

Hide file tree

Showing 17 changed files with 70 additions and 67 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,3 +1,7 @@
 {
-  "extends": "airbnb"
+  "extends": "airbnb",
+
+  "env": {
+    "mocha": true
+  }
 }
diff --git a/karma.conf.js b/karma.conf.js
@@ -1,20 +1,21 @@
 const webpackConfig = require('./webpack.config');
 
-module.exports = function(config) {
+module.exports = (config) => {
   config.set({
     browsers: ['Chrome'],
 
     frameworks: ['mocha'],
 
     files: [
-      'tests.webpack.js',
+      '**/__tests__/*.js?',
     ],
 
     preprocessors: {
-      'tests.webpack.js': ['webpack', 'sourcemap'],
+      '**/__tests__/*.js?': ['webpack', 'sourcemap'],
     },
 
     webpack: {
+      resolve: webpackConfig.resolve,
       devtool: webpackConfig.devtool,
       module: webpackConfig.module,
     },

diff --git a/package.json b/package.json
@@ -1,10 +1,10 @@
 {
   "name": "react-simple-boilerplate",
   "version": "0.0.1",
-  "description": "Boilerplate repo for starting ReactJS apps. Mostly for personal use and sandboxing.",
-  "main": "src/app.js",
+  "description": "Boilerplate repo for starting ReactJS apps.",
+  "main": "views",
   "scripts": {
-    "lint": "eslint -c .eslintrc public src --ext .js,.jsx",
+    "lint": "eslint ./*.js? public views --ext .js,.jsx",
     "build": "webpack --progress --colors",
     "start": "webpack-dev-server --inline --hot --progress --colors --content-base public",
     "test": "karma start"

diff --git a/public/index.html b/public/index.html
@@ -5,7 +5,7 @@
         <title>Hello React!</title>
     </head>
     <body>
-        <div id="app"></div>
+        <div id="appContainer"></div>
         <script type="text/javascript" src="build/bundle.js"></script>
     </body>
 </html>
diff --git a/src/app.js b/src/app.js
diff --git a/src/style/hello-world.scss b/src/style/hello-world.scss
diff --git a/test/.eslintrc b/test/.eslintrc
diff --git a/test/components/hello-world.js b/test/components/hello-world.js
diff --git a/tests.webpack.js b/tests.webpack.js
diff --git a/src/style/app.scss → views/App/App.scss b/src/style/app.scss → views/App/App.scss
@@ -1 +1,7 @@
 @import '~normalize.css/normalize.css'; // Tilde resolves node modules
+
+@import '../common/variables';
+
+body {
+  background: $main-bkgd;
+}
diff --git a/views/App/HelloWorld/HelloWorld.scss b/views/App/HelloWorld/HelloWorld.scss
diff --git a/views/App/HelloWorld/__tests__/HelloWorld.test.jsx b/views/App/HelloWorld/__tests__/HelloWorld.test.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import TestUtils from 'react-addons-test-utils';
+import { expect } from 'chai';
+
+import HelloWorld from '../index';
+
+describe('HelloWorld component', function() {
+  beforeEach(() => {
+    this.component = TestUtils.renderIntoDocument(<HelloWorld />);
+    this.renderedDOM = () => ReactDOM.findDOMNode(this.component);
+  });
+
+  it('says hello to the world', () => {
+    const helloWorldNode = this.renderedDOM();
+    const helloWorldText = helloWorldNode.innerHTML;
+    expect(helloWorldText).to.contain('Hello');
+    expect(helloWorldText).to.contain('world');
+  });
+});
diff --git a/src/components/hello-world.js → views/App/HelloWorld/index.jsx b/src/components/hello-world.js → views/App/HelloWorld/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-require('../style/hello-world.scss');
+require('./HelloWorld.scss');
 
 class HelloWorld extends React.Component {
 

diff --git a/views/App/index.jsx b/views/App/index.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import HelloWorld from './HelloWorld';
+
+require('./App.scss');
+
+class App extends React.Component {
+
+  render() {
+    return (
+      <HelloWorld />
+    );
+  }
+
+}
+
+export default App;
diff --git a/views/common/variables.scss b/views/common/variables.scss
@@ -0,0 +1 @@
+$main-bkgd: lightgray;
diff --git a/views/index.jsx b/views/index.jsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('appContainer'));
diff --git a/webpack.config.js b/webpack.config.js
@@ -4,16 +4,20 @@ module.exports = {
 
   entry: [
     'webpack-hot-middleware/client',
-    './src/app.js',
+    './views',
   ],
 
+  resolve: {
+    extensions: ['', '.js', '.jsx'],
+  },
+
   output: {
     path: __dirname + '/build',
     publicPath: '/build',
     filename: 'bundle.js',
   },
 
-  devtool: 'cheap-module-eval-source-map',
+  devtool: 'inline-source-map',
 
   plugins: [
     new webpack.NoErrorsPlugin(),