Skip to content

Instantly share code, notes, and snippets.

@seiferteric

seiferteric/react_setup.sh

Last active December 9, 2016 00:43
Show Gist options
  • Save seiferteric/0c7dd44b9bd0ab3ce3a7b436de23cac0 to your computer and use it in GitHub Desktop.
Save seiferteric/0c7dd44b9bd0ab3ce3a7b436de23cac0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
react_setup.sh
#!/bin/sh
set -e
if [ ! -e ".babelrc" ]; then
npm init
npm i webpack -S
cat >webpack.config.js <<EOF
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var config = {
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module : {
loaders : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel'
}
]
}
};
module.exports = config;
EOF
npm i babel-core babel-loader babel-preset-es2015 babel-preset-react webpack-dev-server -S
npm i react react-dom -S
mkdir -p src/client/app
cat >src/client/app/index.jsx <<EOF
import React from 'react';
import {render} from 'react-dom';
class App extends React.Component {
render () {
return <p> Hello React!</p>;
}
}
render(<App/>, document.getElementById('app'));
EOF
cat >index.html <<EOF
<html>
<head>
<meta charset="utf-8">
<title>React.js using NPM, Babel6 and Webpack</title>
</head>
<body>
<div id="app" />
<script src="src/client/public/bundle.js" type="text/javascript"></script>
</body>
</html>
EOF
cat >.babelrc <<EOF
{
"presets" : ["es2015", "react"]
}
EOF
./node_modules/.bin/webpack -d
cat package.json | jq '.scripts.dev = "webpack -d --watch& node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"' > package1.json
mv package1.json package.json
cat package.json | jq '.scripts.build = "webpack -p"' > package1.json
mv package1.json package.json
fi
npm run dev
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment