TSX Yeoman Generator

Goals

See Design Goals.

Features

• TypeScript
• React
  • CRA
  • Redux
  • Router
  • Testing Library
  • react-intl
• CSS in JS via Linaria

Configuration

Add the following GitHub secrets to your repo:

• CODECOV_TOKEN
• NPM_TOKEN

Installation

First, install Yeoman and generator-tsx using npm (we assume you have pre-installed Node.js).

npm install -g yo generator-tsx

Next, create a new folder for your project:

mkdir project-x
cd project-x

Finally, run the tsx generator to create your initial project files:

yo tsx [<appname>] [<version>] [options]

Project files are generated in the project-x directory.

Run yo tsx --help for more information about arguments and options.

Sub-generators

All generators create project files including tests.

• tsx:actions
• tsx:api
• tsx:component
• tsx:helper
• tsx:model
• tsx:reducer
• tsx:theme
• tsx:util
• tsx:actions
• tsx:actions
• tsx:actions

actions

yo tsx:actions foo

Creates Redux Actions in src/actions/foo/*.

This action also modifies src/actions/index.ts.

api

yo tsx:api foo

Creates an API client in src/api/foo/*.

component

yo tsx:component Foo [--connect]

Creates a React Component as a simple function in src/components/Foo/*.

helper

yo tsx:helper foo

Creates a helper function named foo and places it in src/helpers/foo.ts (supports slashes in the name for folder depth).

model

yo tsx:model Foo

Creates a model, defined as a TypeScript Interface, in src/models/Foo.ts.

reducer

yo tsx:reducer foo

Creates a Redux Reducer in src/reducers/foo/*.

theme

yo tsx:theme foo

Creates a theme in src/themes/foo that is modeled after your existing src/models/Theme.ts interface.

util

yo tsx:util foo

Creates a utility function named foo and places it in src/utils/foo.ts (supports slashes in the name for folder depth).

Roadmap

For details on our planned features and future direction, please refer to our roadmap.

Getting To Know Yeoman

• Yeoman has a heart of gold.
• Yeoman is a person with feelings and opinions, but is very easy to work with.
• Yeoman can be too opinionated at times but is easily convinced not to be.
• Feel free to learn more about Yeoman.

Contributing

Contributions are welcomed! Read the Contributing Guide for more information.

Licensing

This project is licensed under the Apache V2 License. See LICENSE for more information.