Typical setup for React projects on Node

React (Node)

Typical setup process of a React project on Node

app.js

import React, { Component } from "react"

class App extends Component {
  render() {
    return <div>Something</div>
  }
}

export default App

babelrc

{
  "presets": ["react", "es2015"],
  "env": {
    "development": {
      "presets": ["react-hmre"]
    }
  }
}

cli

npm install -g webpack nodemon
npm init # creates pacakage.json

# install files to `node_modules` folder and add to dependencies of `package.json` file
npm install --save-dev babel-preset-react-hmre \
                       webpack-dev-middleware \
                       webpack-hot-middleware \
                       babel-core \
                       babel-loader \
                       babel-preset-es2015 \
                       babel-preset-react \
                       css-loader \
                       file-loader \
                       history \
                       node-sass \
                       react \
                       react-addons-css-transition-group \
                       react-dom \
                       react-redux \
                       react-router-dom \
                       react-router-redux \
                       react-transform-catch-errors \
                       react-transform-hmr \
                       redux \
                       sass-loader

npm install --save webpack \
                   express # optional

# optional 
npm install --save express

client.js

import React, { Component } from 'react'
import  { render } from 'react-dom'
import App from "../components/app.js"

render(
  <App/>,
  document.getElementById("app")
)

package.json

{
  "devtool": "inline-source-map",
  "main": "./client/client.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "nodemon server/server.js --ignore components"
  },
  
  "repository": {
    "type": "git",
    "url": "https://something",
  },
  "version": "X.x.x",
  "name": "something",
  "description": "something",
  "author": "something",
  "license": "something",
}

server.js

const express = require('express');
const path = require('path');
const config = require("../webpack.config.js");
const webpack = require("webpack");
const webpackDevMiddleware = require("webpack-dev-middleware");
const webpackHotMiddleware = require("webpack-hot-middleware");

const app = express();
const compiler = webpack(config);

app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
app.use(webpackHotMiddleware(compiler));

app.use(express.static("./dist"));

app.use('/', function (req, res) {
  res.sendFile(path.resolve('client/index.html'));
});

app.listen(3001, function (error) {
  if (error) throw error
  console.log('Example app listening on port 3001!');
});

webpack.config.js

const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: [
    "webpack-hot-middleware/client",
    "./client/client.js"
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js",
    publicPath: "/"
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],
  module: {
    loaders: [{
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        //** using .babelrc instead
        // query: {
        //   preset: ["react", "es2015"]
        // }
      }
    ]
  }
}