The webpack2-react-hmr-ssr-express-stylus from dimitrydushkin

webpack2-react-hmr-ssr-express-stylus's Introduction

Tech

Webpack 2
Express 4 + webpack dev server hot reload
React 15.4 (+ some babel optimizations including transform-runtime)
React hot module reload (including server-side thanks to decache in dev mode)
Server-side rendering (thanks to babel-register)
webpack manifest for production builds hashing
Stylus + autoprefixer

Webpack in webpack.config.js uses separate babel config with disabled modules, so webpack can handle natively all import, exports to enable Tree Shaking for minimal bundle size.

Also there is no need to write import React from 'react' in every *.jsx file thanks to babel's react-require plugin.

How

For production build (node start slow first time to compile JSX):

yarn
npm run build
NODE_ENV=production node src/server/server.js

For development (HMR and staff):

npm run dev

webpack2-react-hmr-ssr-express-stylus's People

Watchers

webpack2-react-hmr-ssr-express-stylus's Issues

Add state escaping

Based on https://medium.com/node-security/the-most-common-xss-vulnerability-in-react-js-applications-2bdffbcc1fa0#.28f6gfdas

Add security middlewares

Like:

const helmet = require('helmet'),
    uuid = require('uuid'),
    csurf = require('csurf'),
    config = require('./config'),
    csp = {...};

// for webpack HMR
if (config.isDevelopment) {
    csp.scriptSrc.push('\'unsafe-inline\'');
    csp.scriptSrc.push('\'unsafe-eval\'');
}

module.exports = {
    nonce: (req, res, next) => {
        res.locals.nonce = uuid.v4();
        next();
    },
    helmet: helmet({
        contentSecurityPolicy: {
            directives: csp
        }
    }),
    csrfAddToken: (req, res, next) => {
        res.locals.csrfToken = req.csrfToken();
        next();
    },
    csrf: csurf({
        cookie: true
    })
};