yannickfricke/gulp-webpack-typescript-react-sass-boilerplate

Small not opinionated react.js boilerplate

Gulp Webpack TypeScript React Sass Boilerplate

Getting started

Clone or download this repository. Run "npm install" to install all dependencies

Available scripts

"npm run dev" Runs the internal development server on port 3000 with browser-sync

"npm run release" Compiles all files and stores them in the "dist" directory (without sourcemaps)

Technology stack

• gulp
• webpack
• TypeScript (2.2.2)
• react.js
• Sass + autoprefixer
• browser-sync
• redux + react.js bindings
• react router dom

Other useful informations

• Integrated TypeScript definition files for react.js + redux + react-redux + node
• Integrated sourcemaps (for a better development experience)
• Uglify CSS and JS when you want to release
• Automatic reload when you made changes to an existing or new file!
• Integration of redux-dev-tools Firefox Plugin Chrome Plugin

Why should I use this boilerplate?

Most of the boilerplates are blown up. This one is slim and contains only some things you need. I don't want to prescribe which software you should use and which not. Amongst other things this boilerplate offers the whole strength of TypeScript. It was never better to develop a frontend application with a "typed" language. It's much more less error prone! Togeather with Sass and autoprefixer you have the ultimate tools to speed up the css development process.

Where to start?

Your code and images lives in the "src" directory. From there everything gets compiled and copied to the "public" directory when you run "npm run dev".

Editing sass

Edit "src/sass/index.scss" (there is also some example code to show you how sass works).

Creating a new reducer

Create a new interface in the "src/ts/StoreTypes.ts" file that matches your needs. That interface will be used in every component that depends on that piece of state. Create a new file in the "src/ts/reducers/" directory. Take a look on the existing "appReducer" to see, how it should be done. In the switch block you define with every case a new action that the reducer can handle.

Creating a new action

Create a new file in the "src/ts/actions" directory. The filename should start with the name of the reducer, to which the actions belong. You should consider to take a look on the existing "AppStoreActions.ts" to see, how you can get started.

Creating a new component

Finally you want to create a react component. Fine! The boilerplate provides two examples

• Normal react component (src/ts/components/NotFound.tsx)
• redux connected component (src/ts/App.tsx)

Creating a new route

Open the file "src/ts/index.tsx". There can you find two example routes. <Route exact path="/" component={App} /> this routes matches, when we are at the entry point of the application. <Route component={NotFound}/> this routes matches, when no other match (in other words 404). The switch helps us, that only one route matches.

Working with parameters

Lets assume you have the following route <Route path="/my/path/:parameter" component={App} />, then you can get the parameter from your component with this.props.match.params.parameter.

Post scriptum

Make TypeScript great (again) and happy hacking!

gulp-webpack-typescript-react-sass-boilerplate's Issues

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.