17 | This starter kit contains all the build tooling and configuration you need to kick off your next universal React project, whilst containing a minimal project set up allowing you to make your own architecture decisions (Redux/Mobx etc).
18 |
19 |
20 | `;
21 |
--------------------------------------------------------------------------------
/client/polyfills/index.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 |
3 | import Modernizr from 'modernizr';
4 |
5 | // This is just an illustrative example. Here you are testing the client's
6 | // support for the "picture" element, and if it isn't supported then you
7 | // load a polyfill.
8 | if (!Modernizr.picture) {
9 | console.log('Client does not support "picture", polyfilling it...');
10 | // If you want to use the below do a `npm install picturefill -E -S` and then
11 | // uncomment the lines below:
12 | /*
13 | require('picturefill');
14 | require('picturefill/dist/plugins/mutation/pf.mutation');
15 | */
16 | } else {
17 | console.log('Client has support for "picture".');
18 | }
19 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # See http://editorconfig.org/
2 | # EditorConfig helps developers define and maintain consistent coding styles
3 | # between different editors and IDEs. The EditorConfig project consists of a
4 | # file format for defining coding styles and a collection of text editor plugins
5 | # that enable editors to read the file format and adhere to defined styles.
6 | # EditorConfig files are easily readable and they work nicely with version
7 | # control systems.
8 |
9 | root = true
10 |
11 | [*]
12 | indent_style = space
13 | indent_size = 2
14 | end_of_line = lf
15 | charset = utf-8
16 | trim_trailing_whitespace = true
17 | insert_final_newline = true
18 |
19 | [*.md]
20 | trim_trailing_whitespace = false
21 |
--------------------------------------------------------------------------------
/shared/components/DemoApp/AsyncAboutRoute/__tests__/__snapshots__/AboutRoute.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[` renders 1`] = `
4 |
16 | This starter kit contains all the build tooling and configuration you
17 | need to kick off your next universal React project, whilst containing a
18 | minimal project set up allowing you to make your own architecture
19 | decisions (Redux/Mobx etc).
20 |
38 | `;
39 |
--------------------------------------------------------------------------------
/internal/docs/ADDING_AN_API_BUNDLE.md:
--------------------------------------------------------------------------------
1 | # Adding an "API" Bundle
2 |
3 | A fairly common requirement for a project that scales is to create additional servers bundles, e.g. an API server.
4 |
5 | Instead of requiring you to hack the Webpack configuration we have have provided a section within the centralised project configuration that allows you to easily declare additional bundles. You simply need to provide the source, entry, and output paths - we take care of the rest.
6 |
7 | _IMPORTANT:_ One further requirement for this feature is that within your new server bundle you export the created http listener. This exported listener will be used by the development server so that it can automatically restart your server any time the source files for it change.
8 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Environment Configuration
2 | .env
3 |
4 | # Build output folders
5 | build/
6 |
7 | # Logs
8 | logs
9 | *.log
10 |
11 | # Runtime data
12 | pids
13 | *.pid
14 | *.seed
15 |
16 | # Coverage directory used by tools like istanbul
17 | coverage
18 |
19 | # node-waf configuration
20 | .lock-wscript
21 |
22 | # Dependency directory
23 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
24 | node_modules
25 |
26 | # Debug log from npm
27 | npm-debug.log
28 |
29 | # IntelliJ IDE ignore
30 | .idea
31 |
32 | # Visual Studio Code
33 | .vscode
34 | .history
35 |
36 | # flow-typed Lib Defs
37 | flow-typed/
38 |
39 | # Flow Coverage Report
40 | flow-coverage/
41 |
42 | # Happypack
43 | .happypack
44 |
45 | # OSX Files
46 | .DS_Store
47 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "extends": "airbnb",
4 | "env": {
5 | "browser": true,
6 | "es6": true,
7 | "node": true,
8 | "jest": true
9 | },
10 | "parserOptions": {
11 | "ecmaVersion": 6,
12 | "sourceType": "module",
13 | "ecmaFeatures": {
14 | "defaultParams": true
15 | }
16 | },
17 | "rules": {
18 | // A jsx extension is not required for files containing jsx
19 | "react/jsx-filename-extension": 0,
20 | // This rule struggles with flow and class properties
21 | "react/sort-comp": 0,
22 | // ignore linebreak style. the CRLF / LF endings wont matter
23 | // if a windows user correctly converts CRLF to LF upon commits otherwise
24 | // there are errors every line.
25 | "linebreak-style": 0
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/.env_example:
--------------------------------------------------------------------------------
1 | # ==============================================================================
2 | # This is an example environment configuration file. You can create your own
3 | # .env implementation or pass them via the CLI.
4 | #
5 | # You could also decide to supply some of your environment variables from a .env
6 | # file, and others via the CLI. This allows you to easily store "safe"
7 | # environment variables within this file, and then manage your more sensitive
8 | # environment variables seperately.
9 | # ==============================================================================
10 |
11 | # The host on which to run the server.
12 | HOST=localhost
13 |
14 | # The port on which to run the server.
15 | PORT=1337
16 |
17 | # The port on which to run the client bundle dev server (i.e. used during
18 | # development only).
19 | CLIENT_DEV_PORT=7331
20 |
--------------------------------------------------------------------------------
/internal/webpack/withServiceWorker/offlinePageTemplate.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This is used by the HtmlWebpackPlugin to generate an html page that we will
3 | * use as a fallback for our service worker when the user is offline. It will
4 | * embed all the required asset paths needed to bootstrap the application
5 | * in an offline session.
6 | */
7 |
8 | import React from 'react';
9 | import { renderToStaticMarkup } from 'react-dom/server';
10 |
11 | import HTML from '../../../shared/components/HTML';
12 |
13 | module.exports = function generate(context) {
14 | // const config = context.htmlWebpackPlugin.options.custom.config;
15 | const ClientConfig = context.htmlWebpackPlugin.options.custom.ClientConfig;
16 | const html = renderToStaticMarkup(
17 |
} />,
18 | );
19 | return `${html}`;
20 | };
21 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "React Universally",
3 | "short_name": "Rct-Unvrslly",
4 | "description": "A starter kit giving you the minimum requirements for a production ready universal react application.",
5 | "lang": "en",
6 | "start_url": "./",
7 | "icons": [
8 | {
9 | "src": "\/android-chrome-512x512.png",
10 | "sizes": "512x512",
11 | "type": "image\/png"
12 | },
13 | {
14 | "src": "\/android-chrome-192x192.png",
15 | "sizes": "192x192",
16 | "type": "image\/png"
17 | },
18 | {
19 | "src": "\/apple-touch-icon.png",
20 | "sizes": "180x180",
21 | "type": "image\/png"
22 | },
23 | {
24 | "src": "\/favicon-32x32.png",
25 | "sizes": "32x32",
26 | "type": "image\/png"
27 | },
28 | {
29 | "src": "\/favicon-16x16.png",
30 | "sizes": "16x16",
31 | "type": "image\/png"
32 | }
33 | ],
34 | "theme_color": "#2b2b2b",
35 | "background_color": "#ffffff",
36 | "display": "standalone"
37 | }
38 |
--------------------------------------------------------------------------------
/shared/utils/logic/ifElse.js:
--------------------------------------------------------------------------------
1 | const execIfFunc = x => (typeof x === 'function' ? x() : x);
2 |
3 | /**
4 | * This is a higher order function that accepts a boolean condition and will
5 | * return a function allowing you to provide if/else values that should be
6 | * resolved based on the boolean condition.
7 | *
8 | * @param {Boolean|() => Boolean} condition:
9 | * The condition to test against. This can be a function for lazy resolution.
10 | *
11 | * @return {(X|() => X, Y|() => Y) => X|Y}
12 | * A function where the first paramater is the "if" and the second paramater
13 | * is the "else". Each of these allows lazy resolving by providing a function.
14 | *
15 | * @example
16 | * const ifDev = ifElse(process.env.NODE_ENV === 'development');
17 | * ifDev('foo', () => 'lazy resolved'); // => 'foo'
18 | */
19 | export default function ifElse(condition) {
20 | return (then, or) => (execIfFunc(condition) ? execIfFunc(then) : execIfFunc(or));
21 | }
22 |
--------------------------------------------------------------------------------
/shared/utils/objects/__tests__/mergeDeep.test.js:
--------------------------------------------------------------------------------
1 | import { mergeDeep } from '../';
2 |
3 | describe('mergeDeep', () => {
4 | test('merges deeply two objects together', () => {
5 | const object1 = { a: 1, b: 2, c: { a: 1, b: 2 } };
6 | const object2 = { a: 1, c: { c: 3 } };
7 | expect(mergeDeep(object1, object2)).toEqual({
8 | a: 1,
9 | b: 2,
10 | c: {
11 | a: 1,
12 | b: 2,
13 | c: 3,
14 | },
15 | });
16 | });
17 |
18 | test('the object to the right takes the priority', () => {
19 | const object1 = { a: 1, b: 2 };
20 | const object2 = { a: 1, b: 3 };
21 | expect(mergeDeep(object1, object2)).toEqual({
22 | a: 1,
23 | b: 3,
24 | });
25 | });
26 |
27 | test('returns an empty object if no args are given', () => {
28 | expect(mergeDeep()).toEqual({});
29 | });
30 |
31 | test('returns the only object given as arg if no other args are given', () => {
32 | expect(mergeDeep({ a: 1 })).toEqual({ a: 1 });
33 | });
34 | });
35 |
--------------------------------------------------------------------------------
/shared/utils/objects/mergeDeep.js:
--------------------------------------------------------------------------------
1 | import removeNil from '../arrays/removeNil';
2 |
3 | /**
4 | * Deeply merges a given set of objects together.
5 | *
6 | * Objects to the right take priority.
7 | *
8 | * @param {...Object} args - The objects to merge.
9 | *
10 | * @return {Object} - The merged object.
11 | */
12 | export default function mergeDeep(...args) {
13 | const filtered = removeNil(args);
14 | if (filtered.length < 1) {
15 | return {};
16 | }
17 | if (filtered.length === 1) {
18 | return args[0];
19 | }
20 | return filtered.reduce(
21 | (acc, cur) => {
22 | Object.keys(cur).forEach((key) => {
23 | if (typeof acc[key] === 'object' && typeof cur[key] === 'object') {
24 | // eslint-disable-next-line no-param-reassign
25 | acc[key] = mergeDeep(acc[key], cur[key]);
26 | } else {
27 | // eslint-disable-next-line no-param-reassign
28 | acc[key] = cur[key];
29 | }
30 | });
31 | return acc;
32 | },
33 | {},
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/shared/components/DemoApp/AsyncCounterRoute/CounterRoute.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/no-unescaped-entities */
2 | import React, { Component } from 'react';
3 |
4 | class CounterRoute extends Component {
5 | constructor(props) {
6 | super(props);
7 | this.incrementCounter = this.incrementCounter.bind(this);
8 | this.state = { counter: 0 };
9 | }
10 |
11 | incrementCounter() {
12 | this.setState({ counter: this.state.counter + 1 });
13 | }
14 |
15 | render() {
16 | return (
17 |
18 |
Counter
19 |
20 |
21 | This is a small demo component that contains state. It's useful for
22 | testing the hot reloading experience of an asyncComponent.
23 |
24 |