This is an attempt at facilitating the starting of a new project with the following features:
- Basic Technologies
- TypeScript
- ReactJS
- Redux
- React-Router with Redux Integration
- Options between hash and browser routing
- Styling
- LessCSS support
- Stylus support
- Image importing
- Examples
- Example Startup
- Redux/Thunk Example
- Performance
- Image Optimization
- JS Minification
- CSS Minification
- Linting
- TSLint
- Testing
- Jest Unit Testing
Make a copy of this repository to your new project's code folder and install its dependencies.
git clone git@github.com:gvanderest/react-typescript-boilerplate.git <project>
cd <project>
yarn # or npm install
Then just start editing the src/application.tsx
files and src/styles/styles.styl
as you wish!
If you want to include images within your TypeScript code, simply:
// load the image from the filesystem
const exodusLogo: string = require("./images/exodus-logo.png");
// then make use of it somewhere
return (
<img src={ exodusLogo } alt="Exodus Media Inc." />
);
react-typescript-boilerplate/
src/
components/
Example.tsx
ducks/
ducks.ts
__tests__
ducks.tests.ts
images/
exodus-logo.png
static/
index.html
styles/
reset.css
styles.styl
application.tsx
redux.ts
settings.ts
Under the src
folder you will find the application.tsx
file which is the main driver of the entire project. The static
folder inside contains all of the static assets that will be copied directly to the root folder of the webserver when building or running the local webserver.
To get started, it will depend on which areas you want to get going with:
- Static files: Add to the
src/static
folder which will be hosted at the root directory/
on the webserver - Shell and Routing:
src/application.tsx
- Components:
src/components/*.tsx
- Redux Actions and Reducers:
src/ducks/*.ts
andsettings.ts
to integrate - Tests: In the
__tests__
folders you should be able to find some examples:- TODO: Component Tests: In
src/components/__tests__
there will be some example component tests - Redux Tests: In
src/ducks/__tests__
there are some reducer/action tests
- TODO: Component Tests: In
Run the local dev server, which uses webpack-dev-server.
yarn local # for local webserver development
# or ..
yarn localprod # for local testing of production release
Then browse to the following address: http://localhost:8080/
If you need hot reloading: http://localhost:8080/webpack-dev-server/
Note: If you are running the production version, it will be minifying code, which can take a lot more processing and be slow to hot reload.
If you want to analyze the bundle being generated (only available in development mode): http://localhost:8081/
Run the scripts to generate all the files needed for a release.
yarn release
All of the files will be available in the /release/
folder, which can then
be copied elsewhere, or a simple webserver can be used to serve this folder.
Add support for a few extra features:
- Service Worker support?
- Integration with Bulma or Bootstrap frameworks