Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/toddlucas/react-tsx-starter
Universal/Isomorphic React TypeScript Starter Project
https://github.com/toddlucas/react-tsx-starter
browserify gulp react redux typescript
Last synced: 2 months ago
JSON representation
Universal/Isomorphic React TypeScript Starter Project
- Host: GitHub
- URL: https://github.com/toddlucas/react-tsx-starter
- Owner: toddlucas
- License: bsd-3-clause
- Created: 2015-10-21T03:58:31.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T14:49:40.000Z (about 2 years ago)
- Last Synced: 2024-04-09T18:02:24.839Z (10 months ago)
- Topics: browserify, gulp, react, redux, typescript
- Language: JavaScript
- Homepage:
- Size: 1.77 MB
- Stars: 96
- Watchers: 9
- Forks: 19
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Universal/Isomorphic React TypeScript Starter
This project includes a working example of React, React Router, and TypeScript.
All the code is in TypeScript, written as either `.ts` or `.tsx` files.
The gulp-based build generates a browserified client file which is separate from the vendor file.
The vendor file currently includes react and react-router.
This separation speeds up the build process and can result in fewer client downloads when new builds are released.
The gulp build process works with gulp.watch.
This is a basic starter project with a minimal number of views and components.
Many recent React examples are written in ES6 and make use of [Babel](https://babeljs.io/).
These are largely compatible with this TypeScript based process.
This starter also includes an example of how to use Redux with TypeScript.
In order to keep the starter as clean as possible, the Redux example is on a branch.
## Features
* React with React Router
* Redux (on a separate branch)
* TypeScript TSX
* Isomorphic between server and client
* Client app.js is browserified
* Client vendor.js is browserified separately
* Browserify-shim supports external scripts
* Gulp based build with watch tasks
## Versions
This template supports the following versions for key dependencies:
* [React](https://facebook.github.io/react/) 16.8
* [React Router](https://github.com/rackt/react-router) 5.0
* [Redux](https://github.com/reactjs/redux) 4.0 ([redux branch](https://github.com/toddlucas/react-tsx-starter/tree/redux))
* [TypeScript](http://www.typescriptlang.org/) 3.4
# Usage
You'll need a few frameworks and utilities to be installed before starting.
## Prerequisites
You'll need the following prior to setup:
* [Node.js](https://nodejs.org/)
* [TypeScript](http://www.typescriptlang.org/)
* [Gulp](http://gulpjs.com/)
## Setup
### Install Node modules
This will get all the packages required for development and run time,
as defined in the `package.json` file.
```
> npm install
```
## Build
To run a full build, just run gulp with no arguments.
```
> gulp
```
You can also use `npm`.
```
> npm run build
```
## Development
Run watch and keep the console open.
```
> gulp watch
```
Gulp will automatically rebuild when a source file or CSS file changes.
## Running
Run this command:
```
> npm run dev
```
Then open a browser and navigate to [http://localhost:3000](http://localhost:3000) to view.
You can also run the server with automatic reloading using [nodemon](https://nodemon.io/) and [BrowserSync](https://www.browsersync.io/).
```
> gulp serve
```
This will launch at a different port since it proxies [Express](https://expressjs.com/).
## Related
A simple starter project can be found at [react-tsx-lite](https://github.com/toddlucas/react-tsx-lite).
## License
[BSD](https://github.com/toddlucas/react-tsx-starter/blob/master/LICENSE) (the same as React)