Initial commit

.eslintrc

@@ -0,0 +1,60 @@
+{
+    "parserOptions": {
+      "ecmaVersion": 6,
+      "sourceType": "module",
+      "ecmaFeatures": {
+		"jsx": true,
+		"experimentalObjectRestSpread":true
+      }
+    },
+    "overrides": [
+      {
+        "files": ["src/javascript/**/*.js"]
+      }
+    ],
+    "globals": {
+      "document": true,
+      "console": true,
+      "require": true,
+	  "window": true,
+	  "setTimeout":true,
+	  "setInterval":true,
+	  "Promise":true,
+	  "module":true,
+	  "__dirname":true
+    },
+    "rules": {
+      "no-const-assign": 2,
+      "no-var": 2,
+      "no-new-object": 2,
+      "object-shorthand": 2,
+      "quote-props": 2,
+      "quotes":["error", "single", { "allowTemplateLiterals": true }],
+      "prefer-template":2,
+      "func-style":["error","expression"],
+      "space-before-function-paren": ["error", "always"],
+      "space-before-blocks":2,
+      "no-param-reassign":2,
+      "prefer-arrow-callback":2,
+      "arrow-spacing": ["error", { "before": true, "after": true }],
+      "no-useless-constructor":2,
+      "no-dupe-class-members":2,
+      "no-duplicate-imports":2,
+      "no-iterator":2,
+      "dot-notation":2,
+      "one-var":["error", "never"],
+      "no-plusplus":2,
+      "eqeqeq":1,
+      "brace-style":2,
+      "indent": ["error", "tab"],
+      "space-infix-ops":2,
+      "newline-per-chained-call":2,
+      "padded-blocks":["error","never"],
+      "space-in-parens":2,
+      "array-bracket-spacing":2,
+      "object-curly-spacing":2,
+      "comma-style": ["error", "last"],
+      "semi": ["error", "never"],
+      "new-cap":2
+    }
+  }

.gitignore

@@ -0,0 +1,60 @@
+# Compiled source #
+###################
+dist/
+*.com
+*.class
+*.dll
+*.exe
+*.o
+*.so
+
+# Packages #
+############
+# it's better to unpack these files and commit the raw source
+# git has its own built in compression methods
+*.7z
+*.dmg
+*.gz
+*.iso
+*.jar
+*.rar
+*.tar
+*.zip
+
+# Logs and databases #
+######################
+*.log
+*.sql
+*.sqlite
+
+# OS generated files #
+######################
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+
+# Node specific #
+#################
+lib-cov
+*.seed
+*.log
+*.dat
+*.out
+*.pid
+*.gz
+pids
+logs
+#results
+npm-debug.log
+node_modules/
+
+
+# Sublime specific #
+####################
+sftp-config*
+*.sublime-*

Readme.md

