This starter kit is for front-end applications that use React but need additional backend support. This is for projects with heavy front-end application logic, and for developers who want to utilize a true component-driven development process.
Feel free to open a pull-request if you have an idea or improvement!
To view an example, check out the examples branch!
Note: You should use this starter kit with the starter-kit utility.
./bin/bootstrap
./bin/dev-start
Note: Build process target files overwrite dev process files for ease of use.
./bin/build
| File | What's Important About It? |
|---|---|
app/components |
Where you should place the React components. |
app/sass/main.scss |
The main Sass file, where you should put your Sass imports. |
app/routes.jsx |
Where the react-router routes reside. You should add your routes here. |
server/html.js |
Where the main HTML source sent at the end of each request resides. |
server/server.js |
Where the express server resides. |
Currently, the data you want passed to the server on express request should be passed in the req.initialData variable in your routes. Make sure to use the next() function in your routes if you want to render the React client.
- HTML5 (obviously)
- Support for IE9+
- React
- react-router
- Bower
- Webpack (Development)
- Supervisor
- ExpressJS
We try to keep what we need to ship to a minimum. As such, here's a list of recommended libraries that you may need to install through Bower, NPM, or implement through a CDN.
As this particular starter-kit uses Webpack, it's recommended that you install Javascript libraries through NPM whenever possible so that it can be easily required within modules. 💸
- Bourbon
bower install bourbon --save - Susy
bower install susy --save - Neat
bower install neat --save - jQuery
npm install jquery --save - Radium
npm install radium --save(particularly for development purposes. Allows you to hot-load styles!) - FontAwesome
bower install fontawesome --save
jQuery (v. 2.1.3) IE >=9
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>jQuery (v. 1.11.2)
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>FontAwesome (v. 4.3.0)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">