Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/webpack/react-starter
[OUTDATED] Starter template for React with webpack. Doesn't focus on simplicity! NOT FOR BEGINNERS!
https://github.com/webpack/react-starter
Last synced: about 1 month ago
JSON representation
[OUTDATED] Starter template for React with webpack. Doesn't focus on simplicity! NOT FOR BEGINNERS!
- Host: GitHub
- URL: https://github.com/webpack/react-starter
- Owner: webpack
- Archived: true
- Created: 2014-07-31T14:34:24.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-01-01T13:58:52.000Z (almost 9 years ago)
- Last Synced: 2024-04-13T17:41:59.710Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 877 KB
- Stars: 2,215
- Watchers: 62
- Forks: 320
- Open Issues: 32
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# webpack/react-starter
Starter template for react and webpack.
## Features
* Compilation with webpack
* React and jsx
* react-router
* Stylesheets can be CSS, LESS, SASS, Stylus or mixed
* Embedded resources like images or fonts use DataUrls if appropriate
* A simple flag loads a react component (and dependencies) on demand.
* Development
* Development server
* Optionally Hot Module Replacement development server (LiveReload for Stylesheets and React components enabled)
* Uses SourceUrl for performance, but you may switch to SourceMaps easily
* Production
* Server example for prerendering for React components
* Initial data inlined in page
* Long Term Caching through file hashes enabled
* Generate separate css file to avoid FOUC
* Minimized CSS and javascript
* Also supports coffee-script files if you are more a coffee-script person.
* You can also require markdown or text files for your content.
## Local Installation
Install [node.js](https://nodejs.org) or [io.js](https://iojs.org)
Just clone this repo and change the `origin` git remote.
``` text
npm install
```
## Installation via Vagrant
Install [vagrant](https://vagrantup.com)
``` text
vagrant up
vagrant ssh
cd /vagrant
```
## Development server
``` text
# start the webpack-dev-server
npm run dev-server
# wait for the first compilation is successful
# in another terminal/console
# start the node.js server in development mode
npm run start-dev
# open this url in your browser
http://localhost:8080/
```
The configuration is `webpack-dev-server.config.js`.
It automatically recompiles and refreshes the page when files are changed.
Also check the [webpack-dev-server documentation](http://webpack.github.io/docs/webpack-dev-server.html).
## Hot Module Replacement development server
``` text
# start the webpack-dev-server in HMR mode
npm run hot-dev-server
# wait for the first compilation is successful
# in another terminal/console
# start the node.js server in development mode
npm run start-dev
# open this url in your browser
http://localhost:8080/
```
The configuration is `webpack-hot-dev-server.config.js`.
It automatically recompiles when files are changed. When a hot-replacement-enabled file is changed (i. e. stylesheets or React components) the module is hot-replaced. If Hot Replacement is not possible the page is refreshed.
Hot Module Replacement has a performance impact on compilation.
## Production compilation and server
``` text
# build the client bundle and the prerendering bundle
npm run build
# start the node.js server in production mode
npm run start
# open this url in your browser
http://localhost:8080/
```
The configuration is `webpack-production.config.js`.
The server is at `lib/server.js`
The production setting builds two configurations: one for the client (`build/public`) and one for the serverside prerendering (`build/prerender`).
## Legacy static assets
Assets in `public` are also served.
## Build visualization
After a production build you may want to visualize your modules and chunks tree.
Use the [analyse tool](http://webpack.github.io/analyse/) with the file at `build/stats.json`.
## Loaders and file types
Many file types are preconfigured, but not every loader is installed. If you get an error like `Cannot find module "xxx-loader"`, you'll need to install the loader with `npm install xxx-loader --save` and restart the compilation.
## Common changes to the configuration
### Add more entry points
(for a multi page app)
1. Add an entry point to `make-webpack-config.js` (`var entry`).
2. Add a new top-level react component in `app` (`xxxRoutes.js`, `xxxStoreDescriptions.js`, `xxxStores.js`).
3. (Optional) Enable `commonsChunk` in `webpack-production.config.js` and add `` to `app/prerender.html`.
4. Modify the server code to require, serve and prerender the other entry point.
5. Restart compilation.
### Switch devtool to SourceMaps
Change `devtool` property in `webpack-dev-server.config.js` and `webpack-hot-dev-server.config.js` to `"source-map"` (better module names) or `"eval-source-map"` (faster compilation).
SourceMaps have a performance impact on compilation.
### Enable SourceMaps in production
1. Uncomment the `devtool` line in `webpack-production.config.js`.
2. Make sure that the folder `build\public\debugging` is access controlled, i. e. by password.
SourceMaps have a performance impact on compilation.
SourceMaps contains your unminimized source code, so you need to restrict access to `build\public\debugging`.
### Coffeescript
Coffeescript is not installed/enabled by default to not disturb non-coffee developer, but you can install it easily:
1. `npm install coffee-redux-loader --save`
2. In `make-webpack-config.js` add `".coffee"` to the `var extensions = ...` line.
## License
Copyright (c) 2012-2015 Tobias Koppers [](https://www.gittip.com/sokra/)
MIT (http://www.opensource.org/licenses/mit-license.php)