├── .babelrc ├── .gitignore ├── README.md ├── config ├── webpack.base.config.js ├── webpack.opt.config.js └── webpack.prod.config.js ├── dist ├── index.html ├── main.js └── style.css ├── package.json ├── server ├── index.js └── routes │ └── index.js └── src ├── index.html ├── index.js └── styles.scss /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/env", 4 | "@babel/preset-react", 5 | [ 6 | "@babel/preset-stage-2", 7 | { 8 | "decoratorsLegacy": true 9 | } 10 | ] 11 | ] 12 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Started Kit 2 | 3 | This is a `react starter kit`, which uses the bare minimum `webpack` configuration, only what's needed nothing else. An excellent started to build your application on and incrementally add more features to your `webpack` configuration(s). 4 | 5 | *** 6 | 7 | ##### Steps On How to Use This Kit 8 | * Clone this repository 9 | * Do an `$ npm intall` 10 | * Then depending on the build you want to run use the following to command in your terminal 11 | 12 | > npm run start:dev 13 | 14 | > npm run start:prod 15 | 16 | *** 17 | 18 | ##### Things Added To This Starter Kit 19 | - [x] dev-server configured with hot module reloading 20 | - [x] Webpack 4 added 21 | - [x] webpack development, production environment setup, ability to add as many environments as you want by simply chaning the ```--env.NODE_ENV``` in the `script` in `package.json` 22 | - [x] scss support 23 | - [x] @babel/env, @babel/preset-react, @babel/preset-stage-2 (version 7.0.0-beta.46) 24 | - [x] Webpack merge added to manage configurations in a very smart way. 25 | - [ ] react-router-4 26 | - [x] NodeJS backend up & running with ExpressJS framework. 27 | 28 | -------------------------------------------------------------------------------- /config/webpack.base.config.js: -------------------------------------------------------------------------------- 1 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 2 | var ExtractTextPlugin = require('extract-text-webpack-plugin'); 3 | 4 | module.exports = { 5 | module: { 6 | rules: [ 7 | { 8 | test: /\.js$/, 9 | exclude: /node_modules/, 10 | use: { 11 | loader: 'babel-loader' 12 | } 13 | }, 14 | { 15 | test: /\.scss$/, 16 | use: ExtractTextPlugin.extract({ 17 | fallback: "style-loader", 18 | use: "css-loader!sass-loader", 19 | }) 20 | } 21 | ] 22 | }, 23 | plugins: [ 24 | new HtmlWebpackPlugin({ 25 | template: './src/index.html', 26 | filename: './index.html' 27 | }), 28 | new ExtractTextPlugin('style.css') 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /config/webpack.opt.config.js: -------------------------------------------------------------------------------- 1 | var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 2 | var UglifyJsPlugin = require('uglifyjs-webpack-plugin'); 3 | 4 | module.exports = { 5 | optimization: { 6 | minimizer: [ 7 | new UglifyJsPlugin({ 8 | uglifyOptions: { 9 | mangle: { 10 | keep_fnames: true, 11 | }, 12 | }, 13 | }) 14 | ], 15 | }, 16 | plugins: [ 17 | new OptimizeCssAssetsPlugin(), 18 | ], 19 | } -------------------------------------------------------------------------------- /config/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var merge = require('webpack-merge'); 3 | 4 | var baseConfig = require('./webpack.base.config'); 5 | var optimizationConfig = require('./webpack.opt.config'); 6 | 7 | const productionConfiguration = function (env) { 8 | const NODE_ENV = env.NODE_ENV ? env.NODE_ENV : 'development'; 9 | return { 10 | plugins: [ 11 | new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(NODE_ENV) }), 12 | ] 13 | }; 14 | } 15 | 16 | module.exports = merge.smart(baseConfig, optimizationConfig, productionConfiguration); -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Tutorial 9 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /dist/main.js: -------------------------------------------------------------------------------- 1 | !function(e){var t={};function __webpack_require__(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,__webpack_require__),r.l=!0,r.exports}__webpack_require__.m=e,__webpack_require__.c=t,__webpack_require__.d=function(e,t,n){__webpack_require__.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},__webpack_require__.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},__webpack_require__.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return __webpack_require__.d(t,"a",t),t},__webpack_require__.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},__webpack_require__.p="",__webpack_require__(__webpack_require__.s=14)}([function(e,t,n){"use strict";function makeEmptyFunction(e){return function(){return e}}var r=function(){};r.thatReturns=makeEmptyFunction,r.thatReturnsFalse=makeEmptyFunction(!1),r.thatReturnsTrue=makeEmptyFunction(!0),r.thatReturnsNull=makeEmptyFunction(null),r.thatReturnsThis=function(){return this},r.thatReturnsArgument=function(e){return e},e.exports=r},function(e,t,n){"use strict";e.exports={}},function(e,t,n){"use strict";var r=function(e){};e.exports=function(e,t,n,o,a,i,l,u){if(r(t),!e){var c;if(void 0===t)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var s=[n,o,a,i,l,u],f=0;(c=new Error(t.replace(/%s/g,function(){return s[f++]}))).name="Invariant Violation"}throw c.framesToPop=1,c}}},function(e,t,n){"use strict"; 2 | /* 3 | object-assign 4 | (c) Sindre Sorhus 5 | @license MIT 6 | */var r=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(e){r[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var n,i,l=function(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(e),u=1;uthis.eventPool.length&&this.eventPool.push(e)}function rb(e){e.eventPool=[],e.getPooled=sb,e.release=tb}m(N.prototype,{preventDefault:function(){this.defaultPrevented=!0;var e=this.nativeEvent;e&&(e.preventDefault?e.preventDefault():"unknown"!=typeof e.returnValue&&(e.returnValue=!1),this.isDefaultPrevented=y.thatReturnsTrue)},stopPropagation:function(){var e=this.nativeEvent;e&&(e.stopPropagation?e.stopPropagation():"unknown"!=typeof e.cancelBubble&&(e.cancelBubble=!0),this.isPropagationStopped=y.thatReturnsTrue)},persist:function(){this.isPersistent=y.thatReturnsTrue},isPersistent:y.thatReturnsFalse,destructor:function(){var e,t=this.constructor.Interface;for(e in t)this[e]=null;for(t=0;t=ye),_e=String.fromCharCode(32),Ee={beforeInput:{phasedRegistrationNames:{bubbled:"onBeforeInput",captured:"onBeforeInputCapture"},dependencies:["topCompositionEnd","topKeyPress","topTextInput","topPaste"]},compositionEnd:{phasedRegistrationNames:{bubbled:"onCompositionEnd",captured:"onCompositionEndCapture"},dependencies:"topBlur topCompositionEnd topKeyDown topKeyPress topKeyUp topMouseDown".split(" ")},compositionStart:{phasedRegistrationNames:{bubbled:"onCompositionStart",captured:"onCompositionStartCapture"},dependencies:"topBlur topCompositionStart topKeyDown topKeyPress topKeyUp topMouseDown".split(" ")},compositionUpdate:{phasedRegistrationNames:{bubbled:"onCompositionUpdate",captured:"onCompositionUpdateCapture"},dependencies:"topBlur topCompositionUpdate topKeyDown topKeyPress topKeyUp topMouseDown".split(" ")}},Te=!1;function Mb(e,t){switch(e){case"topKeyUp":return-1!==ge.indexOf(t.keyCode);case"topKeyDown":return 229!==t.keyCode;case"topKeyPress":case"topMouseDown":case"topBlur":return!0;default:return!1}}function Nb(e){return"object"==typeof(e=e.detail)&&"data"in e?e.data:null}var Ne=!1;var Ue={eventTypes:Ee,extractEvents:function(e,t,n,r){var o=void 0,a=void 0;if(ve)e:{switch(e){case"topCompositionStart":o=Ee.compositionStart;break e;case"topCompositionEnd":o=Ee.compositionEnd;break e;case"topCompositionUpdate":o=Ee.compositionUpdate;break e}o=void 0}else Ne?Mb(e,n)&&(o=Ee.compositionEnd):"topKeyDown"===e&&229===n.keyCode&&(o=Ee.compositionStart);return o?(we&&(Ne||o!==Ee.compositionStart?o===Ee.compositionEnd&&Ne&&(a=nb()):(se._root=r,se._startText=ob(),Ne=!0)),o=pe.getPooled(o,t,n,r),a?o.data=a:null!==(a=Nb(n))&&(o.data=a),ib(o),a=o):a=null,(e=be?function(e,t){switch(e){case"topCompositionEnd":return Nb(t);case"topKeyPress":return 32!==t.which?null:(Te=!0,_e);case"topTextInput":return(e=t.data)===_e&&Te?null:e;default:return null}}(e,n):function(e,t){if(Ne)return"topCompositionEnd"===e||!ve&&Mb(e,t)?(e=nb(),se._root=null,se._startText=null,se._fallbackText=null,Ne=!1,e):null;switch(e){case"topPaste":return null;case"topKeyPress":if(!(t.ctrlKey||t.altKey||t.metaKey)||t.ctrlKey&&t.altKey){if(t.char&&1