Skip to content

Team-IF/JustHear.me-webclient

Repository files navigation

ts-react-boilerplate

Greenkeeper badge Build Status Dependency Status devDependency Status GitHub issues


Based on Vortigern

TypeScript React Redux

Libraries

This boilerplate uses the following libraries and tools:

Core

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

Dev & Prod Server

Developer Experience

Testing

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 is an online shop which manufactures piercings, jewellery, mobile covers, etc. All at factory prices!

You can contact us at dev@crazy-factory.com

Be sure to check out available jobs at Crazy.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published