18 |
25 |
26 | )
27 |
28 | export default TextField
29 |
--------------------------------------------------------------------------------
/bin/server.prod.js:
--------------------------------------------------------------------------------
1 | require('dotenv').config()
2 | const express = require('express')
3 | const compression = require('compression')
4 | const zlib = require('zlib')
5 | const { app } = require('../src/server')
6 | const clientConfig = require('../webpack/client.prod')
7 |
8 | const {
9 | output: { publicPath }
10 | } = clientConfig
11 | const outputPath = clientConfig.output.path
12 |
13 | const clientStats = require('../build/stats.json') // eslint-disable-line
14 | const serverRender = require('../build/server.js').default
15 |
16 | app.use(publicPath, express.static(outputPath))
17 | app.use(
18 | compression({ flush: zlib.constants.Z_PARTIAL_FLUSH }),
19 | serverRender({ clientStats })
20 | )
21 |
22 | app.listen(process.env.APP_PORT, () => {
23 | console.log(`Listening @ http://localhost:${process.env.APP_PORT}/`)
24 | })
25 |
--------------------------------------------------------------------------------
/src/helpers/Api.js:
--------------------------------------------------------------------------------
1 | function parseJSON(response) {
2 | return response.json()
3 | }
4 |
5 | function checkStatus(response) {
6 | if (response.status >= 200 && response.status < 300) {
7 | return response
8 | }
9 |
10 | const error = new Error(response.statusText)
11 | error.response = response
12 | throw error
13 | }
14 |
15 | export function request(url, options) {
16 | return fetch(url, options)
17 | .then(checkStatus)
18 | .then(parseJSON)
19 | }
20 |
21 | export function apiFetch(path, options) {
22 | const host = `${process.env.APP_HOST}:${process.env.APP_PORT}`
23 | const contextHost = (process.env.SERVER && host) || ''
24 | const apiUrl = `${contextHost}/api${path}&api_key=${process.env.API_KEY}`
25 |
26 | return fetch(apiUrl, options)
27 | .then(checkStatus)
28 | .then(parseJSON)
29 | }
30 |
--------------------------------------------------------------------------------
/src/server/index.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const express = require('express')
3 | const compression = require('compression')
4 | const httpProxy = require('http-proxy')
5 |
6 | const app = express()
7 | const proxy = httpProxy.createProxyServer()
8 |
9 | app.use(compression())
10 | app.disable('x-powered-by')
11 | app.use(express.static(path.join(__dirname, '..', '..', 'static')))
12 |
13 | app.use('/api', (req, res) => {
14 | proxy.web(req, res, { target: process.env.API_URL, changeOrigin: true })
15 | })
16 |
17 | proxy.on('error', (error, req, res) => {
18 | if (error.code !== 'ECONNRESET') {
19 | console.error('proxy error', error)
20 | }
21 | if (!res.headersSent) {
22 | res.writeHead(500, { 'content-type': 'application/json' })
23 | }
24 |
25 | res.end(JSON.stringify({ error: 'proxy_error', reason: error.message }))
26 | })
27 |
28 | module.exports = {
29 | app
30 | }
31 |
--------------------------------------------------------------------------------
/src/containers/Hero/github.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/SelectField/SelectField.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import React from 'react'
4 | import type { FieldProps } from 'redux-form'
5 |
6 | type Props = {
7 | label: string,
8 | type: string,
9 | options: Array<{ value: string, title: string }>
10 | } & FieldProps
11 |
12 | const SelectField = ({
13 | input,
14 | label,
15 | type,
16 | meta: { touched, error, warning },
17 | options
18 | }: Props) => (
19 |
20 |
35 |
36 | )
37 |
38 | export default SelectField
39 |
--------------------------------------------------------------------------------
/src/containers/Home/Home.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import React from 'react'
4 | import Helmet from 'react-helmet'
5 | import Link from 'react-router-dom/Link'
6 |
7 | const Home = () => (
8 |
9 |
35 | )
36 |
37 | export default Home
38 |
--------------------------------------------------------------------------------
/src/containers/Hero/Hero.scss:
--------------------------------------------------------------------------------
1 | .Hero {
2 | text-align: center;
3 | }
4 |
5 | .Logo {
6 | animation: App-logo-spin infinite 20s linear;
7 | height: 200px;
8 | }
9 |
10 | .Header {
11 | background-color: #222;
12 | padding: 20px;
13 | color: white;
14 | }
15 |
16 | .Heading {
17 | font-size: 3em;
18 | margin-top: 10px;
19 | margin-bottom: 0;
20 | }
21 |
22 | .Intro {
23 | font-size: large;
24 | }
25 |
26 | .props {
27 | color: #999;
28 | font-size: 12px;
29 | }
30 |
31 | .link {
32 | color: #ddd;
33 | text-decoration: none;
34 | border-bottom: 1px solid gray;
35 |
36 | &:hover {
37 | color: #61dafb;
38 | }
39 | }
40 |
41 | .githubLink {
42 | composes: link;
43 | display: inline-block;
44 | font-size: 20px;
45 | color: #ddd;
46 | }
47 |
48 | .github {
49 | height: 20px;
50 | vertical-align: top;
51 | }
52 |
53 | @keyframes App-logo-spin {
54 | from {
55 | transform: rotate(0deg);
56 | }
57 |
58 | to {
59 | transform: rotate(360deg);
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/src/redux/configureStore.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import { createStore, applyMiddleware, compose } from 'redux'
4 | import { createEpicMiddleware } from 'redux-observable'
5 | import app, { rootEpic } from './reducers'
6 |
7 | export default function configureStore(
8 | wrapEpic: Function => Function = f => f,
9 | data: {}
10 | ) {
11 | const wrappedEpic = wrapEpic(rootEpic)
12 | const epicMiddleware = createEpicMiddleware(wrappedEpic)
13 | const middleware = applyMiddleware(epicMiddleware)
14 |
15 | let store
16 | if (!process.env.SERVER) {
17 | const composeEnhancers =
18 | window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
19 | store = createStore(app, data, composeEnhancers(middleware))
20 | } else {
21 | store = createStore(app, middleware)
22 | }
23 |
24 | if (module.hot) {
25 | module.hot.accept('./reducers', () => {
26 | store.replaceReducer(require('./reducers').default)
27 | })
28 | }
29 |
30 | return {
31 | wrappedEpic,
32 | store
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/components/GithubButton/GithubButton.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import React from 'react'
4 |
5 | type Props = {
6 | title: string,
7 | user: string,
8 | repo: string,
9 | type: 'star' | 'watch' | 'fork' | 'follow',
10 | width: number,
11 | height: number,
12 | count?: boolean,
13 | large?: boolean
14 | }
15 |
16 | const GithubButton = (props: Props) => {
17 | const { title, user, repo, type, width, height, count, large } = props
18 | let options = `?user=${user}&repo=${repo}&type=${type}`
19 | if (count) options += '&count=true'
20 | if (large) options += '&size=large'
21 |
22 | return (
23 |
33 | )
34 | }
35 |
36 | GithubButton.defaultProps = {
37 | count: false,
38 | large: false
39 | }
40 |
41 | export default GithubButton
42 |
--------------------------------------------------------------------------------
/LICENCE:
--------------------------------------------------------------------------------
1 | Copyright (C) 2017 MADE Code PTY Ltd.
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy
4 | of this software and associated documentation files (the "Software"), to deal
5 | in the Software without restriction, including without limitation the rights
6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7 | copies of the Software, and to permit persons to whom the Software is
8 | furnished to do so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in
11 | all copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19 | THE SOFTWARE.
20 |
--------------------------------------------------------------------------------
/src/containers/App/App.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import React from 'react'
4 | import Switch from 'react-router-dom/Switch'
5 | import Route from 'react-router-dom/Route'
6 | import Helmet from 'react-helmet'
7 | import Menu from 'components/Menu/Menu'
8 | import Loading from 'components/Loading/Loading'
9 | import RedirectWithStatus from 'components/RouterStatus/RedirectWithStatus'
10 | import Home from '../Home'
11 | import Examples from '../Examples'
12 | import NotFound from '../NotFound'
13 | import Hero from '../Hero/Hero'
14 | import config from '../../config'
15 | import style from './App.scss'
16 |
17 | const App = () => (
18 | What is it really?
14 |15 | A universally rendered PWA with code-splitting that uses: 16 |
17 |-
18 |
- React 19 |
- React Router 4 20 |
- Redux 21 |
- Webpack 22 |
- Express 23 |
- Eslint 24 |
- Redux Form 25 |
- Style and Sass Loader 26 |
- RXJS 27 |
- Service Worker 28 |
31 | Take a look at our Examples Page to see parts 32 | of this in action. 33 |
34 |
19 |
33 | )
34 |
35 | export default App
36 |
--------------------------------------------------------------------------------
/bin/server.dev.js:
--------------------------------------------------------------------------------
1 | require('dotenv').config()
2 | const webpack = require('webpack')
3 | const webpackDevMiddleware = require('webpack-dev-middleware')
4 | const webpackHotMiddleware = require('webpack-hot-middleware')
5 | const webpackHotServerMiddleware = require('webpack-hot-server-middleware')
6 | const { app } = require('../src/server')
7 |
8 | const clientConfig = require('../webpack/client.dev')
9 | const serverConfig = require('../webpack/server.dev')
10 |
11 | const {
12 | output: { publicPath }
13 | } = clientConfig
14 | const compiler = webpack([clientConfig, serverConfig])
15 | const clientCompiler = compiler.compilers[0]
16 | const options = { publicPath, stats: { colors: true } }
17 | const devMiddleware = webpackDevMiddleware(compiler, options)
18 |
19 | app.use(devMiddleware)
20 | app.use(webpackHotMiddleware(clientCompiler))
21 | app.use(webpackHotServerMiddleware(compiler))
22 |
23 | let isBuilt = false
24 |
25 | devMiddleware.waitUntilValid(
26 | () =>
27 | !isBuilt &&
28 | app.listen(process.env.APP_PORT, () => {
29 | isBuilt = true
30 | console.log(`Listening @ http://localhost:${process.env.APP_PORT}/`)
31 | })
32 | )
33 |
--------------------------------------------------------------------------------
/src/client.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { hydrate } from 'react-dom'
3 | import { Provider } from 'react-redux'
4 | import { AppContainer } from 'react-hot-loader'
5 | import BrowserRouter from 'react-router-dom/BrowserRouter'
6 | import runtime from 'serviceworker-webpack-plugin/lib/runtime'
7 | import configureStore from './redux/configureStore'
8 | import App from './containers/App/App'
9 |
10 | const supportsHistory = 'pushState' in window.history
11 | const { store } = configureStore(f => f, window.__data)
12 |
13 | const renderApp = TheApp =>
14 | hydrate(
15 |
24 |
25 |
31 |
32 |
11 |
65 | )
66 |
67 | export default Hero
68 |
--------------------------------------------------------------------------------
/src/sw.js:
--------------------------------------------------------------------------------
1 | const { assets } = global.serviceWorkerOption
2 | const CACHE_NAME = new Date().toISOString()
3 |
4 | const assetsToCache = [
5 | ...assets.filter(
6 | asset =>
7 | asset.match(/.*\.(js|css)/) || asset.match(/\.(png|jpg|jpeg|gif|svg)$/i)
8 | ),
9 | '/shell'
10 | ].map(path => new URL(path, global.location).toString())
11 |
12 | self.addEventListener('install', event => {
13 | event.waitUntil(
14 | global.caches
15 | .open(CACHE_NAME)
16 | .then(cache => cache.addAll(assetsToCache))
17 | .catch(error => {
18 | console.error(error)
19 | throw error
20 | })
21 | )
22 | })
23 |
24 | self.addEventListener('activate', event => {
25 | event.waitUntil(
26 | global.caches.keys().then(keys => {
27 | const toDelete = keys.filter(key => key !== CACHE_NAME)
28 | return Promise.all(toDelete.map(key => global.caches.delete(key)))
29 | })
30 | )
31 | })
32 |
33 | self.addEventListener('fetch', event => {
34 | if (event.request.method !== 'GET') return
35 |
36 | const requestUrl = new URL(event.request.url)
37 |
38 | if (requestUrl.origin !== location.origin) return
39 | if (requestUrl.pathname === '/__webpack_hmr') return
40 | if (requestUrl.pathname.match(/\/api/)) return
41 |
42 | const request =
43 | requestUrl.pathname.indexOf('.') === -1
44 | ? new Request('/shell')
45 | : event.request
46 | const resource = global.caches.match(request).then(response => {
47 | if (response) return response
48 |
49 | return fetch(request).then(responseNetwork => {
50 | if (!responseNetwork || !responseNetwork.ok) return responseNetwork
51 |
52 | const responseCache = responseNetwork.clone()
53 | return global.caches
54 | .open(CACHE_NAME)
55 | .then(cache => cache.put(request, responseCache))
56 | .then(() => responseNetwork)
57 | .catch(() => null)
58 | })
59 | })
60 |
61 | event.respondWith(resource)
62 | })
63 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode/*
2 | !.vscode/settings.json
3 | !.vscode/tasks.json
4 | !.vscode/launch.json
5 | !.vscode/extensions.json
6 |
7 | *.DS_Store
8 | .AppleDouble
9 | .LSOverride
10 |
11 | # Icon must end with two \r
12 | Icon
13 |
14 |
15 | # Thumbnails
16 | ._*
17 |
18 | # Files that might appear in the root of a volume
19 | .DocumentRevisions-V100
20 | .fseventsd
21 | .Spotlight-V100
22 | .TemporaryItems
23 | .Trashes
24 | .VolumeIcon.icns
25 | .com.apple.timemachine.donotpresent
26 |
27 | # Directories potentially created on remote AFP share
28 | .AppleDB
29 | .AppleDesktop
30 | Network Trash Folder
31 | Temporary Items
32 | .apdisk
33 |
34 | # Logs
35 | logs
36 | *.log
37 | npm-debug.log*
38 | yarn-debug.log*
39 | yarn-error.log*
40 |
41 | # Runtime data
42 | pids
43 | *.pid
44 | *.seed
45 | *.pid.lock
46 |
47 | # Directory for instrumented libs generated by jscoverage/JSCover
48 | lib-cov
49 |
50 | # Coverage directory used by tools like istanbul
51 | coverage
52 |
53 | # nyc test coverage
54 | .nyc_output
55 |
56 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
57 | .grunt
58 |
59 | # Bower dependency directory (https://bower.io/)
60 | bower_components
61 |
62 | # node-waf configuration
63 | .lock-wscript
64 |
65 | # Compiled binary addons (http://nodejs.org/api/addons.html)
66 | build/Release
67 |
68 | # Dependency directories
69 | node_modules/
70 | jspm_packages/
71 |
72 | # Typescript v1 declaration files
73 | typings/
74 |
75 | # Optional npm cache directory
76 | .npm
77 |
78 | # Optional eslint cache
79 | .eslintcache
80 |
81 | # Optional REPL history
82 | .node_repl_history
83 |
84 | # Output of 'npm pack'
85 | *.tgz
86 |
87 | # Yarn Integrity file
88 | .yarn-integrity
89 |
90 | # dotenv environment variables file
91 | .env
92 |
93 | #App
94 | .build
95 | .favicon
96 | dist
97 | ./index.html
98 | build
99 |
100 | .vscode
101 |
--------------------------------------------------------------------------------
/webpack/server.prod.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const webpack = require('webpack')
3 | const autoprefixer = require('autoprefixer')
4 |
5 | const res = p => path.resolve(__dirname, p)
6 |
7 | const entry = res('../src/server/render.js')
8 | const output = res('../build')
9 |
10 | module.exports = {
11 | name: 'server',
12 | target: 'node',
13 | devtool: 'source-map',
14 | entry: [entry],
15 | output: {
16 | path: output,
17 | filename: 'server.js',
18 | libraryTarget: 'commonjs2'
19 | },
20 | module: {
21 | rules: [
22 | {
23 | test: /\.jsx?$/,
24 | exclude: /node_modules/,
25 | use: 'babel-loader'
26 | },
27 | {
28 | test: /\.scss$/,
29 | exclude: /node_modules/,
30 | use: [
31 | {
32 | loader: 'css-loader/locals',
33 | options: {
34 | modules: true,
35 | localIdentName: '[name]__[local]--[hash:base64:5]'
36 | }
37 | },
38 | 'sass-loader',
39 | {
40 | loader: 'postcss-loader',
41 | options: {
42 | plugins: () => [autoprefixer({ browsers: 'last 2 versions' })]
43 | }
44 | }
45 | ]
46 | },
47 | {
48 | test: /\.(jpg|png|gif|svg|ico)$/,
49 | use: [
50 | {
51 | loader: 'url-loader'
52 | }
53 | ]
54 | }
55 | ]
56 | },
57 | resolve: {
58 | alias: {
59 | components: path.resolve(__dirname, '..', 'src/components/'),
60 | reducers: path.resolve(__dirname, '..', 'src/redux/')
61 | },
62 | extensions: ['.json', '.js', '.jsx']
63 | },
64 | plugins: [
65 | new webpack.optimize.ModuleConcatenationPlugin(),
66 | new webpack.optimize.OccurrenceOrderPlugin(),
67 | new webpack.optimize.LimitChunkCountPlugin({
68 | maxChunks: 1
69 | }),
70 | new webpack.ProvidePlugin({
71 | fetch: 'isomorphic-fetch'
72 | }),
73 | new webpack.DefinePlugin({
74 | 'process.env.SERVER': JSON.stringify(true)
75 | }),
76 | new webpack.HashedModuleIdsPlugin()
77 | ]
78 | }
79 |
--------------------------------------------------------------------------------
/src/server/render.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Provider } from 'react-redux'
3 | import { StaticRouter } from 'react-router-dom'
4 | import {
5 | renderToString as renderToStringEpic,
6 | wrapRootEpic
7 | } from 'react-redux-epic'
8 | import { renderToNodeStream } from 'react-dom/server'
9 | import { flushChunkNames } from 'react-universal-component/server'
10 | import flushChunks from 'webpack-flush-chunks'
11 | import configureStore from '../redux/configureStore'
12 | import App from '../containers/App/App'
13 | import Html from '../helpers/Html'
14 |
15 | export default ({ clientStats }) => (req, res) => {
16 | const { wrappedEpic, store } = configureStore(wrapRootEpic)
17 | const reactRouterContext = {}
18 |
19 | const component = (
20 |
12 | 
13 |
15 | n. The quality of being reactive or the degree to which something
16 | is reactive.
17 |
18 |
64 | Reactivity
14 |19 | n. Boilerplate for Power Users. 20 |
21 |
22 |
28 | View on
29 | Github
30 |
31 |
53 | Created with love from the team at 54 | 60 | MADE Code 61 | 62 |
63 |
38 |
141 | )
142 | }
143 | }
144 | export default connect(
145 | state => ({
146 | neo: state.neo.data[state.neo.startDate],
147 | loaded: state.neo.fetched,
148 | loading: state.neo.fetching
149 | }),
150 | {
151 | fetchData
152 | }
153 | )(Examples)
154 |
--------------------------------------------------------------------------------
/flow-typed/npm/rxjs_v5.0.x.js:
--------------------------------------------------------------------------------
1 | // flow-typed signature: f998e895a1b69a158bfdbd4c08f89006
2 | // flow-typed version: 8b9804dad4/rxjs_v5.0.x/flow_>=v0.34.x
3 |
4 | // FIXME(samgoldman) Remove top-level interface once Babel supports
5 | // `declare interface` syntax.
6 | // FIXME(samgoldman) Remove this once rxjs$SubjectWhat can it do?
43 | 44 |45 | We know our demo app is not particularly exciting, but stay tuned as 46 | we're working on something a little more special 47 |
48 |49 | For the moment this should suffice as a demonstration of what{' '} 50 | Reactivity can do: 51 |
52 | 53 |54 | Here's some Data {loading ? 'Loading' : 'Loaded'} from NASA 🛰: 55 |
56 | 57 | {loading &&loading..
} 58 | {loaded && ( 59 |-
60 | {neo &&
61 | neo.map(object => (
62 |
- {object.name} 63 | ))} 64 |
68 | We use RXJS and the concept of{' '} 69 | 74 | Epics 75 | {' '} 76 | for our asynchronous actions. Check{' '} 77 | 82 | this file 83 | {' '} 84 | which is responsible for fetching the above data. 85 |
86 |87 | Both client and server make calls to load data from separate API 88 | server. If you were to disable JavaScript or refresh the page, the 89 | data will be here waiting for you. 90 |
91 | 92 |93 | Universal Code-splitting{' '} 94 | 95 | 🌍 96 | 97 |
98 | 99 |100 | For this one your gonna need to open your network tab, and you will be 101 | able to see which chunks are being sent. You're currently viewing 102 | the{' '} 103 | 108 | Examples chunk. 109 | 110 |
111 | 112 |113 | Progressive Web App Ready{' '} 114 | 115 | 🏝 116 | 117 |
118 | 119 |120 | This Boilerplate currently passes all the PWA requirements of 121 | lighthouse and you can {'fully '} 122 | 127 | customize the service worker 128 | {' '} 129 | to suite the needs of your App. 130 |
131 | 132 |Oh look a typical Form Example
133 |134 | Powered By redux Forms which integrates perfectly into our 135 | Boilerplate. Check the console for values once you've submitted 136 | the form. 137 |
138 | 139 |