Lakshya Ranganath whilelucky

whilelucky / webpack.js

Created July 3, 2017 05:07

singe-page-application

	entry: {
	main: './client/index.js',
	},
	output: {
	path: path.resolve('./build/client'),
	filename: 'js/[name].[chunkhash:8].js',
	},
	module: {
	rules: [
	{ test: /\.js$/, exclude: /node_modules/, use: ['babel-loader'] },

whilelucky / reactMiddleware.js

Last active September 18, 2017 22:29

server-side-rendering

	const serverRenderedHtml = async (req, res, renderProps) => {
	const store = configureStore();
	//call, wait, and set api responses into redux store's state (ghub.io/redux-connect)
	await loadOnServer({ ...renderProps, store });
	//render the html template
	const template = html(
	renderToString(
	<Provider store={store} key="provider">
	<ReduxAsyncConnect {...renderProps} />
	</Provider>,

whilelucky / routes.js

Last active September 15, 2017 01:10

route-splitting

	<Route
	name="landing"
	path="/"
	getComponent={
	(_, cb) => import('./views/LandingPage/LandingPage' /* webpackChunkName: 'landing' */)
	.then((module) => cb(null, module.default))
	.catch((error) => cb(error, null))
	}
	</Route>

whilelucky / reactMiddleware.js

Last active September 11, 2017 06:54

vendor-and-manifest-splitting

	//add the webpackManifest and vendor script files to your html
	<body>
	<div id="root">${app}</div>
	<script>window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}</script>
	<script src="${assets.webpackManifest.js}"></script>
	<script src="${assets.vendor.js}"></script>
	<script src="${assets.main.js}"></script>
	</body>

whilelucky / html.js

Last active October 27, 2017 03:04

streaming

	earlyChunk(route) {
	return `
	<!doctype html>
	<html lang="en">
	<head>
	<link rel="stylesheet" href="${assets.main.css}">
	<link rel="preload" as="script" href="${assets.webpackManifest.js}">
	<link rel="preload" as="script" href="${assets.vendor.js}">
	<link rel="preload" as="script" href="${assets.main.js}">
	${!assets[route.name] ? '' : `<link rel="preload" as="script" href="${assets[route.name].js}">`}

whilelucky / webpack.js

Created July 3, 2017 05:17

preact

whilelucky / manifest.json

Created July 3, 2017 05:19

webapp-manifest

	{
	"name": "Treebo Hotels",
	"short_name": "Treebo",
	"description": "India's Top Rated Budget Hotel Chain",
	"theme_color": "#ffffff",
	"background_color": "#ffffff",
	"start_url": "/",
	"display": "standalone",
	"orientation": "portrait",
	"icons": [{

whilelucky / fragments.js

Last active July 3, 2017 05:28

service-worker

	// register the service worker after the onload event to prevent
	// bandwidth resource contention during the main and vendor js downloads
	export const scripts = {
	serviceWorker:
	`"serviceWorker" in window.navigator && window.addEventListener("load", function() {
	window.navigator.serviceWorker.register("/serviceWorker.js")
	.then(function(r) {
	console.log("ServiceWorker registration successful with scope: ", r.scope)
	}).catch(function(e) {
	console.error("ServiceWorker registration failed: ", e)

whilelucky / Text.js

Created August 23, 2017 07:33

interface-previews

	import React, { PropTypes } from 'react';
	import cn from 'classnames';

	const Text = ({
	className,
	tag,
	preview,
	previewStyle,
	children,
	...props

whilelucky / html.js

Last active September 30, 2017 15:36

dual-import

	import assetsManifest from '../../build/client/assetsManifest.json';

	lateChunk(app, head, initialState, route) {
	return `
	<style>${assets.main.styles}</style>
	// inline the current route's css and assign an id to it
	${!assets[route.name] ? '' : `<style id="${route.name}.css">${assets[route.name].styles}</style>`}
	</head>
	<body>
	<div id="root">${app}</div>