@@ -0,0 +1,53 @@
+## Frontend Boilerplate
+
+This is still a work in progress
+## Contents
+* [Dependencies](#dependencies)
+* [Environment Variables](#env_variables)
+* [NPM Scripts & Gulp Tasks](#tasks)
+
+<a id='dependencies'></a>
+#### Dependencies 
+
+You can simply check the `package.json` what are you doing here?
+
+<a id='env_variables'></a>
+## Environment Variables 
+
+Environment variables are set with [cross-env](https://github.com/kentcdodds/cross-env) package
+git 
+Used in `tasks/buildscss.js` `tasks/buildjs.js` and `webpack.config.js` 
+for development and production builds
+
+<a id='tasks'></a>
+## NPM Scripts & Gulp Tasks 
+
+To develop run `npm run dev` 
+
+To Build run `npm run build`
+
+Gulp tasks are self explanatory : 
+
+* `npm run gulp -- new:component`
+* `npm run gulp -- new:view`
+* ~~`npm run gulp -- new:reducer`~~ DEPRECATED
+* `npm run gulp -- new:action` Now action creators create their own reducers
+* `npm run gulp -- new:shared` for new shared library for custom purposes
+* `npm run gulp -- analyze` analyzes your webpack bundle and exports into `dist/statistics.html`
+* `npm run gulp -- copy:assets` copies assets into `dist` folder
+* `npm run gulp -- copy:index` copies `index.html` into `dist` folder
+* `npm run gulp -- bitballoon` deploys to bitballoon.com
+* `npm run gulp -- eslint` Lints your code and generates errors
+* `npm run eslint:fix` Fixes auto fixable eslint errors
+* `npm run gulp -- jsdoc` Creates documentation using jsdoc 
+
+## TODO : 
+- [ ] Add `redux-thunk` as middleware
+- [ ] Add Licence
+- [ ] Better readme (Cover everything in the repo)
+- [ ] Add defaults for `new:component` and `new:view` tasks
+- [ ] Remove `styled-jsx` it is not efficient
+
+###### Notes : 
+Dont forget to `npm run gulp -- --tasks` and update this documentation after you add a new task
+

gulpfile.js

@@ -0,0 +1,41 @@
+const gulp = require('gulp')
+
+// Builders
+gulp.task('build',['build:js','build:scss','copy:assets'])
+gulp.task('build:js',[],require('./tasks/buildjs.js'))
+gulp.task('build:scss',[],require('./tasks/buildscss.js'))
+
+// Watchers
+gulp.task('watch',['watch:js','watch:scss','copy:assets'])
+gulp.task('watch:js', ['build:js'], () => {
+	gulp.watch('src/javascript/**/*.*',['build:js'])
+})
+gulp.task('watch:scss', ['build:scss'], () => {
+	gulp.watch('src/scss/**/*.scss',['build:scss'])
+})
+
+// Individual Tasks
+
+gulp.task('clean',[],require('./tasks/clean.js'))
+gulp.task('eslint',[],require('./tasks/eslint.js'))
+gulp.task('webserver',[],require('./tasks/webserver.js'))
+gulp.task('copy:assets',[],require('./tasks/copyassets.js'))
+gulp.task('bitballoon',[],require('./tasks/bitballoon.js'))
+gulp.task('jsdoc',[],require('./tasks/jsdoc.js'))
+
+// Boilerplate Tasks
+gulp.task('analyze',[],require('./tasks/analyze.js'))
+gulp.task('ensure',[],require('./tasks/ensure.js'))
+gulp.task('new:component',[],require('./tasks/new.component.js'))
+gulp.task('new:reducer',[],require('./tasks/new.reducer.js'))
+gulp.task('new:shared',[],require('./tasks/new.shared.js'))
+gulp.task('new:action',[],require('./tasks/new.action.js'))
+gulp.task('new:view',[],require('./tasks/new.view.js'))
+
+// Githooks
+gulp.task('precommit',['eslint'])
+
+// Development
+gulp.task('dev', ['webserver','build','watch'])
+
+gulp.task('default', ['dev'])

package.json

@@ -0,0 +1,61 @@
+{
+  "name": "awesome-frontend-boilerplate",
+  "version": "0.2.7",
+  "description": "A boilerplate for frontend starters",
+  "main": "index.js",
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-react": "^6.24.1",
+    "bitballoon": "^0.2.2",
+    "compression": "^1.7.1",
+    "cross-env": "^5.0.5",
+    "eslint": "^4.9.0",
+    "fs-extra": "^4.0.2",
+    "gulp": "^3.9.1",
+    "gulp-clean": "^0.3.2",
+    "gulp-cli": "^1.4.0",
+    "gulp-consolidate": "^0.2.0",
+    "gulp-eslint": "^4.0.0",
+    "gulp-jsdoc3": "^1.0.1",
+    "gulp-minify": "^1.0.0",
+    "gulp-notify": "^3.0.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-sass": "^3.1.0",
+    "gulp-sourcemaps": "^2.6.1",
+    "gulp-webserver": "^0.9.1",
+    "husky": "^0.14.3",
+    "inquirer": "^3.3.0",
+    "lodash": "^4.17.4",
+    "mustache": "^2.3.0",
+    "prop-types": "^15.6.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-redux": "^5.0.6",
+    "react-router-dom": "^4.2.2",
+    "redux": "^3.7.2",
+    "redux-devtools-extension": "^2.13.2",
+    "redux-thunk": "^2.2.0",
+    "shelljs": "^0.7.8",
+    "styled-jsx": "^2.1.2",
+    "superagent": "^3.6.3",
+    "tui-jsdoc-template": "^1.2.2",
+    "webpack": "^3.7.1",
+    "webpack-stream": "^4.0.0",
+    "webpack-visualizer-plugin": "^0.1.11",
+    "yargs": "^10.0.3"
+  },
+  "scripts": {
+    "test": "echo \"No test specified\" ",
+    "dev": "cross-env NODE_ENV=development npm run gulp -- dev",
+    "build": "cross-env NODE_ENV=production npm run gulp -- build",
+    "gulp": "gulp",
+    "eslint": "eslint",
+    "eslint:fix": "eslint --fix src",
+    "precommit": "gulp precommit"
+  },
+  "keywords": [],
+  "author": "Hilmi Tolga SAHIN",
+  "license": "ISC"
+}

src/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+</head>
+<body>
+    <div id="react-root"></div>
+    <script src='{{{environmentScript}}}'></script>
+</body>
+</html>

src/javascript/app.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import {Provider} from 'react-redux'
+
+import store from '@root/store'
+import Routes from '@root/routes'
+
+const root = document.getElementById('react-root')
+ReactDOM.render(
+	<Provider store={store}>
+		<Routes />
+	</Provider>,
+	root
+)

src/javascript/middleware.js

@@ -0,0 +1,6 @@
+const middleware = store => next => action => {
+	next(action)
+	console.log('Middleware : ',store.getState(),action)
+}
+
+export default middleware

src/javascript/routes.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import {
+	BrowserRouter as Router,
+	Route
+} from 'react-router-dom'
+import {Dashboard} from '@views'
+export default class Routes extends React.Component {
+	constructor (props) {
+		super(props)
+		this.state = {}
+	}
+
+	render () {
+		return (
+			<Router>
+				<div>
+					<Route exact path='/' component={Dashboard} />
+				</div>
+			</Router>
+		)
+	}
+}

src/javascript/store.js

@@ -0,0 +1,27 @@
+/**
+ * This is the root store for the application
+ *
+ * For Language Localization :
+ *
+ * Check here : https://github.com/ryandrewjohnson/react-localize-redux
+ * For further info on usage : http://redux.js.org/docs/basics/UsageWithReact.html
+ *
+ * @summary Root state store for the application
+ * @external Store
+ * @author Hilmi Tolga SAHIN ([email protected])
+ * @copyright [email protected]
+ * @requires redux
+ */
+
+import {createStore, combineReducers, applyMiddleware} from 'redux'
+import {composeWithDevTools} from 'redux-devtools-extension'
+import middleware from '@root/middleware'
+import ReduxThunk from 'redux-thunk'
+
+const defaultState = {}
+const store = createStore(combineReducers({
+	'example': (state, action) => {
+		return {'exampleState': true}
+	}
+}), defaultState, composeWithDevTools(applyMiddleware(middleware,ReduxThunk)))
+export default store