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.