{"id":13990846,"url":"https://github.com/lapanti/ts-react-boilerplate","last_synced_at":"2025-07-22T13:31:47.849Z","repository":{"id":142837117,"uuid":"86661515","full_name":"lapanti/ts-react-boilerplate","owner":"lapanti","description":"A very opinionated (React/TypeScript/Redux/etc) frontend boilerplate","archived":true,"fork":false,"pushed_at":"2018-08-30T09:54:08.000Z","size":5482,"stargazers_count":45,"open_issues_count":8,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-08-09T13:17:55.268Z","etag":null,"topics":["bem","boilerplate","browserify","budo","concurrently","express","jest","react","react-dom","react-redux","react-router","redux","redux-observable","sass","typescript","yarn"],"latest_commit_sha":null,"homepage":"https://ts-react-boilerplate.js.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lapanti.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-30T05:12:49.000Z","updated_at":"2024-01-15T01:54:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"8ba6b572-c3f0-4201-99a6-10650742ebb8","html_url":"https://github.com/lapanti/ts-react-boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lapanti%2Fts-react-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lapanti%2Fts-react-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lapanti%2Fts-react-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lapanti%2Fts-react-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lapanti","download_url":"https://codeload.github.com/lapanti/ts-react-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227099035,"owners_count":17730697,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bem","boilerplate","browserify","budo","concurrently","express","jest","react","react-dom","react-redux","react-router","redux","redux-observable","sass","typescript","yarn"],"created_at":"2024-08-09T13:03:23.826Z","updated_at":"2024-11-29T10:31:58.124Z","avatar_url":"https://github.com/lapanti.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# A very opinionated frontend boilerplate\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/Lapanti/ts-react-boilerplate.svg)](https://greenkeeper.io/)\n[![Build Status](https://img.shields.io/travis/Lapanti/ts-react-boilerplate/master.svg?style=flat-square)](https://travis-ci.org/Lapanti/ts-react-boilerplate) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT) [![Dependency Status](https://david-dm.org/lapanti/ts-react-boilerplate.svg?style=flat-square)](https://david-dm.org/lapanti/ts-react-boilerplate) [![DevDependency Status](https://img.shields.io/david/dev/lapanti/ts-react-boilerplate.svg?style=flat-square)](https://david-dm.org/lapanti/ts-react-boilerplate?type=dev) [![Coverage Status](https://img.shields.io/coveralls/Lapanti/ts-react-boilerplate/master.svg?style=flat-square)](https://coveralls.io/github/Lapanti/ts-react-boilerplate?branch=master) [![Code Climate](https://img.shields.io/codeclimate/issues/github/Lapanti/ts-react-boilerplate.svg?style=flat-square)](https://codeclimate.com/github/Lapanti/ts-react-boilerplate/issues)\n\n## Purpose\n\nThis is all you need to get started in developing your own web application, using TypeScript, React, server-side rendering and all the other hip tools. If you know what you are doing, you can follow the [quick start guide](#quickstart) or you can go learn with the walk-through starting [here](/docs/STRUCTURE.md).\n\n## Contents\n- [Quick start guide](#quickstart)\n    - [Requirements](#requirements)\n    - [Download the source code](#download)\n    - [Starting development](#startingdevelopment)\n- [Tips and suggestions](#tipsandsuggestions)\n- [How to Docker](#dockerization)\n- [Dependencies](#dependencies)\n- [Contributing](#contributing)\n    - [Development](#development)\n    - [Testing](#testing)\n    - [Roadmap](#roadmap)\n- [License and contact information](#license)\n\n## \u003ca name=\"quickstart\"\u003eQuick start guide\u003c/a\u003e\n\n### \u003ca name=\"requirements\"\u003eRequirements\u003c/a\u003e\n- If you don't already have it, install [Node](https://nodejs.org/en/download/)\n- If you don't already have it, install [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)\n- Install [Yarn](https://yarnpkg.com/lang/en/docs/install/)\n\n### \u003ca name=\"download\"\u003eDownload the source code\u003c/a\u003e\n1. Open up your favorite kind of console\n2. Navigate to the folder in which you want to store the source code\n3. Run `git clone git@github.com:Lapanti/ts-react-boilerplate.git`\n\n### \u003ca name=\"startingdevelopment\"\u003eStarting development\u003c/a\u003e\n1. Open up the source code in your favorite TypeScript-capable editor (I recommend [Visual Studio Code](https://code.visualstudio.com/) if you don't have a preference)\n2. Run `yarn` in the console to install dependencies (it'll take a while on the first run, so go on and read ahead while you wait)\n3. Read through the comments in all the source files to get yourself acquinted with the ideas, concepts and patterns\n4. Start the application by running `yarn develop` in your console (inside the folder you downloaded the code to) and open up your browser in the address it prints out\n5. Create a deployable version of the application by running `yarn build`\n6. Start the deployable version by running `yarn start` or read the [How to Docker](#dockerization) guide to Dockerize your application\n7. To test your application, run `yarn test`\n8. Start modifying the code to build your own application\n\n## \u003ca name=\"tipsandsuggestions\"\u003eTips and suggestions\u003c/a\u003e\n- Make sure everything has a type (the more you squeeze out of the compiler the easier you're going to have it while developing)\n- Follow [BEM](http://getbem.com/naming/)-naming with CSS\n- Follow [Redux-ducks pattern](https://github.com/erikras/ducks-modular-redux) except that name the reducers as according to the file (see [IndexReducer.tsx](/src/modules/index/IndexReducer.tsx) for an example)\n\n## \u003ca name=\"dockerization\"\u003eHow to Docker\u003c/a\u003e\nThe [Dockerfile](/Dockerfile) is where you can find the configuration to build a [Docker](https://www.docker.com/) image out of your application. The first line of the `Dockerfile` (starting with `FROM`) includes the base for your Dockerfile, feel free to change it if you want to.\n1. Put your email to the [fourth line in the Dockerfile](/Dockerfile#L4)\n2. In your console run `docker build .`\n3. In your console run `docker run -d -p 8080:8080 bd9b1d6725bc` **but** replace `bd9b1d6725bc` with the image ID you received from the previous command\n4. Host your Docker image in your favorite cloud or local server (the web is filled with guides for this)\n\n## \u003ca name=\"dependencies\"\u003eDependencies\u003c/a\u003e\nThe following are all the dependencies of the project, with the reasoning behind their inclusion:\n- :package: [Yarn](https://yarnpkg.com/lang/en/) for package management\n- :muscle: [TypeScript](https://www.typescriptlang.org/) for types\n- :computer: [Express](https://expressjs.com/) for server-side rendering\n- :eyes: [React](https://facebook.github.io/react/) to build the UI\n    - :calling: [ReactDOM](https://facebook.github.io/react/docs/react-dom.html) to render the UI\n    - :tada: [React-Redux](https://github.com/reactjs/react-redux) to bind Redux to React\n    -  :milky_way: [React-Router](https://github.com/ReactTraining/react-router) for routes on the client\n- :gift: [Redux](https://github.com/reactjs/redux) to handle state\n    - :loop: [redux-observable](https://redux-observable.js.org/) to allow side-effects in Redux\n        - :mag: [RxJs](https://github.com/ReactiveX/RxJS) for streams\n- :electric_plug: [webpack](https://webpack.js.org/) to bundle JS files\n    - :flashlight: [webpack-dev-server](https://webpack.js.org/configuration/dev-server/#src/components/Sidebar/Sidebar.jsx) to host client while developing\n    - :punch: [awesome-typescript-loader](https://github.com/s-panferov/awesome-typescript-loader) to compile TypeScript in the webpack pipe\n    - :wave: [babel](https://babeljs.io) to transpile our compiled JavaScript to ES5 using [babel-loader](https://webpack.js.org/loaders/babel-loader/#src/components/Sidebar/Sidebar.jsx)\n    - :tongue: [sass-loader](https://webpack.js.org/loaders/sass-loader/#src/components/Sidebar/Sidebar.jsx) to compile SASS into CSS\n- :pray: [Jest](https://facebook.github.io/jest/) for testing\n    - :metal: [ts-jest](https://github.com/kulshekhar/ts-jest) to run Jest with TypeScript\n    - :ok_hand: [TSlint](https://palantir.github.io/tslint/) for linting\n    - :runner: [nock](https://github.com/node-nock/nock) to mock API calls\n    - :question: [sass-lint](https://github.com/sasstools/sass-lint) to lint SASS\n    - :bust_in_silhouette: [Enzyme](https://github.com/airbnb/enzyme) for snapshot and behavior testing\n        - :cyclone: [Enzyme-to-JSON](https://github.com/adriantoine/enzyme-to-json) to enable Enzyme snapshots with Jest\n        - :foggy: [enzyme-adapter-react-16](https://github.com/airbnb/enzyme/tree/master/packages/enzyme-adapter-react-16) to use Enzyme with React 16\n- :nail_care: [SASS](https://github.com/sass/node-sass) for styles\n- :two_hearts: [concurrently](https://github.com/kimmobrunfeldt/concurrently) to run multiple script concurrently\n\n## \u003ca name=\"contributing\"\u003eContributing\u003c/a\u003e\nRead the [contribution guidelines](./CONTRIBUTING.md)\n\n### \u003ca name=\"development\"\u003eDevelopment\u003c/a\u003e\n1. Clone this repo (or fork and clone)\n2. Navigate to the directory in console\n3. Run `yarn` in console\n    - [Optional] Install livereload extension to your browser in [Chrome](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=en) or [Firefox](https://addons.mozilla.org/en-gb/firefox/addon/livereload/)\n4. Run `yarn develop` in console\n5. Open your browser in the address printed to the console\n6. Modify the code with your favorite editor\n\n### \u003ca name=\"testing\"\u003eTesting\u003c/a\u003e\n- You can run all the tests with `yarn test`\n    - *psst, you can update your snapshots with* `yarn test -- -u`\n- You can run Jest tests in watch mode with `yarn test:watch`\n- You can run all tests with coverage with `yarn test:ci`\n\n### \u003ca name=\"roadmap\"\u003eRoadmap\u003c/a\u003e\n\n- [x] TypeScript\n- [x] React\n- [x] Redux\n- [x] Server-side rendering\n- [x] Browserify\n- [x] SASS support\n- [x] Add a test framework\n- [x] Dockerize\n- [ ] Deployment scripts to AWS\n- [ ] `create-ts-react-boilerplate` scripts\n\n## \u003ca name=\"license\"\u003eLicense and contact information\u003c/a\u003e\nYou can contact me through here in Github or on [Twitter](https://twitter.com/laurilavanti)\n\nAll of the code is licensed under the [MIT license](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flapanti%2Fts-react-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flapanti%2Fts-react-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flapanti%2Fts-react-boilerplate/lists"}