Futuristic, bundle-free development environment for building Component-Driven SPA with React, Redux and TypeScript - utilizing power of Static Type-checking, ES.Next, CSS-Modules, Hot-reload, in-browser transpilation, tree-shaking - powered by JSPM (SystemJS & Rollup with tree-shaking)
A comprehensive guide to static typing "React & Redux" apps using TypeScript
https://github.com/piotrwitek/react-redux-typescript-guide
https://github.com/piotrwitek/react-redux-typescript-webpack-starter
http://piotrwitek.github.io/react-redux-typescript-jspm-starter/
No module bundling during development, instead loading source files (.ts/.tsx) directly in the browser (using plugin-typescript). Type-checking is disabled for speed and delegated to another process.
Type-checking is delegated to a seperate process using following options:
NOTE: There are two seperate tsconfig needed - one for type-checking during development and the other for sources compilation to create production bundle:
Enable strictNullChecks with noImplicitAny (compiler flags), to get Non-nullable Types (v2.0) and Smarter Type Inference (v2.1) (Source) which greatly increase your TypeScript experience.
Local dev-server with hot-reload out-of-the-box (using systemjs-hot-reloader).
Scaling: - this workflow can handle very large projects with thousands of modules without slowing down, basically because it re-import and re-evaluate only those modules that has changed in the browser using SystemJS Module Loader.__
More on differences with Webpack workflow from real project use-case by @jonaskello https://github.com/Microsoft/TypeScript/issues/1564#issuecomment-252903932
Most often your team is using different Editors/IDE's so you'll need to have a common way across the team to run type-checking using right version of TypeScript compiler for consistent results and avoid version mismatch issues.
Provided npm commands (JS emit is disabled to not emit files for type-checking)*:
tsc -p src --watch
- fast incremental type-checking in watch mode tsc -p src
- single thorough check TypeScript natively support "async & generator functions" transformations without any other tools when targeting ES5:
ts-node
runtime (CLI command npm test
)Fully automatic build script will generate your "vendor bundle" by parsing and extracting JSPM dependencies from package.json. No manual configuration.
When trying to load multiple external dependencies as seperate calls it can slow down page reload in the browsers.
Splitting external dependencies to a "vendor bundle" (from node_modules/
dependencies)can speed up page reload significantly by minimizing requests count.
Test reload speed improvement using following simple test procedure:
npm run dev:unbundle
-> open network tab in chrome dev tools -> reload the page -> check logged results npm run dev:bundle
-> open network tab in chrome dev tools -> reload page -> compare logged results with previous react-router-redux
to store routing history in redux state (Time-Travel Debugging)EXAMPLE: Consumer Component and CSS Module in TypeScript
bindActionCreators
boilerplate using object literal with actions instead of mapDispatchToProps
function issue #32vendor
dev-bundle (read below)>=4.0.0
npm i -g jspm
// Clone repo
git clone https://github.com/piotrwitek/react-redux-typescript-jspm-starter.git
// Install dependencies
npm install
// Install JSPM packages and create vendor dependencies bundle
npm run init
// Run development server with HMR
npm run dev
.
├── assets # static assets copied to dist folder
| ├── index.html # index.html configured for production use
| ├── loader-styles.css # css app loading indicator
| └── shim.min.js # core-js polyfill
├── dist # production build output
├── scripts # build and workflow scripts
├── src # app source code
│ ├── components # global reusable presentational components
│ ├── containers # container components providing redux context
│ ├── layouts # components defining page layouts
│ ├── services # modules abstracting communication with web services
│ ├── store # modules containing redux modules (reducers/constants/action creators)
│ ├── types # custom TypeScript definitions
│ ├── utils # app utility modules
│ ├── app.tsx # app entry module with routing config
│ └── tsconfig.tsx # TypeScript compiler config
├── temp # development vendor bundle output
├── index.html # index.html
├── jspm.config.js # system.js config for app dependencies
├── server.js # dev-server entry module
└── tslint.json # linter config
NOTE: Use index.html from assets for production, it have optimized loading logic for production. It is already configured in build script.
npm run dev:bundle
- build optional vendor dependencies bundle to speed-up page reload during development (re-run when dependencies was changed)npm run dev
- start local dev server with hot-reload and open browsernpm run tsc:watch
- if you don't use IDE with Intellisense, run this command for fast incremental type-checking in CLInpm run build
- create app.js & vendor.js bundles in dist/
folder
npm run build:app
- build only app.js bundle (run when project source code has changed)npm run build:vendor
- build only vendor.js bundle (run when project dependencies has changed)npm run prod
- start local dev server in dist/
folder running production bundlenpm run init
- install jspm packages and prebuilds vendor.dev.js bundle
npm run dev
or yarn dev
- start local dev server with hot-reload jspm-hmr
npm run dev:bundle
- build optional vendor dependencies bundle (vendor.dev.js) to speed-up page reload during development (non-minified with source-maps)
npm run dev:unbundle
- remove vendor.dev.js bundle package
(WARNING: it will result in loading all of vendor packages as multiple requests - use it only when needed e.g. leveraging HTTP/2 multiplexing/pipelining)
npm run tsc
- single thorough check
npm run tsc:watch
- fast incremental type-checking in watch mode
dist/
folder)npm run prod
- start local dev server in dist/
folder running production bundle
npm run build
- build all, app.js & vendor.prod.js bundle
npm run build:app
- build only src/
- app.js (minified, no source-maps)
npm run build:vendor
- build only node_modules/
dependencies - vendor.prod.js (minified, no source-maps)
npm run build:debug
- build debug version of app.js (non-minified with source-maps)
npm run clean
- clean dist, node_modules, jspm_packages folders
npm run lint
- run ts linter
npm run test
- run tests with jest runner
npm run test:update
- updates jest snapshots
npm run precommit
- pre commit git hook - runs linter and check types
npm run prepush
- pre push git hook - runs linter and tests
npm run deploy:init
- clone git repository in /dist
folder (gh-pages branch)
npm run deploy
- commit and push all changes found in /dist
folder
Copyright (c) 2016 Piotr Witek piotrek.witek@gmail.com (http://piotrwitek.github.io/)
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.