Skip to content

Instantly share code, notes, and snippets.

@joshdmiller

joshdmiller/index.html

Created January 26, 2016 22:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joshdmiller/5c9c0d6284390593eb56 to your computer and use it in GitHub Desktop.
Save joshdmiller/5c9c0d6284390593eb56 to your computer and use it in GitHub Desktop.
Download ZIP
React Essentials
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name=viewport content="width=device-width,initial-scale=1">
<title>React App Template</title>
<link rel="stylesheet" href="/app.css" />
</head>
<body>
<div class="app-container"></div>
<!-- <script src="https://fb.me/react-0.14.5.js"></script> -->
<!-- <script src="https://fb.me/react-dom-0.14.5.js"></script> -->
<!-- <script src="https://npmcdn.com/history/umd/History.min.js"></script> -->
<!-- <script src="https://npmcdn.com/react-router/umd/ReactRouter.min.js"></script> -->
<script src="/app.js"></script>
</body>
</html>
Raw
package.json
{
"name": "react-app-template",
"version": "1.0.0",
"description": "The essentials for a good react app",
"main": "src/index.js",
"scripts": {
"html": "cp -u index.html build/index.html",
"dev": "npm run html && webpack-dev-server --content-base build --host 0.0.0.0 --port 8888 -c webpack.config.js --inline --hot",
"build": "npm run html && webpack --config webpack.config.js",
"start": "npm run build && node server.js",
"test:unit": "tape -r babel-register specs.js | faucet",
"selenium:install": "selenium-standalone install",
"selenium:start": "selenium-standalone start &> /dev/null",
"test:e2e": "wdio wdio.conf.js",
"test": "npm run test:unit && npm run test:e2e"
},
"babel": {
"presets": [
"es2015",
"react",
"stage-0"
]
},
"keywords": [
],
"author": "Josh David Miller <josh@joshdavidmiller.com>",
"license": "ISC",
"homepage": "http://joshdavidmiller.com",
"devDependencies": {
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"babel-register": "^6.3.13",
"cheerio": "^0.19.0",
"css-loader": "^0.23.1",
"cssnext-loader": "^1.0.1",
"express": "^4.13.3",
"extract-text-webpack-plugin": "^0.9.1",
"faucet": "0.0.1",
"history": "^1.17.0",
"invariant": "^2.2.0",
"react": "^0.14.5",
"react-addons-test-utils": "^0.14.5",
"react-dom": "^0.14.3",
"react-router": "^1.0.3",
"style-loader": "^0.13.0",
"tape": "^4.4.0",
"webdriverio": "^3.4.0",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
}
}
Raw
server.js
var express = require('express');
var app = express();
app.use( express.static( 'build' ) );
app.get( function ( req, res ) {
res.sendFile( 'index.html' );
});
var server = app.listen( 8888, function () {
var host = server.address().address;
var port = server.address().port;
console.log( 'Listening at http://%s:%s', host, port );
});
Raw
webpack.config.js
var webpack = require( 'webpack' );
var ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
const appName = 'app';
const outputPath = __dirname + '/build';
module.exports = {
context: __dirname + '/src',
entry: './index.js',
devtool: 'source-map',
output: {
path: outputPath,
filename: `${appName}.js`,
},
cssnext: {
browsers: 'last 2 versions',
sourcemap: true,
},
// To Serve From CDN:
// "externals": {
// "react": "React",
// "react-dom": "ReactDOM",
// "react-router": "ReactRouter",
// "history": "History",
// },
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loaders: [ 'babel-loader?presets[]=es2015&presets[]=react&presets[]=stage-0' ],
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract( 'style-loader', 'css-loader!cssnext-loader' ),
},
],
},
plugins: [
new ExtractTextPlugin( `${appName}.css` ),
],
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment