Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here

react-starter

[OUTDATED] Starter template for React with webpack. Doesn't focus on simplicity! NOT FOR BEGINNERS!

Subscribe to updates I use react-starter


Statistics on react-starter

Number of watchers on Github 2289
Number of open issues 32
Average time to close an issue 28 days
Main language JavaScript
Average time to merge a PR 10 days
Open pull requests 9+
Closed pull requests 14+
Last commit almost 4 years ago
Repo Created about 5 years ago
Repo Last Updated over 1 year ago
Size 898 KB
Organization / Authorwebpack
Contributors21
Page Updated
Do you use react-starter? Leave a review!
View open issues (32)
View react-starter activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating react-starter for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

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 or io.js

Just clone this repo and change the origin git remote.

npm install

Installation via Vagrant

Install vagrant

vagrant up
vagrant ssh
cd /vagrant

Development server

# 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.

Hot Module Replacement development server

# 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

# 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 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 <script src="COMMONS_URL"></script> 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 Gittip donate button

MIT (http://www.opensource.org/licenses/mit-license.php)

react-starter open issues Ask a question     (View All Issues)
  • over 3 years [OUTDATED]?
  • over 3 years Can's see any css style in page
  • almost 4 years Does not work with current version of react-router 1.0.0
  • almost 4 years Cannot find module 'tapable'
  • almost 4 years What is best way to handle user authentication?
  • almost 4 years Can't find container issue
  • almost 4 years React Router injected `query` prop
  • almost 4 years Plugin system?
  • almost 4 years dev server should proxy api instead of vice versa
  • almost 4 years Where to put <head>
  • about 4 years No easy way to include "global" CSS
  • about 4 years Get requested domain?
  • about 4 years Proposal: port logic to Redux
  • over 4 years packages should be in devDependencies?
  • over 4 years deploy with Dokku
  • over 4 years Failed to load resource: net::ERR_CONNECTION_RESET
  • over 4 years Unable to load resources via file-loader
  • over 4 years Static Build
  • over 4 years Example of a practical use of multiple entries
  • over 4 years Confused on what is happening on your configs
  • over 4 years request for documentation
  • almost 5 years Add tests
react-starter open pull requests (View All Pulls)
  • Make QA its own file
  • added concurrent dev script
  • added "all" scripts
  • doc: rm io.js
  • windows workflow improvements
  • Work around Windows file path length restrictions
  • Allow testing on devices other than localhost over the network (such as cell phones and tablets)
  • Spell correction: reusesable -> reusable
  • Static site generator
react-starter questions on Stackoverflow (View All Questions)
  • React starter template render nothing
  • Proper way to implement jwplayer in react component using webpack (react-starter-kit)
  • React: How to publish page on server using React-starter-kit
  • How to use OpenLayers with react-starter-kit?
  • How do I get the debugger to recognize the sourcemaps in webstorm 10 using the react starter kit
  • react-starter-kit and yahoo's react-intl
  • What is the run/debug configuration for the react starter kit in webstorm
  • React Starter Kit: Introduce constant for client side
  • React starter kit communication with RESTful backend API service
react-starter list of languages used
Other projects in JavaScript