fenris

Fenris

A production-ready starter kit for modern universal apps developed to solve the problems of an actual production application.

Uses naglfar and sleipnir modules, exposing their functionality to drastically speed up app development.

• Server-side rendering
• React view
• Custom redux-based router
• Express server
• CSS-in-JS hooks (library agnostic)
• Client and server caching of data and rendered html
• Both client and server are Webpack 2 bundled
• Full ES2017 support throughout
• Hot reloading in development
• Full control of rendered html through react-helmet
• CSRF security on all internal api requests
• BelowTheFold component for ssr optimization

Fenris has no opinion/implementation for:

• Linting
• Standard CSS
• Testing

How to use

Install via npm i -S fenris or yarn add fenris.

App actions example

import {createAction} from 'fenris'
import {fetchUsers, fetchUser} from './api'

export const getUsers = createAction('GET_USERS', {
  async: fetchUsers,
  handler: (state, {payload: list}) => ({
    ...state,
    list: list.map((user) => ({name: user.name, id: user.id}))
  }),
  initialState: {list: []}
})

export const getUser = createAction('GET_USER', {
  async: ({id}) => fetchUser(id),
  handler: (state, {payload: user}) => ({
    ...state,
    user
  })
})

App api example

import {cachedGet} from 'fenris'

export const fetchUsers = () => cachedGet('http://jsonplaceholder.typicode.com/users')
export const fetchUser = (id) => cachedGet(`http://jsonplaceholder.typicode.com/users/${id}`)

App routes example

import {routeFragment, routeRedirect} from 'fenris'
import {
  getUser,
  getUsers
} from './actions'

routeRedirect('/user', '/')

export const HomeRoute = routeFragment('/', getUsers)
export const UserRoute = routeFragment('/user/:id', getUser)
export const NotFoundRoute = routeFragment(404)

App example

import React from 'react'
import Helmet from 'react-helmet'
import {Link} from 'fenris'
import Home from './pages/Home'
import User from './pages/User'
import NoMatch from './pages/NoMatch'
import {HomeRoute, UserRoute, NotFoundRoute} from './routes' 

const App = ({ children }) => (
  <div>
    <Helmet
      title="My App"
      titleTemplate="%s - My App"
      meta={[
        { 'char-set': 'utf-8' },
        { name: 'description', content: 'My super dooper dope app' },
      ]}
    />
    <nav>
      <ul>
        <li><Link to="/" prefetchData>Users</Link></li>
      </ul>
    </nav>
    <HomeRoute><Home /></HomeRoute>
    <UserRoute><User /></UserRoute>
    <NotFoundRoute><NoMatch /></NotFoundRoute>
  </div>
)

export default App

Client entry example

import launchClient from 'fenris'
import App from './App'

launchClient(App)

if (module.hot) module.hot.accept('./App', () => launchClient(App))
  

Server example

import launchServer from 'fenris/server'
import AppComponent from './App'

export default (port, config) => {
  launchServer({AppComponent, port, config})
}

Server entry example (for npm start)

import config from './webpack.config.js'
import serve from './src/server'

serve(process.env.PORT, config[0])

Example webpack.config.js

const path = require('path')
const webpack = require('webpack')
const MinifierPlugin = require('babili-webpack-plugin')
const nodeExternals = require('webpack-node-externals')
const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
const faviconConfig = require('./favicon.config.js')
const babelConfig = require('./babelrc.js')
const appConfig = require('./config')

const DIST = path.join(__dirname, 'dist')
const PRODUCTION = process.env.NODE_ENV === 'production'

const filterFalsy = (arr) => arr.filter(e => e)
const plugins = filterFalsy([
  new webpack.optimize.OccurrenceOrderPlugin(),
  !PRODUCTION && new webpack.HotModuleReplacementPlugin(),
  !PRODUCTION && new webpack.NamedModulesPlugin(),
  !PRODUCTION && new webpack.NoEmitOnErrorsPlugin(),
  PRODUCTION && new MinifierPlugin(),
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify(process.env.NODE_ENV),
    }
  })
])

const loaders = (config) => [
  {
    test: /\.js?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: babelConfig(config),
  },
  {
    test: /\.(jpg|png)/,
    loader: 'file-loader'
  },
  {
    test: /\.svg/,
    exclude: /src/,
    loader: 'file-loader'
  },
  {
    test: /\.svg/,
    exclude: /assets/,
    loader: 'raw-loader'
  }
]

const clientConfig = {
  target: 'web',
  devtool: PRODUCTION ? 'source-map' : 'cheap-module-eval-source-map',
  entry: filterFalsy([
    !PRODUCTION && 'react-hot-loader/patch',
    !PRODUCTION && `webpack-hot-middleware/client`,
    './src/index.js',
  ]),
  output: {
    path: DIST,
    filename: PRODUCTION ? 'app.min.js' : 'app.js',
    publicPath: '/'
  },
  plugins: plugins.concat(new FaviconsWebpackPlugin(faviconConfig)),
  module: {
    rules: loaders()
  }
}

const serverConfig = {
  target: 'node',
  devtool: 'source-map',
  node: {
    __dirname: true
  },
  externals: [nodeExternals({
    whitelist: PRODUCTION ? [ 'react', 'react-dom/server' ] : []
  })],
  entry: './index.js',
  output: {
    path: DIST,
    filename: 'server.js',
    publicPath: '/',
    libraryTarget: 'commonjs2'
  },
  plugins: plugins.concat(new webpack.BannerPlugin({
    banner: 'require("source-map-support").install();',
    raw: true,
    entryOnly: false,
  })),
  module: {
    rules: loaders({server: true})
  }
}

module.exports = [clientConfig, serverConfig]

That's it.