{"id":26867633,"url":"https://github.com/brunolm/ts-react-redux-startup","last_synced_at":"2025-07-12T13:08:24.966Z","repository":{"id":148044695,"uuid":"64528684","full_name":"brunolm/ts-react-redux-startup","owner":"brunolm","description":"TypeScript redux configuration project, check also https://github.com/brunolm/react-how-to","archived":false,"fork":false,"pushed_at":"2017-04-03T01:42:59.000Z","size":62,"stargazers_count":56,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-07T02:05:49.580Z","etag":null,"topics":["react","redux","typescript","typescript-redux-configuration","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brunolm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-07-30T05:52:02.000Z","updated_at":"2025-03-23T03:23:35.000Z","dependencies_parsed_at":"2023-05-28T07:15:17.776Z","dependency_job_id":null,"html_url":"https://github.com/brunolm/ts-react-redux-startup","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/brunolm/ts-react-redux-startup","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunolm%2Fts-react-redux-startup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunolm%2Fts-react-redux-startup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunolm%2Fts-react-redux-startup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunolm%2Fts-react-redux-startup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brunolm","download_url":"https://codeload.github.com/brunolm/ts-react-redux-startup/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunolm%2Fts-react-redux-startup/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264995629,"owners_count":23695000,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","redux","typescript","typescript-redux-configuration","webpack"],"created_at":"2025-03-31T05:17:48.400Z","updated_at":"2025-07-12T13:08:24.957Z","avatar_url":"https://github.com/brunolm.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ts-react-redux-startup\n\nTypeScript redux configuration project\n\n## Build\n\n```\nnpm run build\n```\n\n## Run\n\n```\nnpm run dev\n```\n\n\n## Steps\n\nNotes I took when creating this project\n\n- Installation\n  - npm i -S vash\n    - Template engine. You could just send html file instead.\n  - npm i -S serve-favicon\n  - npm i -S redux-thunk\n    - Used to allow async actions\n  - npm i -S redux\n  - npm i -S react-router\n  - npm i -S react-redux\n  - npm i -S react-dom\n  - npm i -S react\n  - npm i -S jquery\n  - npm i -S history\n  - npm i -S express\n  - npm i -S compression\n    - Optimize server\n  - npm i -S clone\n    - Like Object.assign but does a deep copy\n  - npm i -D @types/chai\n  - npm i -D @types/clone\n  - npm i -D @types/express\n  - npm i -D @types/history\n  - npm i -D @types/jquery\n  - npm i -D @types/mocha\n  - npm i -D @types/node\n  - npm i -D @types/react\n  - npm i -D @types/react-dom\n  - npm i -D @types/react-redux\n  - npm i -D @types/react-router\n  - npm i -D @types/redux\n  - npm i -D @types/redux-thunk\n  - npm i -D @types/webpack\n  - npm i -D autoprefixer\n    - Add browser prefix on css\n  - npm i -D babel\n  - npm i -D babel-core\n  - npm i -D babel-loader\n  - npm i -D babel-polyfill\n  - npm i -D babel-preset-es2015\n  - npm i -D babel-preset-stage-0\n  - npm i -D chai\n  - npm i -D css-loader\n  - npm i -D extract-text-webpack-plugin@2.0.0-beta.3\n    - Used to generate a CSS file from imports instead of a JS\n  - npm i -D file-loader\n  - npm i -D mocha\n  - npm i -D postcss-loader\n  - npm i -D precss\n    - Allows the use o SASS like styles without SASS\n  - npm i -D rimraf\n  - npm i -D style-loader\n  - npm i -D supervisor\n  - npm i -D ts-loader\n  - npm i -D typescript@beta\n  - npm i -D webpack@beta\n- Project configuration and flow\n  - tsconfig.json – TypeScript configuration\n    - “target”: “es6”\n      - Allows the use of async/await\n    - “jsx”: “react”\n      - Compiles tsx files into plain JavaScript\n    - “skipLibCheck”: true\n      - Ignore errors from definitions, since it is still in beta there are a few issues\n  - .babelrc – Babel configuration\n    - { “presets”: [ “es2015”, “stage-0” ] }\n      - Allows everything\n  - webpack.config.js – Webpack configuration\n    - context\n      - Defines root path context for webpack, probably always set it to __dirname (defaults to process.cwd())\n    - entry\n      - app\n        - Where to start building files, grabs index and follow requires\n    - output\n      - path\n        - Output folder location\n      - publicPath\n        - Application route to static files\n      - filename\n        - Output filename\n          - [name] – entry name\n    - resolve\n      - extensions\n        - Apply loaders on defined extensions\n        - “Empty” extension (”) allows parsing of files without extensions\n    - postcss\n      - Callback function for postcss-loader\n      - precss\n        - Parse SASS like styles\n      - autoprefixer\n        - Add prefix on browser specific styles\n    - module\n      - loaders\n        - { test: /\\.tsx?$/, loader: ‘babel!ts’, include: /src|spec/, }\n          - Builds ts and tsx from src and spec folder using ts-loader then babel-loader\n        - { test: /\\.s?css$/, loader: ExtractTextPlugin.extract({ fallbackLoader: ‘style’, loader: ‘css!postcss’ }), include: /src/, }\n          - Builds css from src folder using postcss, precss, autoprefixer, css, style\n    - plugins\n      - new ExtractTextPlugin({ filename: ‘app.css’, disable: false, allChunks: true })\n        - Extract contents and add to file, useful to generate css files\n  - app.js – App configuration\n    - app.use(compression())\n      - Enable gzip from server making requests smaller\n      - Note: If you are using webpack-dev-middleware and/or webpack-hot-middleware register these before compression, or it will interfere\n    - app.use(favicon(path))\n      - Setup favicon\n    - app.use(‘/static’, express.static(path))\n      - Makes routes to /static render static content from folder path\n    - app.set(‘view engine’, ‘vash’)\n      - Setup express to require(‘vash’) when rendering views\n    - app.set(‘views’, path)\n      - Setup root folder of views\n    - app.engine(‘cshtml’, vash.renderFile)\n      - Add support to cshtml to be rendered as vash views. This leverages VSCode razor editor\n  - index.js – Server startup\n    - app.use(‘/api’, require(‘./src/api’))\n      - Uses express.Router to create routes under ‘/api’\n    - app.use((req, res) =\u003e …)\n      - Catch-all route which will render index.cshtml view\n    - app.listen(…)\n      - Starts the server\n  - src/index.tsx – Redux starting point\n    - createStore(reducers, applyMiddleware(thunk))\n      - Create a single application store using all reducers\n        - State becomes: state.app, state.about…\n      - thunk allows async actions\n    - \u003cProvider store={ store }\u003e\n      - Setup redux store\n      - \u003cRouter history={ browserHistory } children={ Routes } /\u003e\n        - Setup routes\n  - src/routes.tsx – Setup routes\n    - \u003cRouter\u003e\n      - \u003cRoute path=”/” component={ App } /\u003e\n        - Accessing ‘/’ on the browser will render the App container\n  - src/components/app/index.tsx – Redux container\n    - class App extends React\u003cany, any\u003e\n      - Creates a react component\n    - connect(mapStateToProps)\n      - Converts state returned by the reducer into props for the component\n        - Uses static propTypes to inject properties\n  - src/actions/about.ts – export functions that a component can request\n    - mirror\n      - A helper function I created to make object value equal to its key, with a prefix (namespace) to differentiate actions since the entire application goes through the same dispatcher\n    - changeText()\n      - Makes an ajax request and calls dispatch on the callback\n      - Note: This is only possible because o thunk middleware, otherwise you have to return a plain object\n  - src/reducers/about.ts – State for about container\n    - Export a default function that handle actions when something is dispatched\n    - Should return a new object\n      - Don’t reassign the state, make a copy. Unless it falls on default which means “the dispatched action has nothing to do with this reducer so return the same state for it”\n      - Keep in mind\n        - Object.assign does not do a deep copy, that’s why I included clone\n\n### v1.1.0\n\n- Upgrade to `react-router` 4\n  - `browserHistory` no longer available\n    - Use `import { createBrowserHistory } from 'history';` instead\n  - Installed `react-router-redux`\n    - Use `import { syncHistoryWithStore } from 'react-router-redux';` to create redux routes\n    - Create `history` with `const history = syncHistoryWithStore(createBrowserHistory() as any, store);`\n    - Add `routing` to reducers\n      - `import { routerReducer as routing } from 'react-router-redux';`\n- Add ts-node and rename index and app to `.ts` files\n  - Change start script to use ts-node\n  - Add `ts-node*/` to gitignore\n- Add support for webpack-dev-middleware when using docker\n  - Add to middleware config `watchOptions: { poll: 300 }`\n- Change view engine default extension to `cshtml` intead of `vash`\n- Add `webpack-hot-middleware`\n  - Configure with `app.use(require('webpack-hot-middleware')(compiler));`\n  - On the startup react script added `module.hot.accept`\n- Migrate `webpack` to v2\n  - Custom properties are no longer allowed\n  - Loaders must include `-loader`\n  - Added postcss config on `LoaderOptionsPlugin`\n  - Removed invalid empty extension to resolve\n\n### v1.2.0\n\n- Optimize webpack to use DllPlugin\n  - Created a new webpack config file for vendor-only\n  - Added DllPlugin\n  - Referenced the Dll on the app webpack config file\n- Changed to `react-router-dom`\n  - Route structure changes\n  - Added `Switch` (\"The public API for rendering the first \u003cRoute\u003e that matches.\")\n- Added libraries\n  - react-router-dom\n  - node-sass\n    - peerDependency for sass-loader, allows the use of SASS\n  - bootstrap\n  - fontawesome\n  - jquery\n  - awesome-typescript-loader\n    - Better ts-loader which increases performance\n  - sass-loader\n    - Webpack loader for sass\n  - url-loader\n    - Transforms files into base64 urls, you can specify a limit and if it goes over then `file-loader` extracts as a file\n  - extendify\n    - Merge objects handling each type in a specific way\n    - Used to merge webpack configuration\n- Changed code so it assumes development environment if `NODE_ENV` is not `production`\n\n\n### v1.3.0\n\n- Components now have typed `props` and `state`\n  - Had to use `(connect as any)` as the definitions are not working in the current scenario\n- Added `experimentalDecorators` to allow `@connect` above the component rather than exporting bellow as a function call\n\n### v1.4.0\n\n- Add fontawesome example\n- Fix bootstrap\n- Refactor actions, reducer\n- Update tslint\n- Add sass lint and lint scripts\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrunolm%2Fts-react-redux-startup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrunolm%2Fts-react-redux-startup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrunolm%2Fts-react-redux-startup/lists"}