Last active
June 16, 2017 00:04
-
-
Save cezarderevlean/a0a0d44a78715c17e0ed9e3fafabf6ff to your computer and use it in GitHub Desktop.
React.js env
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
{ | |
"presets":[ | |
[ | |
"es2015", | |
{ | |
"modules": false | |
} | |
], | |
"react" | |
], | |
"plugins": [ | |
"react-hot-loader/babel" | |
] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"env": { | |
"browser": true, | |
"es6": true, | |
"node": true | |
}, | |
"extends": [ | |
"eslint:recommended", | |
// "plugin:import/errors", | |
// "plugin:import/warnings", | |
"plugin:react/recommended" | |
], | |
"parserOptions": { | |
"ecmaFeatures": { | |
"experimentalObjectRestSpread": true, | |
"jsx": true | |
}, | |
"sourceType": "module" | |
}, | |
"plugins": [ | |
"react" | |
], | |
"rules": { | |
"indent": [ | |
"error", | |
4 | |
], | |
"linebreak-style": [ | |
"error", | |
"unix" | |
], | |
"quotes": [ | |
"error", | |
"single" | |
], | |
"semi": [ | |
"error", | |
"always" | |
] | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import ReactDOM from 'react-dom'; | |
import { AppContainer } from 'react-hot-loader'; | |
import App from './components/App.jsx'; | |
const render = Component => { | |
ReactDOM.render( | |
<AppContainer> | |
<Component /> | |
</AppContainer>, | |
document.getElementById('root') | |
); | |
}; | |
render(App); | |
if (module.hot) { | |
module.hot.accept('./components/App.jsx', () => { render(App); }); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "react-playground", | |
"version": "1.0.0", | |
"main": "index.js", | |
"author": "Cezar Derevlean", | |
"license": "MIT", | |
"scripts": { | |
"start": "webpack-dev-server", | |
"start:prod": "NODE_ENV=production webpack-dev-server", | |
"build": "webpack", | |
"build:prod": "NODE_ENV=production webpack" | |
}, | |
"dependencies": { | |
"foundation-sites": "^6.3.1", | |
"html-webpack-plugin": "^2.28.0", | |
"react": "^15.5.4", | |
"react-dom": "^15.5.4", | |
"react-hot-loader": "next", | |
"webpack": "^2.6.1", | |
"webpack-dev-server": "^2.4.5" | |
}, | |
"devDependencies": { | |
"babel-core": "^6.24.1", | |
"babel-loader": "^7.0.0", | |
"babel-preset-es2015": "^6.24.1", | |
"babel-preset-react": "^6.24.1", | |
"clean-webpack-plugin": "^0.1.16", | |
"css-loader": "^0.28.4", | |
"eslint": "^4.0.0", | |
"eslint-loader": "^1.8.0", | |
"eslint-plugin-react": "^7.1.0", | |
"extract-text-webpack-plugin": "^2.1.2", | |
"file-loader": "^0.11.2", | |
"node-sass": "^4.5.3", | |
"path": "^0.12.7", | |
"postcss-loader": "^2.0.6", | |
"resolve-url-loader": "^2.0.2", | |
"sass-loader": "^6.0.5", | |
"style-loader": "^0.18.2", | |
"url-loader": "^0.5.9", | |
"webpack-notifier": "^1.5.0" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import 'settings'; | |
@import 'foundation'; | |
@include foundation-global-styles; | |
@include foundation-grid; | |
// @include foundation-flex-grid; | |
// @include foundation-flex-classes; | |
// @include foundation-typography; | |
// @include foundation-forms; | |
// @include foundation-button; | |
// @include foundation-accordion; | |
// @include foundation-accordion-menu; | |
// @include foundation-badge; | |
// @include foundation-breadcrumbs; | |
// @include foundation-button-group; | |
// @include foundation-callout; | |
// @include foundation-card; | |
// @include foundation-close-button; | |
// @include foundation-menu; | |
// @include foundation-menu-icon; | |
// @include foundation-drilldown-menu; | |
// @include foundation-dropdown; | |
// @include foundation-dropdown-menu; | |
// @include foundation-responsive-embed; | |
// @include foundation-label; | |
// @include foundation-media-object; | |
// @include foundation-off-canvas; | |
// @include foundation-orbit; | |
// @include foundation-pagination; | |
// @include foundation-progress-bar; | |
// @include foundation-slider; | |
// @include foundation-sticky; | |
// @include foundation-reveal; | |
// @include foundation-switch; | |
// @include foundation-table; | |
// @include foundation-tabs; | |
// @include foundation-thumbnail; | |
// @include foundation-title-bar; | |
// @include foundation-tooltip; | |
// @include foundation-top-bar; | |
@include foundation-visibility-classes; | |
@include foundation-float-classes; | |
@include foundation-text-alignment; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const path = require('path'); | |
const webpack = require('webpack'); | |
const autoprefixer = require('autoprefixer'); | |
const HtmlWebpackPlugin = require('html-webpack-plugin'); | |
const ExtractTextPlugin = require('extract-text-webpack-plugin'); | |
const CleanWebpackPlugin = require('clean-webpack-plugin'); | |
const WebpackNotifier = require('webpack-notifier'); | |
const extractStyle = new ExtractTextPlugin({ // bundle css | |
filename: 'bundle.css', | |
disable: process.env.NODE_ENV !== 'production' // only in prod | |
}); | |
const cssLoader = { | |
loader: 'css-loader', | |
options: { | |
sourceMap: true, | |
importLoaders: 1 | |
} | |
}; | |
const postcssLoader = { | |
loader: 'postcss-loader', | |
options: { | |
sourceMap: true, | |
plugins: () => [ | |
autoprefixer( | |
'> 1%', | |
'last 2 versions', | |
'ie >= 9' | |
) | |
] | |
} | |
}; | |
const sassLoader = { | |
loader: 'sass-loader', | |
options: { | |
sourceMap: true, | |
includePaths: [ | |
path.resolve('./node_modules/foundation-sites/scss') | |
] | |
} | |
} | |
const PROD = process.env.NODE_ENV === 'production'; | |
module.exports = { | |
// debug: true, | |
devtool: PROD ? 'source-map' : 'eval-source-map',// 'cheap-module-eval-source-map', | |
entry: { | |
main: [ | |
'react-hot-loader/patch', // needed for hot module replacement | |
'./app/index.js' // actual entry point | |
] | |
}, | |
output: { | |
path: PROD ? path.resolve(__dirname, 'dist') : path.resolve(__dirname, 'build'), | |
// publicPath: '/', | |
filename: 'bundle.js', | |
}, | |
devServer: { | |
hot: !PROD, // disable hot module replacement in production | |
// contentBase: PROD ? path.join(__dirname, 'dist') : path.join(__dirname, 'build') | |
}, | |
plugins: [ // general plugins | |
new webpack.DefinePlugin({ // env var, use in JS | |
PROD: JSON.stringify(PROD) | |
}), | |
new HtmlWebpackPlugin({ // inject js in html | |
template: './app/index.html', | |
filename: 'index.html', | |
inject: 'body' | |
}), | |
new CleanWebpackPlugin([PROD ? 'dist' : 'build']), // clean before build | |
new WebpackNotifier({alwaysNotify: true}), // OS notifications on build & stuff | |
extractStyle | |
].concat(PROD ? [ // prod plugins | |
// new webpack.optimize.CommonsChunkPlugin('common.js'), | |
new webpack.optimize.UglifyJsPlugin() | |
] : [ // dev plugins | |
new webpack.NamedModulesPlugin(), // HMR: show module names in console | |
new webpack.HotModuleReplacementPlugin() | |
]), | |
module: { | |
rules: [{ // javascript | |
test: /\.jsx?$/, | |
exclude: /node_modules/, | |
use: [ | |
'babel-loader', // config: .babelrc | |
'eslint-loader' // config: .eslintrc | |
] | |
}, { | |
test: /\.css$/, | |
use: extractStyle.extract({ | |
fallback: 'style-loader', | |
use: [ | |
cssLoader, | |
postcssLoader | |
] | |
}) | |
}, { | |
test: /\.scss$/, | |
use: extractStyle.extract({ | |
fallback: 'style-loader', | |
use: [ | |
cssLoader, | |
postcssLoader, | |
'resolve-url-loader', | |
sassLoader | |
] | |
}) | |
}, { // images | |
test: /\.(svg|png|jpe?g|gif)$/, | |
loader: 'url-loader?limit=25000&name=img/[name].[ext]' | |
}, { // fonts | |
test: /\.(eot|woff|woff2|ttf)$/, | |
loader: 'url-loader?limit=25000&name=fonts/[name].[ext]' | |
}] | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment