recreate

.babelrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+    presets: [
+        '@babel/preset-env',
+        '@babel/typescript',
+        '@babel/preset-react',
+    ],
+    plugins: [
+        'lodash',
+        'babel-plugin-styled-components',
+        '@babel/plugin-syntax-dynamic-import',
+        '@babel/plugin-proposal-class-properties',
+    ],
+}

.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

.gitignore

@@ -1,21 +1,16 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
+dist/
+node_modules/
 
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
+# OS generated files #
+######################
+.AppleDouble/
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+.idea
+*.happypack*
+ehthumbs.db
+Thumbs.db
+npm-debug.log

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Sander Vispoel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,104 @@
+# ts-react-redux-boilerplate
+React / Redux boilerplate using TypeScript. See [ts-react-redux-boilerplate-ssr](https://github.com/sandervspl/ts-react-redux-boilerplate-ssr) if you need server-side rendering.
+
+## Getting Started
+To quickly install the boilerplate you can run
+```
+$ npx create-sandervspl web-redux <folder name>
+```
+
+Manually:
+```
+$ git clone https://github.com/sandervspl/ts-react-redux-boilerplate
+```
+
+```
+$ cd ts-react-redux-boilerplate && npm i
+```
+
+```
+$ npm dev
+```
+
+## Features
+* [TypeScript](https://github.com/Microsoft/TypeScript) for better documentation of the written code
+* [React](https://github.com/facebook/react)
+* [Redux](https://github.com/rackt/redux)
+* [Redux Thunk](https://github.com/gaearon/redux-thunk) to handle async actions
+* [React Router](https://github.com/rackt/react-router)
+* [Express](http://expressjs.com)
+* [Babel](http://babeljs.io) for ES6 and ES7
+* [Webpack](http://webpack.github.io) for bundling
+* [Webpack Dev Middleware](http://webpack.github.io/docs/webpack-dev-middleware.html)
+* [Webpack Hot Middleware](https://github.com/glenjamin/webpack-hot-middleware)
+* [Redux Dev Tools](https://github.com/gaearon/redux-devtools) for next generation DX (developer experience).
+* [Styled-Components](https://github.com/styled-components/styled-components/) for CSS-in-JS
+* [TSLint](https://palantir.github.io/tslint/) to maintain a consistent code style
+* Refer to `package.json` for more details
+
+## NPM Scripts
+* Start develop server: `$ npm run dev`
+* Build client: `$ npm run build`
+* Start server: `$ npm run start`
+
+## Deployment
+Make sure all modules are installed:  
+```
+$ npm i
+```
+
+Create a build for production, this will add a `/dist` folder to the root with all bundles.  
+```
+$ npm run build
+```
+
+Run the server file to start server:
+```
+$ npm run start
+```
+
+For production I recommend to use [PM2](http://pm2.keymetrics.io/) to run the server with advanced process management.
+
+## Development Workflow
+### TypeScript
+This boilerplate uses TypeScript for more consistent and better code maintainability. TypeScript is a typed superset of JavaScript, which means variables can be assigned with data types. TypeScript will decrease bugs and improve documentation of the code.
+
+### Components
+The components are separated in `modules` and `common`. Modules are bundled components which depend on other components. Common components are components that are self-contained and can be used through the entire app.
+
+### Ducks
+This boilerplate uses the [Ducks](https://github.com/erikras/ducks-modular-redux) pattern for Redux, that means that the action types, actions and reducers are bundled together in an isolated module.
+
+### Redux DevTools
+To use the Redux DevTools install the [Redux DevTools extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) from the chrome webstore.
+
+## Styling
+### Local styles
+This project uses CSS-in-JS with [Styled-Components](https://github.com/styled-components/styled-components/).
+
+### Global styles
+You can configure the styled-components theme in the `styles` folder. In this folder you can also specify all the variables. When styling a components, grab the `theme` from the styled-component's props.
+
+we use an augmented version of `styled-components` that adds the theme type to the styled object.
+
+```ts
+import styled from 'styled-components';
+
+const Button = styled.button`
+    background-color: ${(props) => props.theme.color.white};
+`
+```
+
+You can also use custom props and its types
+
+```ts
+import styled from 'styled-components';
+
+const Button = styled.button<ButtonProps>`
+    background-color: ${(props) => props.theme.color[props.color]};
+`
+
+interface ButtonProps {
+  color: string;
+}
+```

config/index.ts

@@ -0,0 +1,11 @@
+export const env = process.env.NODE_ENV || 'development';
+
+export const port = {
+  client: Number(process.env.PORT) || 3000,
+  api: 4000,
+};
+
+export const api = {
+  production: `http://localhost:${port.api}/`,
+  development: `http://localhost:${port.api}/`,
+}[env];

config/webpack/base.ts

@@ -0,0 +1,112 @@
+import * as path from 'path';
+import * as webpack from 'webpack';
+import * as webpackMerge from 'webpack-merge';
+import * as HtmlWebpackPlugin from 'html-webpack-plugin';
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+
+const baseConfig: webpack.Configuration = {
+  output: {
+    filename: '[name].[hash].js',
+    chunkFilename: '[name].js',
+    path: path.resolve('dist'),
+    publicPath: '/',
+  },
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        vendor: {
+          // sync + async chunks
+          chunks: 'all',
+          // import file path containing node_modules
+          test: /node_modules/,
+        },
+        commons: {
+          name: 'vendors',
+          test: /node_modules/,
+          chunks: 'all',
+        },
+      },
+    },
+    // Keep the runtime chunk seperated to enable long term caching
+    // https://twitter.com/wSokra/status/969679223278505985
+    runtimeChunk: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        loader: 'babel-loader',
+      },
+      {
+        test: /\.svg$/,
+        oneOf: [
+          {
+            resourceQuery: /external/,
+            loader: 'url-loader?limit=10000',
+          },
+          {
+            loader: '@svgr/webpack',
+          },
+        ],
+      },
+      {
+        test: /\.(jpe?g|png|gif)$/i,
+        oneOf: [
+          {
+            resource: /external/,
+            loader: 'file-loader',
+            query: { name: 'static/[name].[ext]' },
+          },
+          {
+            loader: 'url-loader',
+            query: {
+              limit: 10000,
+              name: 'static/[name].[ext]',
+            },
+          },
+        ],
+      },
+      {
+        exclude: [
+          /\.[jt]sx?$/,
+          /\.css$/,
+          /\.svg$/,
+          /\.(jpe?g|png|gif)$/i,
+          /\.json$/,
+          /\.html/,
+        ],
+        loader: 'file-loader',
+        query: { name: 'static/[name].[ext]' },
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['*', '.js', '.ts', '.tsx'],
+    plugins: [
+      new TsconfigPathsPlugin(),
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      inject: true,
+      template: path.resolve('public/index.html'),
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeRedundantAttributes: true,
+        useShortDoctype: true,
+        removeEmptyAttributes: true,
+        removeStyleLinkTypeAttributes: true,
+        keepClosingSlash: true,
+        minifyJS: true,
+        minifyCSS: true,
+        minifyURLs: true,
+      },
+    }),
+  ],
+};
+
+export default baseConfig;
+
+export const merge = (...config: webpack.Configuration[]) => webpackMerge(baseConfig, ...config);

config/webpack/dev.ts

@@ -0,0 +1,24 @@
+import * as webpack from 'webpack';
+import * as path from 'path';
+import * as ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import { merge } from './base';
+import globals from './globals';
+
+const devConfig: webpack.Configuration = merge({
+  name: 'client',
+  mode: 'development',
+  entry: {
+    app: [
+      'webpack-hot-middleware/client?reload=true&noInfo=true',
+      '@babel/polyfill',
+      path.resolve('src/index.tsx'),
+    ],
+  },
+  plugins: [
+    new ForkTsCheckerWebpackPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.DefinePlugin(globals),
+  ],
+});
+
+module.exports = devConfig;

config/webpack/globals.ts

@@ -0,0 +1,15 @@
+import * as i from 'types';
+import { port } from '../index';
+
+const env = process.env.NODE_ENV || 'development';
+
+export default {
+  'process.env': {
+    NODE_ENV: JSON.stringify(env),
+    PORT: port.client,
+  },
+  __DEV__: env === 'development',
+  __TEST__: env === 'test',
+  __PROD__: env === 'production',
+  __ACC__: env === 'acceptation',
+};