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
  • Requirements
  • Download the source code
  • Starting development
• Tips and suggestions
• How to Docker
• Dependencies
• Contributing
  • Development
  • Testing
  • Roadmap
• License and contact information

Quick start guide

Requirements

• If you don't already have it, install Node
• If you don't already have it, install git
• Install Yarn

Download the source code

1. Open up your favorite kind of console
2. Navigate to the folder in which you want to store the source code
3. Run git clone [email protected]:Lapanti/ts-react-boilerplate.git

Starting development

1. Open up the source code in your favorite TypeScript-capable editor (I recommend Visual Studio Code if you don't have a preference)
2. 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)
3. Read through the comments in all the source files to get yourself acquinted with the ideas, concepts and patterns
4. 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
5. Create a deployable version of the application by running yarn build
6. Start the deployable version by running yarn start or read the How to Docker guide to Dockerize your application
7. To test your application, run yarn test
8. 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.

1. Put your email to the fourth line in the Dockerfile
2. In your console run docker build .
3. In your console run docker run -d -p 8080:8080 bd9b1d6725bc but replace bd9b1d6725bc with the image ID you received from the previous command
4. 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
• 🔌 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

1. Clone this repo (or fork and clone)
2. Navigate to the directory in console
3. Run yarn in console
   • [Optional] Install livereload extension to your browser in Chrome or Firefox
4. Run yarn develop in console
5. Open your browser in the address printed to the console
6. 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
• You can run Jest tests in watch mode with yarn test:watch
• You can run all tests with coverage with yarn test:ci

Roadmap

• TypeScript
• React
• Redux
• Server-side rendering
• Browserify
• SASS support
• Add a test framework
• 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