A very opinionated frontend boilerplate
Purpose
This 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 or you can go learn with the walk-through starting here.
Contents
- Quick start guide
- Tips and suggestions
- How to Docker
- Dependencies
- Contributing
- License and contact information
Quick start guide
Requirements
Download the source code
- Open up your favorite kind of console
- Navigate to the folder in which you want to store the source code
- Run
git clone git@github.com:Lapanti/ts-react-boilerplate.git
Starting development
- Open up the source code in your favorite TypeScript-capable editor (I recommend Visual Studio Code if you don't have a preference)
- 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) - Read through the comments in all the source files to get yourself acquinted with the ideas, concepts and patterns
- 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 - Create a deployable version of the application by running
yarn build
- Start the deployable version by running
yarn start
or read the How to Docker guide to Dockerize your application - To test your application, run
yarn test
- Start modifying the code to build your own application
Tips and suggestions
- Make sure everything has a type (the more you squeeze out of the compiler the easier you're going to have it while developing)
- Follow BEM-naming with CSS
- Follow Redux-ducks pattern except that name the reducers as according to the file (see IndexReducer.tsx for an example)
How to Docker
The Dockerfile is where you can find the configuration to build a Docker 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.
- Put your email to the fourth line in the Dockerfile
- In your console run
docker build .
- In your console run
docker run -d -p 8080:8080 bd9b1d6725bc
but replacebd9b1d6725bc
with the image ID you received from the previous command - Host your Docker image in your favorite cloud or local server (the web is filled with guides for this)
Dependencies
The following are all the dependencies of the project, with the reasoning behind their inclusion:
- Yarn for package management
- TypeScript for types
- Express for server-side rendering
- React to build the UI
- ReactDOM to render the UI
- React-Redux to bind Redux to React
- React-Router for routes on the client
- Redux to handle state
- redux-observable to allow side-effects in Redux
- RxJs for streams
- redux-observable to allow side-effects in Redux
- webpack to bundle JS files
- webpack-dev-server to host client while developing
- awesome-typescript-loader to compile TypeScript in the webpack pipe
- babel to transpile our compiled JavaScript to ES5 using babel-loader
- sass-loader to compile SASS into CSS
- Jest for testing
- ts-jest to run Jest with TypeScript
- TSlint for linting
- nock to mock API calls
- sass-lint to lint SASS
- Enzyme for snapshot and behavior testing
- Enzyme-to-JSON to enable Enzyme snapshots with Jest
- enzyme-adapter-react-16 to use Enzyme with React 16
- SASS for styles
- concurrently to run multiple script concurrently
Contributing
Read the contribution guidelines
Development
- Clone this repo (or fork and clone)
- Navigate to the directory in console
- Run
yarn
in console - Run
yarn develop
in console - Open your browser in the address printed to the console
- Modify the code with your favorite editor
Testing
- You can run all the tests with
yarn test
- psst, you can update your snapshots with
yarn test -- -u
- psst, you can update your snapshots with
- You can run Jest tests in watch mode with
yarn test:watch
- You can run all tests with coverage with
yarn test:ci
Roadmap
- [x] TypeScript
- [x] React
- [x] Redux
- [x] Server-side rendering
- [x] Browserify
- [x] SASS support
- [x] Add a test framework
- [x] Dockerize
- [ ] Deployment scripts to AWS
- [ ]
create-ts-react-boilerplate
scripts
License and contact information
You can contact me through here in Github or on Twitter
All of the code is licensed under the MIT license