diff --git a/.gitignore b/.gitignore
index c0e4c2d..037b3e7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,4 +26,5 @@ app.env
src/theme/semantic/
devSrvProxy.json
-docker-compose.yml
\ No newline at end of file
+
+docker-compose.yml
diff --git a/README.md b/README.md
old mode 100644
new mode 100755
index 972223a..7242320
--- a/README.md
+++ b/README.md
@@ -1,7 +1,8 @@
# react-semantic-ui-skeleton
-React + Redux + Semantic UI Skeleton
-Based on [wmonk/create-react-app-typescript](https://github.com/wmonk/create-react-app-typescript) but it's ejected for customization.
+React + Redux + Semantic UI Skeleton with Typescript
+
+Based on [Create React App](https://github.com/facebook/create-react-app).
This application uses [semantic ui themes](https://semantic-ui.com/usage/theming.html). Take a look at the `semantic` folder.
**Note:** We have to copy the themes from the nodes_modules package `semantic-ui` to `semantic` manually after updates to get the latest assets.
@@ -11,17 +12,13 @@ After you have copied these sources to your project you may want to change some
This is a list of files which contains default values.
- `app.env.dist`: url
-- `config/webpack.config.dev.js`: `publicPath` and `publicUrl` settings
-- `config/webpack.config.prod.js`: URL pattern for service worker
-- `config/webpackDevServer.config.js`: `public` and `allowedHosts` settings
-- `package.json`: change name
+- `package.json`: change name, configure [proxy](https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development) for dev
- `public/index.html`: change title
- `public/manifest.json`: change name
- `src/api/ConfiguredAxios.ts`: base API url
- `src/notify.tsx`: change logo
- `src/reducer.ts`: add your reducers
-- `src/registerServiceWorker.ts`: notification text
-- `devSrvProxy.json.dist`: Proxy config for dev server
+- `src/serviceWorker.ts`: notification text
- `docker-compose.yml.dist`: Docker Dev Env (f.e. join backend network)
## Frontend build
@@ -37,9 +34,9 @@ We have a two stage build.
You have to manually install the dependencies and to compile the semantic ui theme.
```bash
-docker run --rm --env-file=app.env.dist -i -v $(pwd):/app sandrokeil/typescript yarn install
+docker run --rm -i -v $(pwd):/app sandrokeil/typescript yarn install
-docker run --rm --env-file=app.env.dist -i -p 4000 -p 3000 -v $(pwd):/app sandrokeil/typescript yarn run semantic
+docker run --rm -i -v $(pwd):/app sandrokeil/typescript yarn run semantic
```
Now you can start the development server and open [http://localhost:3000/](http://localhost:3000/) in your favourite browser.
@@ -58,7 +55,22 @@ docker run --rm --env-file=app.env.dist -i -v $(pwd):/app sandrokeil/typescript
docker run --rm --env-file=app.env.dist -i -v $(pwd):/app sandrokeil/typescript yarn run build
```
+## Links
+
+- [Feature like module structure](https://www.robinwieruch.de/tips-to-learn-react-redux/#folderOrganization)
+- [Redux 4 + TypeScript: A type-safe approach](https://resir014.xyz/posts/2018/07/06/redux-4-plus-typescript/)
+- [A Strongly-Typed Redux Action Pattern for TypeScript 2.4+](https://spin.atomicobject.com/2017/07/24/redux-action-pattern-typescript/)
+- [Turning Requirements into React/Redux Code](https://decembersoft.com/posts/turning-requirements-into-react-redux-code/)
+- [Higher Order Components (HOCs)](https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e)
+- [Use a Render Prop!](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)
+- [React is Slow, React is Fast](https://marmelab.com/blog/2017/02/06/react-is-slow-react-is-fast.html)
+- [Curated tutorial and resource links for React / Redux](https://github.com/markerikson/react-redux-links)
+
## Browser extensions
- Install [redux-devtools-extension](https://github.com/zalmoxisus/redux-devtools-extension)
- Install [react-extension](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
+
+## TODO
+
+- The package [`recompose`](https://github.com/acdlite/recompose) is deprecated in favour of React Hooks, but it's not released yet.
\ No newline at end of file
diff --git a/config/env.js b/config/env.js
deleted file mode 100644
index 7c6133b..0000000
--- a/config/env.js
+++ /dev/null
@@ -1,93 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const paths = require('./paths');
-
-// Make sure that including paths.js after env.js will read .env variables.
-delete require.cache[require.resolve('./paths')];
-
-const NODE_ENV = process.env.NODE_ENV;
-if (!NODE_ENV) {
- throw new Error(
- 'The NODE_ENV environment variable is required but was not specified.'
- );
-}
-
-// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
-var dotenvFiles = [
- `${paths.dotenv}.${NODE_ENV}.local`,
- `${paths.dotenv}.${NODE_ENV}`,
- // Don't include `.env.local` for `test` environment
- // since normally you expect tests to produce the same
- // results for everyone
- NODE_ENV !== 'test' && `${paths.dotenv}.local`,
- paths.dotenv,
-].filter(Boolean);
-
-// Load environment variables from .env* files. Suppress warnings using silent
-// if this file is missing. dotenv will never modify any environment variables
-// that have already been set.
-// https://github.com/motdotla/dotenv
-dotenvFiles.forEach(dotenvFile => {
- if (fs.existsSync(dotenvFile)) {
- require('dotenv').config({
- path: dotenvFile,
- });
- }
-});
-
-// We support resolving modules according to `NODE_PATH`.
-// This lets you use absolute paths in imports inside large monorepos:
-// https://github.com/facebookincubator/create-react-app/issues/253.
-// It works similar to `NODE_PATH` in Node itself:
-// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
-// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
-// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
-// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
-// We also resolve them to make sure all tools using them work consistently.
-const appDirectory = fs.realpathSync(process.cwd());
-process.env.NODE_PATH = (process.env.NODE_PATH || '')
- .split(path.delimiter)
- .filter(folder => folder && !path.isAbsolute(folder))
- .map(folder => path.resolve(appDirectory, folder))
- .join(path.delimiter);
-
-// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
-// injected into the application via DefinePlugin in Webpack configuration.
-const REACT_APP = /^REACT_APP_/i;
-
-function getClientEnvironment(publicUrl) {
- const raw = Object.keys(process.env)
- .filter(key => REACT_APP.test(key))
- .reduce(
- (env, key) => {
- env[key] = process.env[key];
- return env;
- },
- {
- // Useful for determining whether we’re running in production mode.
- // Most importantly, it switches React into the correct mode.
- NODE_ENV: process.env.NODE_ENV || 'development',
- // Useful for resolving the correct path to static assets in `public`.
- // For example,
.
- // This should only be used as an escape hatch. Normally you would put
- // images into the `src` and `import` them in code to get their paths.
- PUBLIC_URL: publicUrl,
- }
- );
- // Stringify all values so we can feed into Webpack DefinePlugin
- const stringified = {
- 'process.env': Object.keys(raw).reduce(
- (env, key) => {
- env[key] = JSON.stringify(raw[key]);
- return env;
- },
- {}
- ),
- };
-
- return { raw, stringified };
-}
-
-module.exports = getClientEnvironment;
diff --git a/config/jest/cssTransform.js b/config/jest/cssTransform.js
deleted file mode 100644
index f1534f6..0000000
--- a/config/jest/cssTransform.js
+++ /dev/null
@@ -1,14 +0,0 @@
-'use strict';
-
-// This is a custom Jest transformer turning style imports into empty objects.
-// http://facebook.github.io/jest/docs/tutorial-webpack.html
-
-module.exports = {
- process() {
- return 'module.exports = {};';
- },
- getCacheKey() {
- // The output is always the same.
- return 'cssTransform';
- },
-};
diff --git a/config/jest/fileTransform.js b/config/jest/fileTransform.js
deleted file mode 100644
index ffce0da..0000000
--- a/config/jest/fileTransform.js
+++ /dev/null
@@ -1,12 +0,0 @@
-'use strict';
-
-const path = require('path');
-
-// This is a custom Jest transformer turning file imports into filenames.
-// http://facebook.github.io/jest/docs/tutorial-webpack.html
-
-module.exports = {
- process(src, filename) {
- return `module.exports = ${JSON.stringify(path.basename(filename))};`;
- },
-};
diff --git a/config/jest/typescriptTransform.js b/config/jest/typescriptTransform.js
deleted file mode 100644
index 9b138ac..0000000
--- a/config/jest/typescriptTransform.js
+++ /dev/null
@@ -1,7 +0,0 @@
-// Copyright 2004-present Facebook. All Rights Reserved.
-
-'use strict';
-
-const tsJestPreprocessor = require('ts-jest/preprocessor');
-
-module.exports = tsJestPreprocessor;
diff --git a/config/paths.js b/config/paths.js
deleted file mode 100644
index ce64504..0000000
--- a/config/paths.js
+++ /dev/null
@@ -1,57 +0,0 @@
-'use strict';
-
-const path = require('path');
-const fs = require('fs');
-const url = require('url');
-
-// Make sure any symlinks in the project folder are resolved:
-// https://github.com/facebookincubator/create-react-app/issues/637
-const appDirectory = fs.realpathSync(process.cwd());
-const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
-
-const envPublicUrl = process.env.PUBLIC_URL;
-
-function ensureSlash(path, needsSlash) {
- const hasSlash = path.endsWith('/');
- if (hasSlash && !needsSlash) {
- return path.substr(path, path.length - 1);
- } else if (!hasSlash && needsSlash) {
- return `${path}/`;
- } else {
- return path;
- }
-}
-
-const getPublicUrl = appPackageJson =>
- envPublicUrl || require(appPackageJson).homepage;
-
-// We use `PUBLIC_URL` environment variable or "homepage" field to infer
-// "public path" at which the app is served.
-// Webpack needs to know it to put the right