From edcc071d3ce1c03984f9ccecdbedbe01ec088d19 Mon Sep 17 00:00:00 2001 From: jotaoncode Date: Mon, 18 Jul 2016 02:21:14 -0300 Subject: [PATCH] Added day - 3 with the boiler plate in order to start creating code from the very begining without thinking on code bundling --- day-3/ecma6/.babelrc | 11 +++ day-3/ecma6/.bootstraprc | 113 +++++++++++++++++++++++++++ day-3/ecma6/.eslintrc | 26 ++++++ day-3/ecma6/README.md | 17 ++++ day-3/ecma6/bin/server.js | 14 ++++ day-3/ecma6/index.html | 18 +++++ day-3/ecma6/karma.conf.js | 34 ++++++++ day-3/ecma6/package.json | 87 +++++++++++++++++++++ day-3/ecma6/server.js | 32 ++++++++ day-3/ecma6/webpack/common.config.js | 88 +++++++++++++++++++++ day-3/ecma6/webpack/dev.config.js | 37 +++++++++ day-3/ecma6/webpack/prod.config.js | 36 +++++++++ 12 files changed, 513 insertions(+) create mode 100644 day-3/ecma6/.babelrc create mode 100644 day-3/ecma6/.bootstraprc create mode 100644 day-3/ecma6/.eslintrc create mode 100644 day-3/ecma6/README.md create mode 100644 day-3/ecma6/bin/server.js create mode 100644 day-3/ecma6/index.html create mode 100644 day-3/ecma6/karma.conf.js create mode 100644 day-3/ecma6/package.json create mode 100644 day-3/ecma6/server.js create mode 100644 day-3/ecma6/webpack/common.config.js create mode 100644 day-3/ecma6/webpack/dev.config.js create mode 100644 day-3/ecma6/webpack/prod.config.js diff --git a/day-3/ecma6/.babelrc b/day-3/ecma6/.babelrc new file mode 100644 index 0000000..535d3c8 --- /dev/null +++ b/day-3/ecma6/.babelrc @@ -0,0 +1,11 @@ +{ + "presets": ["react", "es2015" , "stage-0"], + "plugins": [ + ["transform-decorators-legacy"] + ], + "env": { + "start": { + "presets": ["react-hmre"] + } + } +} diff --git a/day-3/ecma6/.bootstraprc b/day-3/ecma6/.bootstraprc new file mode 100644 index 0000000..7246fff --- /dev/null +++ b/day-3/ecma6/.bootstraprc @@ -0,0 +1,113 @@ +--- +# Output debugging info +# loglevel: debug + +# Major version of Bootstrap: 3 or 4 +bootstrapVersion: 3 + +# Webpack loaders, order matters +styleLoaders: + - style + - css + - sass + +# Extract styles to stand-alone css file +# Different settings for different environments can be used, +# It depends on value of NODE_ENV environment variable +# This param can also be set in webpack config: +# entry: 'bootstrap-loader/extractStyles' +# extractStyles: false +# env: +# development: +# extractStyles: false +# production: +# extractStyles: true + + +# Customize Bootstrap variables that get imported before the original Bootstrap variables. +# Thus, derived Bootstrap variables can depend on values from here. +# See the Bootstrap _variables.scss file for examples of derived Bootstrap variables. +# +# preBootstrapCustomizations: ./path/to/bootstrap/pre-customizations.scss + + +# This gets loaded after bootstrap/variables is loaded +# Thus, you may customize Bootstrap variables +# based on the values established in the Bootstrap _variables.scss file +# +# bootstrapCustomizations: ./path/to/bootstrap/customizations.scss + + +# Import your custom styles here +# Usually this endpoint-file contains list of @imports of your application styles +# +# appStyles: ./path/to/your/app/styles/endpoint.scss + + +### Bootstrap styles +styles: + + # Mixins + mixins: true + + # Reset and dependencies + normalize: true + print: true + glyphicons: true + + # Core CSS + scaffolding: true + type: true + code: true + grid: true + tables: true + forms: true + buttons: true + + # Components + component-animations: true + dropdowns: true + button-groups: true + input-groups: true + navs: true + navbar: true + breadcrumbs: true + pagination: true + pager: true + labels: true + badges: true + jumbotron: true + thumbnails: true + alerts: true + progress-bars: true + media: true + list-group: true + panels: true + wells: true + responsive-embed: true + close: true + + # Components w/ JavaScript + modals: true + tooltip: true + popovers: true + carousel: true + + # Utility classes + utilities: true + responsive-utilities: true + +### Bootstrap scripts +scripts: + transition: true + alert: true + button: true + carousel: true + collapse: true + dropdown: true + modal: true + tooltip: true + popover: true + scrollspy: true + tab: true + affix: true \ No newline at end of file diff --git a/day-3/ecma6/.eslintrc b/day-3/ecma6/.eslintrc new file mode 100644 index 0000000..a1b0b7c --- /dev/null +++ b/day-3/ecma6/.eslintrc @@ -0,0 +1,26 @@ +{ + "parser": "babel-eslint", + "extends": "eslint-config-airbnb", + "env": { + "browser": true, + "node": true, + "mocha": true + }, + "globals": { + "connect": true + }, + "rules": { + "max-len": 0, + "react/jsx-uses-react": 2, + "react/jsx-uses-vars": 2, + "react/react-in-jsx-scope": 2, + "block-scoped-var": 0, + "padded-blocks": 0, + "no-console": 0, + "id-length": 0, + "no-unused-expressions": 0, + }, + "plugins": [ + "react" + ] +} diff --git a/day-3/ecma6/README.md b/day-3/ecma6/README.md new file mode 100644 index 0000000..aa3da64 --- /dev/null +++ b/day-3/ecma6/README.md @@ -0,0 +1,17 @@ +## Directory App for react redux + +SPA, very simple one just to learn about redux. + +## References + +Todos from redux examples, and https://github.com/anorudes/redux-easy-boilerplate. + +Also learning from React in a day book :). + +Also learnt about react router too. + +## Contributors + +Juan José García + +www.jotaoncode.com diff --git a/day-3/ecma6/bin/server.js b/day-3/ecma6/bin/server.js new file mode 100644 index 0000000..ceb6ad4 --- /dev/null +++ b/day-3/ecma6/bin/server.js @@ -0,0 +1,14 @@ +var fs = require('fs'); + +var babelrc = fs.readFileSync('./.babelrc'); +var config; + +try { + config = JSON.parse(babelrc); +} catch (err) { + console.error('==> ERROR: Error parsing your .babelrc.'); + console.error(err); +} + +require('babel-core/register')(config); +require('../server'); diff --git a/day-3/ecma6/index.html b/day-3/ecma6/index.html new file mode 100644 index 0000000..896dccf --- /dev/null +++ b/day-3/ecma6/index.html @@ -0,0 +1,18 @@ + + + + + Directors Application + + + + + + + +
+ + + + + diff --git a/day-3/ecma6/karma.conf.js b/day-3/ecma6/karma.conf.js new file mode 100644 index 0000000..9131ddd --- /dev/null +++ b/day-3/ecma6/karma.conf.js @@ -0,0 +1,34 @@ +module.exports = (config) => { + config.set({ + basePath: 'src', + singleRun: true, + frameworks: ['mocha'], + reporters: ['dots'], + browsers: ['Chrome'], + files: [ + 'test/**/*.spec.js', + ], + preprocessors: { + 'test/**/*.spec.js': ['webpack'], + }, + webpack: { + resolve: { + extensions: ['', '.js', '.ts'], + modulesDirectories: ['node_modules', 'src'], + }, + module: { + loaders: [{ + test: /\.js$/, + loader: 'babel-loader', + }], + }, + }, + webpackMiddleware: { + stats: { + color: true, + chunkModules: false, + modules: false, + }, + }, + }); +}; diff --git a/day-3/ecma6/package.json b/day-3/ecma6/package.json new file mode 100644 index 0000000..a8cc40d --- /dev/null +++ b/day-3/ecma6/package.json @@ -0,0 +1,87 @@ +{ + "name": "directors-application-react-redux", + "version": "0.0.1", + "description": "Directory application using react and redux", + "scripts": { + "clean": "rimraf dist", + "build": "webpack --progress --verbose --colors --display-error-details --config webpack/common.config.js", + "build:production": "npm run clean && npm run build", + "lint": "eslint src", + "start": "node bin/server.js", + "test": "karma start" + }, + "repository": { + "type": "git", + "url": "https://github.com/jotaoncode/directory-app-react-redux.git" + }, + "license": "MIT", + "authors": [ + "Jota On Code (https://github.com/jotaoncode)" + ], + "devDependencies": { + "autoprefixer": "6.3.1", + "babel-core": "^6.4.5", + "babel-eslint": "^5.0.0-beta6", + "babel-loader": "^6.2.1", + "babel-plugin-react-transform": "^2.0.0", + "babel-plugin-transform-decorators-legacy": "^1.3.4", + "babel-polyfill": "^6.3.14", + "babel-preset-es2015": "^6.3.13", + "babel-preset-react": "^6.3.13", + "babel-preset-react-hmre": "^1.0.1", + "babel-preset-stage-0": "^6.3.13", + "bootstrap-loader": "^1.0.5", + "bootstrap-sass": "^3.3.6", + "classnames": "^2.2.3", + "css-loader": "^0.23.1", + "eslint": "^1.10.3", + "eslint-config-airbnb": "3.1.0", + "eslint-plugin-react": "^3.15.0", + "expect": "^1.13.4", + "exports-loader": "^0.6.2", + "express": "^4.13.4", + "express-open-in-editor": "^1.1.0", + "extract-text-webpack-plugin": "^1.0.1", + "file-loader": "^0.8.5", + "history": "^2.0.0-rc2", + "imports-loader": "^0.6.5", + "jasmine-core": "^2.4.1", + "karma": "^0.13.19", + "karma-chrome-launcher": "^0.2.2", + "karma-mocha": "^0.2.1", + "karma-webpack": "^1.7.0", + "less": "^2.5.3", + "less-loader": "^2.2.2", + "mocha": "^2.3.4", + "morgan": "^1.6.1", + "node-sass": "^3.4.2", + "postcss-import": "^7.1.3", + "postcss-loader": "^0.8.0", + "react-addons-css-transition-group": "^0.14.6", + "react-document-meta": "^2.0.0-rc2", + "react-dom": "^0.14.6", + "react-hot-loader": "^1.3.0", + "react-loading-order-with-animation": "^1.0.0", + "react-transform-hmr": "^1.0.1", + "redux-form": "^4.1.5", + "redux-logger": "2.4.0", + "redux-thunk": "^1.0.3", + "resolve-url-loader": "^1.4.3", + "rimraf": "^2.5.0", + "sass-loader": "^3.1.2", + "style-loader": "^0.13.0", + "url-loader": "^0.5.7", + "webpack": "^1.12.11", + "webpack-dev-middleware": "^1.5.0", + "webpack-dev-server": "^1.14.1", + "webpack-hot-middleware": "^2.6.0", + "webpack-merge": "^0.7.3" + }, + "dependencies": { + "jquery": "^2.2.0", + "react": "^0.14.6", + "react-redux": "^4.0.6", + "react-router": "^2.0.0-rc5", + "redux": "^3.1.4" + } +} diff --git a/day-3/ecma6/server.js b/day-3/ecma6/server.js new file mode 100644 index 0000000..5c8b1c1 --- /dev/null +++ b/day-3/ecma6/server.js @@ -0,0 +1,32 @@ +const http = require('http'); +const express = require('express'); +const app = express(); + +app.use(require('morgan')('short')); + +(function initWebpack() { + const webpack = require('webpack'); + const webpackConfig = require('./webpack/common.config'); + const compiler = webpack(webpackConfig); + + app.use(require('webpack-dev-middleware')(compiler, { + noInfo: true, publicPath: webpackConfig.output.publicPath, + })); + + app.use(require('webpack-hot-middleware')(compiler, { + log: console.log, path: '/__webpack_hmr', heartbeat: 10 * 1000, + })); + + app.use(express.static(__dirname + '/')); +})(); + +app.get(/.*/, function root(req, res) { + res.sendFile(__dirname + '/index.html'); +}); + +const server = http.createServer(app); +server.listen(process.env.PORT || 3000, function onListen() { + const address = server.address(); + console.log('Listening on: %j', address); + console.log(' -> that probably means: http://localhost:%d', address.port); +}); diff --git a/day-3/ecma6/webpack/common.config.js b/day-3/ecma6/webpack/common.config.js new file mode 100644 index 0000000..878865a --- /dev/null +++ b/day-3/ecma6/webpack/common.config.js @@ -0,0 +1,88 @@ +const path = require('path'); +const autoprefixer = require('autoprefixer'); +const postcssImport = require('postcss-import'); +const merge = require('webpack-merge'); + +const development = require('./dev.config.js'); +const production = require('./prod.config.js'); + +require('babel-polyfill').default; + +const TARGET = process.env.npm_lifecycle_event; + +const PATHS = { + app: path.join(__dirname, '../src'), + build: path.join(__dirname, '../dist'), +}; + +process.env.BABEL_ENV = TARGET; + +const common = { + entry: [ + PATHS.app, + ], + + output: { + path: PATHS.build, + filename: 'bundle.js', + }, + + resolve: { + extensions: ['', '.jsx', '.js', '.json', '.scss'], + modulesDirectories: ['node_modules', PATHS.app], + }, + + module: { + loaders: [{ + test: /bootstrap-sass\/assets\/javascripts\//, + loader: 'imports?jQuery=jquery', + }, { + test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, + loader: 'url?limit=10000&mimetype=application/font-woff', + }, { + test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, + loader: 'url?limit=10000&mimetype=application/font-woff2', + }, { + test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, + loader: 'url?limit=10000&mimetype=application/octet-stream', + }, { + test: /\.otf(\?v=\d+\.\d+\.\d+)?$/, + loader: 'url?limit=10000&mimetype=application/font-otf', + }, { + test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, + loader: 'file', + }, { + test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, + loader: 'url?limit=10000&mimetype=image/svg+xml', + }, { + test: /\.js$/, + loaders: ['babel-loader'], + exclude: /node_modules/, + }, { + test: /\.png$/, + loader: 'file?name=[name].[ext]', + }, { + test: /\.jpg$/, + loader: 'file?name=[name].[ext]', + }], + }, + + postcss: (webpack) => { + return [ + autoprefixer({ + browsers: ['last 2 versions'], + }), + postcssImport({ + addDependencyTo: webpack, + }), + ]; + }, +}; + +if (TARGET === 'start' || !TARGET) { + module.exports = merge(development, common); +} + +if (TARGET === 'build' || !TARGET) { + module.exports = merge(production, common); +} diff --git a/day-3/ecma6/webpack/dev.config.js b/day-3/ecma6/webpack/dev.config.js new file mode 100644 index 0000000..6ae224d --- /dev/null +++ b/day-3/ecma6/webpack/dev.config.js @@ -0,0 +1,37 @@ +const webpack = require('webpack'); +const ExtractTextPlugin = require('extract-text-webpack-plugin'); + +module.exports = { + devtool: 'cheap-module-eval-source-map', + entry: [ + 'bootstrap-loader', + 'webpack-hot-middleware/client', + './src/index', + ], + output: { + publicPath: '/dist/', + }, + + module: { + loaders: [{ + test: /\.scss$/, + loader: 'style!css?localIdentName=[path][name]--[local]!postcss-loader!sass', + }], + }, + + plugins: [ + new webpack.DefinePlugin({ + 'process.env': { + NODE_ENV: '"development"', + }, + __DEVELOPMENT__: true, + }), + new ExtractTextPlugin('bundle.css'), + new webpack.optimize.OccurenceOrderPlugin(), + new webpack.HotModuleReplacementPlugin(), + new webpack.NoErrorsPlugin(), + new webpack.ProvidePlugin({ + jQuery: 'jquery', + }), + ], +}; diff --git a/day-3/ecma6/webpack/prod.config.js b/day-3/ecma6/webpack/prod.config.js new file mode 100644 index 0000000..1ca3a1a --- /dev/null +++ b/day-3/ecma6/webpack/prod.config.js @@ -0,0 +1,36 @@ +const webpack = require('webpack'); +const ExtractTextPlugin = require('extract-text-webpack-plugin'); + +module.exports = { + devtool: 'source-map', + + entry: ['bootstrap-loader/extractStyles'], + + output: { + publicPath: 'dist/', + }, + + module: { + loaders: [{ + test: /\.scss$/, + loader: 'style!css!postcss-loader!sass', + }], + }, + + plugins: [ + new webpack.DefinePlugin({ + 'process.env': { + NODE_ENV: '"production"', + }, + __DEVELOPMENT__: false, + }), + new ExtractTextPlugin('bundle.css'), + new webpack.optimize.DedupePlugin(), + new webpack.optimize.OccurenceOrderPlugin(), + new webpack.optimize.UglifyJsPlugin({ + compress: { + warnings: false, + }, + }), + ], +};