ts-react-boilerplate

Based on Vortigern

Libraries

This boilerplate uses the following libraries and tools:

Core

• TypeScript
• React & React DOM for views.
• Router5 handles in-app routing.
• Redux manages application state.
• React Redux to use React-Redux bindings.
• React Router5 & Redux-Router5 integrate router5 with react and redux.

Utilities

• Reselect computes derived data, allowing Redux to store the minimal possible state.
• Redux Saga makes side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) in React/Redux applications easier and better.
• Isomorphic Fetch with ES6-Promise for using fetch api on both client & server side.
• React Helmet
• Sentry Browser captures exceptions during run time.
• TypeStyle makes css typesafe.

Build System

• Webpack for bundling.
  • TS Loader as ts loader.
  • React Hot Loader provides hot reload capability to our development server
  • File Loader
  • URL Loader
  • Manifest Plugin
  • TS Lint Loader for using tslint as preloader on build process.

Dev & Prod Server

• Webpack Dev Middleware
• Webpack Hot Middleware
• Express for running server both on client and server side.
• Serve Favicon for serving favicon.

Developer Experience

• ESLint for linting.
• Typescript ESLint enables ESLint to support TypeScript.
• Redux Logger
• Redux DevTools
• Chalk for colored terminal logs.

Testing

• Jest as test runner.
• TS Jest as Jest preprocessor
• Enzyme for rendering React Components.
• Jest Enzyme for asserting React Components.

Doc

• Storybook - UI component dev & test: React and more.

Directory Structure

.
├── build                       # Built, ready to serve app.
├── config                      # Root folder for configurations.
│   ├── types                   # Global type definitions, written by us.
│   ├── utils                   # Utils for config.
│   ├── webpack                 # Webpack configurations.
│   ├── index.js                # Combines main.js and main.local.js
│   ├── main.js                 # Default App configurations.
│   └── main.local.js           # Local App configurations.
├── node_modules                # Node Packages.
├── src                         # Source code.
│   ├── app                     # App folder.
│   │ ├── components            # Unconnected Components.
│   │ ├── constants             # Constants that are used throughout project like Color and FontSize
│   │ ├── containers            # Redux-Connected Components.
│   │ ├── helpers               # Helper Functions.
│   │ ├── images                # Images folder.
│   │ ├── models                # Models folder.
│   │ ├── pages                 # Page-like Components.
│   │ ├── redux                 # Redux related code aka data layer of the app.
│   │ │   ├── middlewares       # Redux middlewares.     
│   │ │   ├── modules           # Redux modules.     
│   │ │   ├── configureStore.ts # Redux store, contains global app state.
│   │ │   ├── IStore.ts         # Store shape.
│   │ │   └── rootReducer.ts    # Main reducers file to combine them.    
│   │ ├── routes                # Routes.
│   │ ├── sagas                 # Saga files.
│   │ └── selectors             # Redux selectors.
│   ├── vendor                  # Dealing with resources
│   ├── client.tsx              # Entry point for client side rendering.
│   ├── favicon.ico             # Favicon
│   ├── index.html              # html file for client side rendering
│   └── server.tsx              # Entry point for server side rendering.
├── translations                # For json translations.
├── .dockerignore               # Tells docker which files to ignore.
├── .editorconfig               # Configuration for editors.
├── .gitignore                  # Tells git which files to ignore.
├── .travis.yml                 # Travis file.
├── Dockerfile                  # Dockerfile.
├── LICENSE                     # License file
├── package.json                # Package configuration.
├── package-lock.json           # Package lock
├── README.md                   # This file
├── styleguide.config.js        # Config for doc
├── tsconfig.json               # TypeScript transpiler configuration.
└── tslint.json                 # Configures tslint.

Installation

You can clone from this repository and use master

$ git clone https://github.com/crazyfactory/ts-react-boilerplate
$ cd ts-react-boilerplate
$ npm install

Usage

All commands defaults to development environment. You can set NODE_ENV to production or use the shortcuts below.

# Running

$ npm start # This starts the app in development mode

# Starting it with the production build
$ NODE_ENV=production npm start # or
$ npm run start:prod

# Building 

$ npm build # This builds the app in development mode

# Commands below builds the production build
$ NODE_ENV=production npm build # or
$ npm run build:prod

# Testing
$ npm test

# Too see doc, run this command, and go to localhost:6060. Any component that has .md file with the same name will be
# doc-generated.
$ npm run doc

For Windows users, we recommend using the shortcuts instead of setting environment variables because they work a little different on Windows.

Sentry

Create main.local.js in config folder and export an object that has sentry key like so:

module.exports = {
  sentry: {
    dsn: YOUR_DSN,
    release: YOUR_RELEASE_VERSION
  }
  
  // other configs
  ...
}

Credits

This boilerplate is based on Vortigern and is heavily updated. This boilerplate is released under the MIT license.

Crazy Factory

Crazy factory is an online shop which manufactures piercings, jewellery, mobile covers, etc. All at factory prices!

You can contact us at [email protected]

Be sure to check out available jobs at Crazy.