Skip to content

Commit 0babcff

Browse files
alanbsmithalanbsmith
committed
update to Babel v6, React v15, and update file structure
1 parent dd6d745 commit 0babcff

File tree

13 files changed

+115
-64
lines changed

13 files changed

+115
-64
lines changed

‎.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["es2015", "react"]
3+
}

‎.gitignore

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
11
node_modules/
22
*npm-debug.log
33
*.DS_Store
4-
public/app.js
5-
public/app.js.map

‎README.md

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,21 @@
1+
# React + Node Starter (for [Heroku](https://www.heroku.com/) deployment)
2+
13
### UP & RUNNING
2-
run `npm install`
3-
to run locally `npm run dev`
4-
heroku will compile assets with `webpack.prod.config.js` and run the express web server in `server.js`
4+
* `npm install`
5+
* `npm start`
6+
* visit `http://localhost:8080/`
7+
8+
### CHANGELOG
9+
**v.0.2.0**
10+
This app has been updated to use React v15 and Babel v6! I have also updated the file structure to reflect naming conventions you'll most likely see in other applications. If you'd like to go back to v.0.0.1 (which should've been named 0.1.0), you can find go back to [this commit](https://github.com/alanbsmith/react-node-example/commit/dd6d745c4b7066fd12104d5005b805afaf469d91).
11+
12+
### DEPLOYING TO HEROKU
13+
This app is set up for deployment to Heroku!
14+
15+
Heroku will follow the `postinstall` command in your `package.json` and compile assets with `webpack.prod.config.js`. It runs the Express web server in `server.js`. You'll notice there's a special section set up for running in development.
16+
17+
If you've never deployed a Node app to Heroku (or just need a refresher), they have a really great walkthrough [here](https://devcenter.heroku.com/articles/getting-started-with-nodejs#introduction).
18+
19+
### REDUX STARTER
20+
If you're looking for a similar, minimalistic Redux starter, I would recommend Marc Garreau's [here](https://github.com/marcgarreau/redux-starter)
21+

‎app/scripts/app.jsx

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎dist/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Node + React Starter</title>
6+
</head>
7+
<body>
8+
<div id='root'/>
9+
</body>
10+
<script src="/bundle.js"></script>
11+
</html>

‎package.json

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,32 @@
11
{
2-
"name": "react-node-example",
3-
"version": "0.0.1",
4-
"description": "an example for deploying a node/react app to heroku",
2+
"name": "react-node-starter",
3+
"version": "0.2.0",
4+
"description": "an example for deploying a React + NodeJS app to Heroku",
55
"main": "server.js",
66
"scripts": {
77
"test": "echo \"Error: no test specified\" && exit 1",
8-
"dev": "webpack-dev-server --content-base public/ --progress --colors",
9-
"start": "NODE_ENV=production node server.js",
10-
"postinstall": "webpack -p --config webpack.prod.config.js --profile --progress --colors"
8+
"start": "node server.js",
9+
"postinstall": "webpack -p --config webpack.prod.config.js"
1110
},
1211
"author": "",
1312
"license": "ISC",
1413
"dependencies": {
14+
"babel-core": "^6.7.6",
15+
"babel-loader": "^6.2.4",
16+
"babel-preset-es2015": "^6.6.0",
17+
"babel-preset-react": "^6.5.0",
18+
"css-loader": "^0.23.1",
1519
"express": "^4.13.4",
16-
"react": "^0.14.6",
17-
"react-dom": "^0.14.6"
20+
"node-sass": "^3.4.2",
21+
"react": "^15.0.1",
22+
"react-dom": "^15.0.1",
23+
"sass-loader": "^3.2.0",
24+
"style-loader": "^0.13.1",
25+
"webpack": "^1.12.14"
1826
},
1927
"devDependencies": {
20-
"babel-core": "^5.8.35",
21-
"babel-loader": "^5.4.0",
22-
"css-loader": "^0.23.1",
23-
"jsx-loader": "^0.13.2",
24-
"react-hot-loader": "^1.3.0",
25-
"style-loader": "^0.13.0",
26-
"webpack": "^1.12.12",
27-
"webpack-dev-server": "^1.14.1"
28+
"webpack-dev-middleware": "^1.6.1",
29+
"webpack-dev-server": "^1.14.1",
30+
"webpack-hot-middleware": "^2.10.0"
2831
}
2932
}

‎public/index.html

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎server.js

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,30 @@
11
var path = require('path');
22
var express = require('express');
3-
43
var app = express();
54
var PORT = process.env.PORT || 8080
65

7-
app.use(express.static(path.join(__dirname, 'public')));
6+
// using webpack-dev-server and middleware in development environment
7+
if(process.env.NODE_ENV !== 'production') {
8+
var webpackDevMiddleware = require('webpack-dev-middleware');
9+
var webpackHotMiddleware = require('webpack-hot-middleware');
10+
var webpack = require('webpack');
11+
var config = require('./webpack.config');
12+
var compiler = webpack(config);
13+
14+
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
15+
app.use(webpackHotMiddleware(compiler));
16+
}
17+
18+
app.use(express.static(path.join(__dirname, 'dist')));
819

920
app.get('/', function(request, response) {
10-
response.sendFile(__dirname + '/public/index.html')
21+
response.sendFile(__dirname + '/dist/index.html')
1122
});
1223

13-
app.listen(PORT, function() {
14-
console.log("Server is up and running on port: " + PORT)
24+
app.listen(PORT, function(error) {
25+
if (error) {
26+
console.error(error);
27+
} else {
28+
console.info("==> 🌎 Listening on port %s. Visit http://localhost:%s/ in your browser.", PORT, PORT);
29+
}
1530
});

‎app/styles/base.css renamed to ‎src/assets/stylesheets/base.scss

File renamed without changes.

‎src/components/App.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import '../assets/stylesheets/base.scss';
2+
import React, { Component } from 'react';
3+
4+
const Hello = React.createClass({
5+
render() {
6+
return(
7+
<h1>Hello, {this.props.name}!</h1>
8+
)
9+
}
10+
});
11+
12+
export default Hello;

‎src/index.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from 'react';
2+
import { render } from 'react-dom';
3+
import App from './components/App';
4+
5+
render(<App name='World'/>, document.getElementById('root'));

‎webpack.config.js

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,31 @@
11
var webpack = require('webpack');
2+
var path = require('path');
23

34
module.exports = {
4-
entry: ['./app/scripts/app.jsx'],
5-
output: {
6-
path: './public',
7-
filename: 'app.js'
8-
},
5+
entry: [
6+
'./src/index'
7+
],
98
module: {
109
loaders: [
11-
{ test: /\.html$/, loader: "file?name=[name].[ext]"} ,
12-
{ test: /\.css$/, loader: 'style!css' },
13-
{ test: /\.js$/, loader: "babel-loader?stage=0", exclude: '/node_modules/' },
14-
{ test: /\.jsx$/, loaders: ['jsx-loader', "babel-loader?stage=0"] }
10+
{ test: /\.js?$/, loader: 'babel', exclude: /node_modules/ },
11+
{ test: /\.s?css$/, loader: 'style!css!sass' },
1512
]
1613
},
17-
plugins: []
18-
};
14+
resolve: {
15+
extensions: ['', '.js']
16+
},
17+
output: {
18+
path: path.join(__dirname, '/dist'),
19+
publicPath: '/',
20+
filename: 'bundle.js'
21+
},
22+
devServer: {
23+
contentBase: './dist',
24+
hot: true
25+
},
26+
plugins: [
27+
new webpack.optimize.OccurenceOrderPlugin(),
28+
new webpack.HotModuleReplacementPlugin(),
29+
new webpack.NoErrorsPlugin()
30+
]
31+
};

‎webpack.prod.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,4 @@ config.plugins.push(
1717
})
1818
);
1919

20-
module.exports = config;
20+
module.exports = config;

0 commit comments

Comments
 (0)