Skip to content

Instantly share code, notes, and snippets.

@Vic-L Vic-L/ React (Node)
Last active Jul 19, 2017

Embed
What would you like to do?
Typical setup for React projects on Node
Typical setup process of a React project on Node
import React, { Component } from "react"
class App extends Component {
render() {
return <div>Something</div>
}
}
export default App
{
"presets": ["react", "es2015"],
"env": {
"development": {
"presets": ["react-hmre"]
}
}
}
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
import React, { Component } from 'react'
import { render } from 'react-dom'
import App from "../components/app.js"
render(
<App/>,
document.getElementById("app")
)
{
"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",
}
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!');
});
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"]
// }
}
]
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.