4 |
6 | 7 | The goal of this project is to provide a starting base for an mobx inferno project with isomorphism. 8 | 9 | Features: 10 | + `async/await` support 11 | + Isomorphic for SEO goodness 12 | + CSS and SCSS compilation 13 | + MongoDB user register/login/logout 14 | + Token based authentication 15 | + Decorators for accessing actions and state 16 | + Hot reload 17 | + Bundle size as small as possible 18 | + Offline support through service workers 19 | 20 | 21 |  22 | 23 | ## How to run 24 | 25 | For development: 26 | 27 | npm run dev 28 | 29 | For production: 30 | 31 | npm run prod 32 | 33 | ## Requirements 34 | 35 | Node 6+ (or Node 4 with additional babel plugins) 36 | MongoDB server 37 | 38 | ## Goals 39 | 40 | - Optimized for minimal bundle size. 41 | - Optimized for server-side speed. (See the benchmark, it's fast !) 42 | - Using Inferno, the fastest React-like framework out there. 43 | - Using MobX, the easiest and insanely fast state manager. 44 | - Simple and minimal with routing, authentication, database and server-side rendering. 45 | - Good developer experience with hot-reloading and source-maps. 46 | - Get to 100% score on Google Lighthouse 47 | 48 | # Benchmarks 49 | 50 | ```sh 51 | gb -G=4 -k=true -c 200 -n 10000 http://localhost:2000/about 52 | 53 | Document Path: /about 54 | Document Length: 1436 bytes 55 | 56 | Concurrency Level: 200 57 | Time taken for tests: 3.06 seconds 58 | Complete requests: 10000 59 | Failed requests: 0 60 | HTML transferred: 14360000 bytes 61 | Requests per second: 3262.76 [#/sec] (mean) 62 | Time per request: 61.298 [ms] (mean) 63 | Time per request: 0.306 [ms] (mean, across all concurrent requests) 64 | HTML Transfer rate: 4575.37 [Kbytes/sec] received 65 | 66 | Connection Times (ms) 67 | min mean[+/-sd] median max 68 | Total: 1 0 12.07 59 246 69 | ``` 70 | Tested on i7-6700K @ 4.00GHz 16GB RAM. **Single** node.js instance. 71 | 72 | # F.A.Q. 73 | 74 | ## What are `stores` ? 75 | 76 | State contains the state of your application (ex: list of your todos, UI state etc). 77 | Stores contain the methods that mutate that state (ex: adding a todo, fetching data). 78 | Technically our State object is also a store, but we make the differentiation so that our logic is easier to follow by using the same principes as redux (one big state object). 79 | 80 | ## How to access our `state` and `stores` in our components ? 81 | 82 | ```js 83 | @connect(['state', 'store']) 84 | class MyComponent extends Component { 85 | componentDidMount() { 86 | const { state, store } = this.props 87 | store.account.doSomething(); 88 | } 89 | 90 | render({ state, store }) { 91 | return
Something is cool
139 | }) 140 | 141 | // or with injection into props 142 | const MyComponent = connect(['state', 'store'])(props => { 143 | returnWe have stores and state in our props: {props.state.something}
144 | }) 145 | ```` 146 | 147 | ## How do I execute async actions on the server and/or client ? 148 | 149 | Add a static `onEnter` method to your component like this: 150 | 151 | ```js 152 | class MyComponent extends Component { 153 | static onEnter({ myStore, params }) { 154 | return myStore.browse() 155 | } 156 | // ... 157 | } 158 | ``` 159 | 160 | The `onEnter` method is smart, it will be executed either on the server or on the browser depending on how you access the website. 161 | 162 | It also passes all your stores and url params as arguments as a convenience. 163 | 164 | 165 | ## Useful links 166 | 167 | [Inferno](https://github.com/trueadm/inferno) 168 | 169 | [MobX](https://mobxjs.github.io/mobx/) 170 | 171 | 172 | ## Author 173 | 174 | Ryan Megidov 175 | 176 | https://github.com/nightwolfz/inferno-starter 177 | -------------------------------------------------------------------------------- /core/compile.js: -------------------------------------------------------------------------------- 1 | import {fork} from 'child_process' 2 | import {debounce} from 'lodash' 3 | 4 | const dirs = ['./server/**/*.js'] 5 | const args = process.argv.slice(2) 6 | 7 | if (args.includes('--dev')) { 8 | process.env.NODE_ENV = 'development' 9 | let server = fork('./core/server.js') 10 | require('../webpack.dev.js') 11 | 12 | // Run server 13 | const chokidar = require('chokidar') 14 | const watcher = chokidar.watch(dirs) 15 | const restart = debounce(function() { 16 | server.kill() 17 | server.on('exit', function() { 18 | console.server('✓ SERVER RESTART') 19 | server = fork('./core/server.js') 20 | }) 21 | }, 100) 22 | 23 | watcher.on('ready', function() { 24 | watcher.on('all', restart) 25 | }) 26 | } 27 | 28 | if (args.includes('--prod') || process.env.NODE_ENV === 'production') { 29 | process.env.NODE_ENV = 'production' 30 | require('./server') 31 | fork('./webpack.prod.js') 32 | } 33 | -------------------------------------------------------------------------------- /core/database.js: -------------------------------------------------------------------------------- 1 | import mongoose from 'mongoose' 2 | import config from '../server/config' 3 | 4 | // Use native promises 5 | mongoose.Promise = Promise 6 | 7 | // Initialize our database 8 | mongoose.connect(config.databases.mongo, { 9 | useMongoClient: true 10 | }) 11 | 12 | const db = mongoose.connection 13 | db.on('error', (err) => console.error(err)) 14 | db.once('open', () => console.info(config.databases.mongo)) 15 | 16 | export default db 17 | -------------------------------------------------------------------------------- /core/globals.d.ts: -------------------------------------------------------------------------------- 1 | declare function size(x: string | object | any[]): number; 2 | 3 | declare class Exception { 4 | constructor(message: string); 5 | } 6 | -------------------------------------------------------------------------------- /core/globals.js: -------------------------------------------------------------------------------- 1 | import { isObservableArray } from 'mobx' 2 | 3 | global.Exception = class Exception extends Error { 4 | constructor(message) { 5 | super(message); 6 | this.message = message; 7 | this.name = 'Exception'; 8 | } 9 | } 10 | 11 | global.size = function size(input) { 12 | if (isObservableArray(input) || typeof input === 'string') { 13 | return input.length 14 | } 15 | return input && ((typeof input === 'string') ? input.length : Object.keys(input).length) 16 | } 17 | -------------------------------------------------------------------------------- /core/logger.js: -------------------------------------------------------------------------------- 1 | if (process.env.BROWSER) { 2 | console.debug = console.log.bind(console, '%cDBG', 'color: #00893f; font-weight: bold') 3 | console.info = console.log.bind(console, '%cINF', 'color: #007bff; font-weight: bold') 4 | } else { 5 | const {inspect} = require('util') 6 | function logger(color, name) { 7 | return function() { 8 | // Get arguments without deoptimizing v8 9 | const args = [] 10 | for (let i = 0; i < arguments.length; i++) { 11 | if (typeof arguments[i] === 'object') { 12 | args.push(inspect(arguments[i], { 13 | colors: true, 14 | depth: 4, 15 | breakLength: Infinity 16 | })) 17 | } else { 18 | args.push(arguments[i]) 19 | } 20 | } 21 | console.log('\u001b[3' + color + ';1m' + name + '\u001b[0m', ...args) 22 | } 23 | } 24 | 25 | // Enable color logging 26 | console.debug = logger(6, 'DBG').bind(console) 27 | console.info = logger(2, 'INF').bind(console) 28 | console.warn = logger(3, 'WRN').bind(console) 29 | console.error = logger(1, 'ERR').bind(console) 30 | console.server = (msg) => console.log('\u001b[34;1m' + msg + '\u001b[0m') 31 | } 32 | -------------------------------------------------------------------------------- /core/onEnter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Go through the mached route and extract the static method 3 | * @param staticMethod {String} 4 | * @param components {Object} 5 | * @param promises {Array} 6 | * @returns {Object} 7 | */ 8 | function getRoutes(staticMethod, components, promises) { 9 | const routes = Array.isArray(components) ? components : [components] 10 | 11 | routes.forEach(({ props }) => { 12 | props.component[staticMethod] && promises.push(props.component[staticMethod]) 13 | props.children && getRoutes(staticMethod, props.children, promises) 14 | }) 15 | return routes[0].props.params 16 | } 17 | 18 | /** 19 | * Execute onEnter methods of matched components 20 | * @returns {Promise} 21 | */ 22 | export default (routes, stores) => { 23 | const promises = [] 24 | const params = getRoutes('onEnter', routes.matched, promises) 25 | 26 | return Promise.all(promises.map(onEnter => onEnter({ 27 | ...stores, 28 | params 29 | }))) 30 | } 31 | -------------------------------------------------------------------------------- /core/polyfills.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // For IE 11 4 | if (typeof Promise === 'undefined') { 5 | global.Promise = require('promise-polyfill') 6 | } 7 | 8 | /** 9 | * Returns a numeric hash of a string 10 | * @returns {number} 11 | */ 12 | String.prototype.hashCode = function() { 13 | var hash = 0, i, chr, len; 14 | if (this.length === 0) return hash; 15 | for (i = 0, len = this.length; i < len; i++) { 16 | chr = this.charCodeAt(i); 17 | hash = ((hash << 5) - hash) + chr; 18 | hash |= 0; // Convert to 32bit integer 19 | } 20 | return hash 21 | } 22 | 23 | /** 24 | * Here we add a few ES6 polyfills since we dont want to include whole of babel-polyfill 25 | */ 26 | if (!String.prototype.startsWith) { 27 | String.prototype.startsWith = function(searchString, position){ 28 | position = position || 0; 29 | return this.substr(position, searchString.length) === searchString; 30 | }; 31 | } 32 | 33 | if (!String.prototype.includes) { 34 | String.prototype.includes = function includes(str) { 35 | return this.indexOf(str) !== -1; 36 | }; 37 | } 38 | if (!String.prototype.trimLeft) { 39 | String.prototype.trimLeft = function trimLeft(str) { 40 | return remove(this, `^${str || '\\s'}+`); 41 | }; 42 | } 43 | if (!String.prototype.trimRight) { 44 | String.prototype.trimRight = function trimRight(str) { 45 | return remove(this, `${str || '\\s'}+$`); 46 | }; 47 | } 48 | 49 | function remove(str, rx) { 50 | return str.replace(new RegExp(rx), ''); 51 | } 52 | -------------------------------------------------------------------------------- /core/request.js: -------------------------------------------------------------------------------- 1 | import fetch from 'isomorphic-fetch' 2 | import config from '../server/config' 3 | 4 | /** 5 | * This is our overly complicated isomorphic "request" 6 | * @param state 7 | * @returns {Function} 8 | */ 9 | export default function(token) { 10 | return { 11 | get(url, params) { 12 | return buildRequest('GET', token, url, omitNil(params)) 13 | }, 14 | 15 | post(url, data) { 16 | return buildRequest('POST', token, url, data, false) 17 | }, 18 | 19 | upload(url, data) { 20 | return buildRequest('POST', token, url, data, true) 21 | }, 22 | } 23 | } 24 | 25 | /** 26 | * Build and execute remote request 27 | * @param method 28 | * @param url 29 | * @param params 30 | * @param config 31 | */ 32 | function buildRequest(method, token, url, params, isMultiForm) { 33 | const requestURL = createURL(url) + (method === 'GET' && params ? toQueryString(params) : '') 34 | const request = { 35 | method, 36 | mode: 'cors', 37 | credentials: 'include', 38 | headers: { 39 | token 40 | } 41 | } 42 | 43 | if (!isMultiForm) { 44 | request.headers['Content-Type'] = 'application/json' 45 | } 46 | 47 | if (method === 'POST') { 48 | if (isMultiForm) { 49 | const formData = new FormData() 50 | for(var name in params) { 51 | formData.append(name, params[name]); 52 | } 53 | request.body = formData 54 | } else { 55 | request.body = JSON.stringify(params || {}) 56 | } 57 | } 58 | 59 | return fetch(requestURL, request).then(handleResponse) 60 | } 61 | 62 | /** 63 | * Prepend host of API server 64 | * @param path 65 | * @returns {String} 66 | * @private 67 | */ 68 | function createURL(path) { 69 | if (path.startsWith('http')) { 70 | return path 71 | } else if (process.env.BROWSER) { 72 | return '/' + path.trimLeft('/') 73 | } else { 74 | return `http://${global.HOSTNAME}:${global.PORT}/` + path.trimLeft('/') 75 | } 76 | } 77 | 78 | /** 79 | * Decide what to do with the response 80 | * @param response 81 | * @returns {Promise} 82 | * @private 83 | */ 84 | function handleResponse(response) { 85 | const redirect = response.headers.get('Location') 86 | if (process.env.BROWSER && redirect) { 87 | window.location.replace(redirect) 88 | return Promise.reject() 89 | } 90 | 91 | if (response.headers.get('content-type').includes('json')) { 92 | return response.json().then(res => { 93 | if (response.ok) { 94 | if (response.status === 403) { 95 | console.warn('Unauthorized', response) 96 | } 97 | return res 98 | } else { 99 | throw res 100 | } 101 | }) 102 | } 103 | return response.text().then(error => { throw error }) 104 | } 105 | 106 | /** 107 | * Transform an JSON object to a query string 108 | * @param params 109 | * @returns {string} 110 | */ 111 | function toQueryString(params) { 112 | return '?' + Object.keys(params).map(k => { 113 | const name = encodeURIComponent(k) 114 | if (Array.isArray(params[k])) { 115 | return params[k].map(val => `${name}[]=${encodeURIComponent(val)}`).join('&') 116 | } 117 | return `${name}=${encodeURIComponent(params[k])}` 118 | }).join('&') 119 | } 120 | 121 | function omitNil(obj) { 122 | if (typeof obj !== 'object') return obj 123 | return Object.keys(obj).reduce((acc, v) => { 124 | if (obj[v] !== undefined) acc[v] = obj[v] 125 | return acc 126 | }, {}) 127 | } 128 | -------------------------------------------------------------------------------- /core/server.js: -------------------------------------------------------------------------------- 1 | // Enable ES2018 support 2 | require('babel-register') 3 | 4 | // Bootstrap core 5 | require('./logger') 6 | require('./polyfills') 7 | require('./globals') 8 | 9 | // Ignore files on server render 10 | require.extensions['.scss'] = function() { 11 | return 12 | } 13 | 14 | require('../server/server') 15 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | // Enable ES2018 support 2 | require('babel-register') 3 | 4 | // Launch server and webpack 5 | require('./core/logger') 6 | require('./core/compile') 7 | -------------------------------------------------------------------------------- /nodemon.json: -------------------------------------------------------------------------------- 1 | { 2 | "verbose": false, 3 | "restartable": "rs", 4 | "ext": "js", 5 | "ignore": [ 6 | ".git", 7 | "node_modules", 8 | "build", 9 | "src/**/*" 10 | ], 11 | "watch": [ 12 | "core", 13 | "src/client/stores.js", 14 | "src/client/preload.js", 15 | "server" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "inferno-starter", 3 | "main": "index.js", 4 | "version": "0.6.0", 5 | "author": "Ryan Megidov5 | {props.text ? props.text : props.children} 6 |
7 | } 8 | 9 | export default Error 10 | -------------------------------------------------------------------------------- /src/components/common/Loading.js: -------------------------------------------------------------------------------- 1 | import Inferno from 'inferno' 2 | 3 | export default function Loading() { 4 | // Loading animation... 5 | return11 |
18 | 
21 | Created for the javascript community. May your reign never end! 22 |
23 |24 | 25 | https://github.com/nightwolfz/inferno-starter 26 | 27 |
28 |This will disconnect you and you will have to login again next time.
35 | 36 | {loading 37 | ?