ts-frontend-boilerplate

This framework has support for building applications with electron, it's very simple and powerful for building modern web app or desktop app

React Boilerplate uses Typescript, React, Redux, React Router, Eslint, PWAs, Webpack and React Hot Loader for rapid application development (HMR).

Demo Page : https://bonkzero404.github.io/ts-frontend-boilerplate/

Technology Stack

Installation

Clone the repository

$ git clone https://github.com/bonkzero404/ts-frontend-boilerplate.git
$ cd ts-frontend-boilerplate

Install Dependencies

## Using yarn
$ yarn

## Using npm
$ npm install

Running the Browser Examples with Development Mode

$ yarn watch

Now you can browse to http://localhost:11211/

If you want to play counter

Unit Test

Component Test defined & Snapshoot components

$ yarn test

Running With Electron for Development Mode

Set Environment Variable

open the .env file and change the ELECTRON variable to true

## Setting base path url
## this var only for web app
WEB_BASE_PATH = /

## Require for configure build webpack
SOURCE_DEV = src
PUBLIC_DEV = public
BUILD_DEST = dist

## Build Dir
## For web
BUILD_DIR_WEB = web

## For Electron
BUILD_DIR_ELECTRON = electron

## Require for configure webpack copy ignore in assets
ASSETS_COPY_IGNORE =

## Max asset size for transpile
MAX_FILE_ASSET_SIZE = 102400

## Dev server configure
DEV_HOST = http://localhost
DEV_PORT = 11211

## Sites configure
TITLE = Typescript React Framework

## Add & exposed global var in here
ELECTRON = false  ## <-- Change this if you want to use electron

Running Example Electron App

## first
$ yarn watch
## or 
$ npm run watch

## last
## then running the electron app with the following command:
$ yarn start:elc:dev
## or
$ npm run start:elc:dev

Build Script to Production and Running the Example App

Web App

## build the script
$ yarn build

## running for test production
$ yarn start:web:prod

Browse to http://localhost:5000

Electron App

## build the script
$ yarn build

## running for test production
$ yarn start:elc:prod

Build and Running with Docker

$ docker build -t ts-frontend-boilerplate .
$ docker run -p 11000:5000 -d ts-frontend-boilerplate

Browse to http://localhost:11000