A starter kit for universal react applications with typescript.
This starter kit is based off react-universally
which provides
all the build tooling and configuration you need to kick off your next universal React project,
whilst containing a minimal "project" set up allowing you to make your own architecture decisions (Redux/MobX etc).
Then, I went ahead added my architecture decisions and preferences. I'm trying to organize commits so you can rebase and drop any commits starting w/ "ESLINT - " and get back to the base provided by react-universally
NOTICE: Please read this important issue about the behaviour of this project when using
react-async-component
, which is by default bundled with it.
* nps commit : Creates a commit, don't use `git commit -m ...`
* nps precommit : Use series.nps('precommit.a', .'precommit.z')
* nps : Starts the development server
* nps launch.prod : Starts the production server
* nps build : Starts the build process
- ๐ฎ
nps
node-package-scripts removes the limitation of package.json enabling JS & //comments . Modify/package-scripts.js
and usenps <command>
instead ofnpm run <command>
. - ๐
commitizen
to help us generate beautifully formatted and consistent commit messages. - ๐น
cz-emoji
is a plugin for commitizen that adds emoji to the commit template. - ๐ถ
eslint
preferences, @falieson 's preferences based on @kentcdodds . - ๐จ refactor 'shared' => 'src' (per ctrlplusb/react-universally#521)
- ๐จ refactor 'shared/actions' & 'shared/reducers' => 'shared/redux/...' .
- ๐จ refactor 'src/components/demoApp/' => 'src/app' & 'src/components/HTML/index' => 'src/utils/renderHtml'
Falieson/react-universally--typescript/feature/redux-opinionated
- ๐ฐ
redux
as the state manager. - ๐
redux-developer-tools
chrome extension - ๐ถ
typescript
because Flow doesn't work as well, and we will get increasing returns as bugs are reduced while adding developers. - ๐ถ
tslint
like eslint but for typescript, @falieson 's preferences.
- ๐
react
as the view. - ๐
react-router
v4 as the router. - ๐
express
server. - ๐ญ
jest
as the test framework. - ๐ Combines
prettier
and Airbnb's ESlint configuration - performing code formatting on commit. Stop worrying about code style consistency. - ๐ Very basic CSS support - it's up to you to extend it with CSS Modules etc.
- โ๏ธ Code splitting - easily define code split points in your source using
react-async-component
. - ๐ Server Side Rendering.
- ๐ Progressive Web Application ready, with offline support, via a Service Worker.
- ๐ Long term browser caching of assets with automated cache invalidation.
- ๐ฆ All source is bundled using Webpack v3.
- ๐ Full ES2017+ support - use the exact same JS syntax across the entire project. No more folder context switching! We also only use syntax that is stage-3 or later in the TC39 process.
- ๐ง Centralised application configuration with helpers to avoid boilerplate in your code. Also has support for environment specific configuration files.
- ๐ฅ Extreme live development - hot reloading of ALL changes to client/server source, with auto development server restarts when your application configuration changes. All this with a high level of error tolerance and verbose logging to the console.
- โ SEO friendly -
react-helmet
provides control of the page title/meta/styles/scripts from within your components. - ๐ค Optimised Webpack builds via HappyPack and an auto generated Vendor DLL for smooth development experiences.
- ๐ Tree-shaking, courtesy of Webpack.
- ๐ฎ Security on the
express
server usinghelmet
andhpp
. - ๐ Asset bundling support. e.g. images/fonts.
- ๐ Preconfigured to support development and optimised production builds.
- โค๏ธ Preconfigured to deploy to
now
with a single command.
git clone https://github.com/falieson/2017-typescript-react my-project
cd my-project
npm install
npm run dev
Now go make some changes to the Home
component to see the tooling in action.