);
10 | expect(renderedComponent).to.have.tagName('img');
11 | });
12 |
13 | it('should have an alt attribute', () => {
14 | const renderedComponent = shallow(
24 | {{/if}}
25 | {{#if wantMessages}}
26 |
29 | );
30 | }
31 |
32 | export default {{ properCase name }};
33 |
--------------------------------------------------------------------------------
/app/components/Button/styles.css:
--------------------------------------------------------------------------------
1 | .buttonWrapper {
2 | width: 100%;
3 | text-align: center;
4 | margin: 4em 0;
5 | }
6 |
7 | .button {
8 | display: inline-block;
9 | box-sizing: border-box;
10 | padding: 0.25em 2em;
11 | margin: 0;
12 | border: 0;
13 | text-decoration: none;
14 | border-radius: 4px;
15 | -webkit-font-smoothing: antialiased;
16 | -webkit-touch-callout: none;
17 | user-select: none;
18 | cursor: pointer;
19 | outline: 0;
20 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
21 | font-weight: bold;
22 | font-size: 16px;
23 | color: #FFF;
24 | border: 2px solid #41ADDD;
25 | color: #41ADDD;
26 | }
27 |
28 | .button:active {
29 | background: #41ADDD;
30 | color: #FFF;
31 | }
32 |
--------------------------------------------------------------------------------
/app/tests/store.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Test store addons
3 | */
4 |
5 | import expect from 'expect';
6 | import configureStore from '../store';
7 | import { browserHistory } from 'react-router';
8 |
9 | describe('configureStore', () => {
10 | let store;
11 |
12 | before(() => {
13 | store = configureStore({}, browserHistory);
14 | });
15 |
16 | describe('asyncReducers', () => {
17 | it('should contain an object for async reducers', () => {
18 | expect(typeof store.asyncReducers).toEqual('object');
19 | });
20 | });
21 |
22 | describe('runSaga', () => {
23 | it('should contain a hook for `sagaMiddleware.run`', () => {
24 | expect(typeof store.runSaga).toEqual('function');
25 | });
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/internals/scripts/helpers/progress.js:
--------------------------------------------------------------------------------
1 | var readline = require('readline');
2 |
3 | /**
4 | * Adds an animated progress indicator
5 | *
6 | * @param {string} message The message to write next to the indicator
7 | * @param {number} amountOfDots The amount of dots you want to animate
8 | */
9 | function animateProgress(message, amountOfDots) {
10 | if (typeof amountOfDots !== 'number') {
11 | amountOfDots = 3;
12 | }
13 |
14 | var i = 0;
15 | return setInterval(function () {
16 | readline.cursorTo(process.stdout, 0);
17 | i = (i + 1) % (amountOfDots + 1);
18 | var dots = new Array(i + 1).join('.');
19 | process.stdout.write(message + dots);
20 | }, 500);
21 | }
22 |
23 | module.exports = animateProgress;
24 |
--------------------------------------------------------------------------------
/docs/general/server-configs.md:
--------------------------------------------------------------------------------
1 | # Server Configurations
2 |
3 | ## Apache
4 |
5 | This boilerplate includes a `.htaccess` file that does two things:
6 |
7 | 1. Redirect all traffic to HTTPS because ServiceWorker only works for encrypted
8 | traffic.
9 | 1. Rewrite all pages (e.g. `yourdomain.com/subpage`) to `yourdomain.com/index.html`
10 | to let `react-router` take care of presenting the correct page.
11 |
12 | > Note: For performance reasons you should probably adapt it to run as a static
13 | `.conf` file (typically under `/etc/apache2/sites-enabled` or similar) so that
14 | your server doesn't have to apply its rules dynamically per request)
15 |
16 | ## Nginx
17 |
18 | Also it includes a `.nginx.conf` file that does the same on Nginx server.
19 |
--------------------------------------------------------------------------------
/app/containers/App/styles.css:
--------------------------------------------------------------------------------
1 | /* Global styles */
2 |
3 | html,
4 | body {
5 | height: 100%;
6 | width: 100%;
7 | }
8 |
9 | body {
10 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
11 | }
12 |
13 | body.fontLoaded {
14 | font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
15 | }
16 |
17 | :global(#app) {
18 | background-color: #FAFAFA;
19 | min-height: 100%;
20 | min-width: 100%;
21 | }
22 |
23 | .wrapper {
24 | max-width: calc(768px + 16px * 2);
25 | margin: 0 auto;
26 | display: flex;
27 | min-height: 100%;
28 | padding: 0 16px;
29 | flex-direction: column;
30 | }
31 |
32 | .logoWrapper {
33 | padding: 2em 0;
34 | }
35 |
36 | .logo {
37 | width: 100%;
38 | margin: 0 auto;
39 | display: block;
40 | }
41 |
--------------------------------------------------------------------------------
/app/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "React Boilerplate",
3 | "icons": [
4 | {
5 | "src": "favicon.png",
6 | "sizes": "48x48",
7 | "type": "image/png",
8 | "density": 1.0
9 | },
10 | {
11 | "src": "favicon.png",
12 | "sizes": "96x96",
13 | "type": "image/png",
14 | "density": 2.0
15 | },
16 | {
17 | "src": "favicon.png",
18 | "sizes": "144x144",
19 | "type": "image/png",
20 | "density": 3.0
21 | },
22 | {
23 | "src": "favicon.png",
24 | "sizes": "192x192",
25 | "type": "image/png",
26 | "density": 4.0
27 | }
28 | ],
29 | "start_url": "index.html",
30 | "display": "standalone",
31 | "orientation": "portrait",
32 | "background_color": "#FFFFFF"
33 | }
--------------------------------------------------------------------------------
/internals/templates/store.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Test store addons
3 | */
4 |
5 | import expect from 'expect';
6 | import configureStore from '../store'; // eslint-disable-line
7 | import { browserHistory } from 'react-router';
8 |
9 | describe('configureStore', () => {
10 | let store;
11 |
12 | before(() => {
13 | store = configureStore({}, browserHistory);
14 | });
15 |
16 | describe('asyncReducers', () => {
17 | it('should contain an object for async reducers', () => {
18 | expect(typeof store.asyncReducers).toEqual('object');
19 | });
20 | });
21 |
22 | describe('runSaga', () => {
23 | it('should contain a hook for `sagaMiddleware.run`', () => {
24 | expect(typeof store.runSaga).toEqual('function');
25 | });
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/app/components/List/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import expect from 'expect';
2 | import { render } from 'enzyme';
3 | import React from 'react';
4 |
5 | import List from '../index';
6 | import ListItem from 'components/ListItem';
7 |
8 | describe('
21 |
23 | );
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/app/containers/HomePage/tests/reducer.test.js:
--------------------------------------------------------------------------------
1 | import expect from 'expect';
2 | import homeReducer from '../reducer';
3 | import {
4 | changeUsername,
5 | } from '../actions';
6 | import { fromJS } from 'immutable';
7 |
8 | describe('homeReducer', () => {
9 | let state;
10 | beforeEach(() => {
11 | state = fromJS({
12 | username: '',
13 | });
14 | });
15 |
16 | it('should return the initial state', () => {
17 | const expectedResult = state;
18 | expect(homeReducer(undefined, {})).toEqual(expectedResult);
19 | });
20 |
21 | it('should handle the changeUsername action correctly', () => {
22 | const fixture = 'mxstbr';
23 | const expectedResult = state.set('username', fixture);
24 |
25 | expect(homeReducer(state, changeUsername(fixture))).toEqual(expectedResult);
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/internals/scripts/pagespeed.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | process.stdin.resume();
4 | process.stdin.setEncoding('utf8');
5 |
6 | var ngrok = require('ngrok');
7 | var psi = require('psi');
8 | var chalk = require('chalk');
9 |
10 | log('\nStarting ngrok tunnel');
11 |
12 | startTunnel(runPsi);
13 |
14 | function runPsi(url) {
15 | log('\nStarting PageSpeed Insights');
16 | psi.output(url).then(function (err) {
17 | process.exit(0);
18 | });
19 | }
20 |
21 | function startTunnel(cb) {
22 | ngrok.connect(3000, function (err, url) {
23 | if (err) {
24 | log(chalk.red('\nERROR\n' + err));
25 | process.exit(0);
26 | }
27 |
28 | log('\nServing tunnel from: ' + chalk.magenta(url));
29 | cb(url);
30 | });
31 | }
32 |
33 | function log(string) {
34 | process.stdout.write(string);
35 | }
36 |
--------------------------------------------------------------------------------
/internals/generators/component/es6.js.hbs:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * {{ properCase name }}
4 | *
5 | */
6 |
7 | import React from 'react';
8 |
9 | {{#if wantMessages}}
10 | import { FormattedMessage } from 'react-intl';
11 | import messages from './messages';
12 | {{/if}}
13 | {{#if wantCSS}}
14 | import styles from './styles.css';
15 | {{/if}}
16 |
17 | class {{ properCase name }} extends React.Component { // eslint-disable-line react/prefer-stateless-function
18 | render() {
19 | return (
20 | {{#if wantCSS}}
21 |
22 | {{else}}
23 |
21 |
23 | );
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/app/components/List/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import styles from './styles.css';
4 |
5 | function List(props) {
6 | const ComponentToRender = props.component;
7 | let content = ();
8 |
9 | // If we have items, render them
10 | if (props.items) {
11 | content = props.items.map((item, index) => (
12 | ![]()
` tag, everything
8 | will work fine. The problem comes up if you try to include images using anything
9 | except that tag, like meta tags:
10 |
11 | ```HTML
12 |
13 | ```
14 |
15 | The webpack `html-loader` does not recognise this as an image file and will not
16 | transfer the image to the build folder. To get webpack to transfer them, you
17 | have to import them with the file loader in your JavaScript somewhere, e.g.:
18 |
19 | ```JavaScript
20 | import 'file?name=[name].[ext]!../img/yourimg.png';
21 | ```
22 |
23 | Then webpack will correctly transfer the image to the build folder.
24 |
--------------------------------------------------------------------------------
/internals/templates/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | React.js Boilerplate
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/app/components/ToggleOption/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import ToggleOption from '../index';
2 |
3 | import expect from 'expect';
4 | import { shallow } from 'enzyme';
5 | import { IntlProvider, defineMessages } from 'react-intl';
6 | import React from 'react';
7 |
8 | describe('
19 |
21 | );
22 | expect(renderedComponent.contains(
20 | {children}
21 |
22 | );
23 | expect(renderedComponent.contains(children)).toEqual(true);
24 | });
25 |
26 | it('should render the footer', () => {
27 | const renderedComponent = shallow(
28 |
24 |
26 | );
27 | expect(renderedComponent.contains(React.js Boilerplate
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/docs/css/remove.md:
--------------------------------------------------------------------------------
1 | ## Removing CSS modules
2 |
3 | To remove this feature from your setup, stop importing `.css` files in your
4 | components and delete the `modules` option from the `css-loader` declaration in
5 | [`webpack.prod.babel.js`](/internals/webpack/webpack.prod.babel.js) and
6 | [`webpack.base.babel.js`](/internals/webpack/webpack.base.babel.js)!
7 |
8 | ## Removing PostCSS
9 |
10 | To remove PostCSS, delete the `postcssPlugins` option and remove all occurences
11 | of the `postcss-loader` from
12 |
13 | - [`webpack.dev.babel.js`](/internals/webpack/webpack.dev.babel.js)
14 | - [`webpack.prod.babel.js`](/internals/webpack/webpack.prod.babel.js)
15 | - [`webpack.base.babel.js`](/internals/webpack/webpack.base.babel.js)
16 |
17 | When that is done - and you've verified that everything is still working - remove
18 | all related dependencies from [`package.json`](/package.json)!
19 |
20 | ## Removing `sanitize.css`
21 |
22 | Delete [lines 44 and 45 in `app.js`](../../app/app.js#L44-L45) and remove it
23 | from the `dependencies` in [`package.json`](../../package.json)!
24 |
--------------------------------------------------------------------------------
/app/components/A/tests/index.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Testing our link component
3 | */
4 |
5 | import A from '../index';
6 |
7 | import expect from 'expect';
8 | import { shallow } from 'enzyme';
9 | import React from 'react';
10 |
11 | describe('', () => {
12 | it('should render its children', () => {
13 | const children = (
19 | {React.Children.only(this.props.children)}
20 |
21 | );
22 | }
23 | }
24 |
25 | LanguageProvider.propTypes = {
26 | locale: React.PropTypes.string,
27 | messages: React.PropTypes.object,
28 | children: React.PropTypes.element.isRequired,
29 | };
30 |
31 | const mapStateToProps = createSelector(
32 | selectLocale(),
33 | (locale) => ({ locale })
34 | );
35 |
36 | export default connect(mapStateToProps)(LanguageProvider);
37 |
--------------------------------------------------------------------------------
/app/components/Footer/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import expect from 'expect';
2 | import { shallow } from 'enzyme';
3 | import React from 'react';
4 | import { FormattedMessage } from 'react-intl';
5 |
6 | import messages from '../messages';
7 | import Footer from '../index';
8 | import A from 'components/A';
9 |
10 | describe('', () => {
11 | it('should render the copyright notice', () => {
12 | const renderedComponent = shallow(
13 |
14 | );
15 | expect(renderedComponent.contains(
16 |
17 |
21 | )).toEqual(true);
22 | });
23 |
24 | it('should render the credits', () => {
25 | const renderedComponent = shallow();
26 | expect(renderedComponent.contains(
27 |
28 |
37 | )).toEqual(true);
38 | });
39 | });
40 |
--------------------------------------------------------------------------------
/internals/webpack/webpack.dll.babel.js:
--------------------------------------------------------------------------------
1 | /**
2 | * WEBPACK DLL GENERATOR
3 | *
4 | * This profile is used to cache webpack's module
5 | * contexts for external library and framework type
6 | * dependencies which will usually not change often enough
7 | * to warrant building them from scratch every time we use
8 | * the webpack process.
9 | */
10 |
11 | const { join } = require('path');
12 | const defaults = require('lodash/defaultsDeep');
13 | const webpack = require('webpack');
14 | const pkg = require(join(process.cwd(), 'package.json'));
15 | const dllPlugin = require('../config').dllPlugin;
16 |
17 | if (!pkg.dllPlugin) { process.exit(0); }
18 |
19 | const dllConfig = defaults(pkg.dllPlugin, dllPlugin.defaults);
20 | const outputPath = join(process.cwd(), dllConfig.path);
21 |
22 | module.exports = {
23 | context: process.cwd(),
24 | entry: dllConfig.dlls ? dllConfig.dlls : dllPlugin.entry(pkg),
25 | devtool: 'eval',
26 | output: {
27 | filename: '[name].dll.js',
28 | path: outputPath,
29 | library: '[name]',
30 | },
31 | plugins: [
32 | new webpack.DllPlugin({ name: '[name]', path: join(outputPath, '[name].json') }), // eslint-disable-line no-new
33 | ],
34 | };
35 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | # React Boilerplate
2 |
3 | Before opening a new issue, please take a moment to review our [**community guidelines**](https://github.com/mxstbr/react-boilerplate/blob/master/.github/CONTRIBUTING.md) to make the contribution process easy and effective for everyone involved.
4 |
5 | Please direct redux-saga related questions to stack overflow:
6 | http://stackoverflow.com/questions/tagged/redux-saga
7 |
8 | For questions related to the boilerplate itself, you can also find answers on our gitter chat:
9 | https://gitter.im/mxstbr/react-boilerplate
10 |
11 | **Before opening a new issue, you may find an answer in already closed issues**:
12 | https://github.com/mxstbr/react-boilerplate/issues?q=is%3Aissue+is%3Aclosed
13 |
14 | ## Issue Type
15 |
16 | - [ ] Bug (https://github.com/mxstbr/react-boilerplate/blob/master/.github/CONTRIBUTING.md#bug-reports)
17 | - [ ] Feature (https://github.com/mxstbr/react-boilerplate/blob/master/.github/CONTRIBUTING.md#feature-requests)
18 |
19 | ## Description
20 |
21 | (Add images if possible)
22 |
23 | ## Steps to reproduce
24 |
25 | (Add link to a demo on https://jsfiddle.net or similar if possible)
26 |
27 | # Versions
28 |
29 | - Node/NPM:
30 | - Browser:
31 |
--------------------------------------------------------------------------------
/server/logger.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 |
3 | const chalk = require('chalk');
4 | const ip = require('ip');
5 |
6 | const divider = chalk.gray('\n-----------------------------------');
7 |
8 | /**
9 | * Logger middleware, you can customize it to make messages more personal
10 | */
11 | const logger = {
12 |
13 | // Called whenever there's an error on the server we want to print
14 | error: err => {
15 | console.error(chalk.red(err));
16 | },
17 |
18 | // Called when express.js app starts on given port w/o errors
19 | appStarted: (port, tunnelStarted) => {
20 | console.log(`Server started ${chalk.green('✓')}`);
21 |
22 | // If the tunnel started, log that and the URL it's available at
23 | if (tunnelStarted) {
24 | console.log(`Tunnel initialised ${chalk.green('✓')}`);
25 | }
26 |
27 | console.log(`
28 | ${chalk.bold('Access URLs:')}${divider}
29 | Localhost: ${chalk.magenta(`http://localhost:${port}`)}
30 | LAN: ${chalk.magenta(`http://${ip.address()}:${port}`) +
31 | (tunnelStarted ? `\n Proxy: ${chalk.magenta(tunnelStarted)}` : '')}${divider}
32 | ${chalk.blue(`Press ${chalk.italic('CTRL-C')} to stop`)}
33 | `);
34 | },
35 | };
36 |
37 | module.exports = logger;
38 |
--------------------------------------------------------------------------------
/appveyor.yml:
--------------------------------------------------------------------------------
1 | # http://www.appveyor.com/docs/appveyor-yml
2 |
3 | # Set build version format here instead of in the admin panel
4 | version: "{build}"
5 |
6 | # Do not build on gh tags
7 | skip_tags: true
8 |
9 | # Test against these versions of Node.js
10 | environment:
11 |
12 | matrix:
13 | # Node versions to run
14 | - nodejs_version: "5.0"
15 |
16 | # Fix line endings in Windows. (runs before repo cloning)
17 | init:
18 | - git config --global core.autocrlf input
19 |
20 | # Install scripts--runs after repo cloning
21 | install:
22 | # Install chrome
23 | - choco install -y googlechrome
24 | # Install the latest stable version of Node
25 | - ps: Install-Product node $env:nodejs_version
26 | - npm -g install npm
27 | - set PATH=%APPDATA%\npm;%PATH%
28 | - npm install
29 |
30 | # Disable automatic builds
31 | build: off
32 |
33 | # Post-install test scripts
34 | test_script:
35 | # Output debugging info
36 | - node --version
37 | - npm --version
38 | # run build and run tests
39 | - npm run build
40 |
41 | # remove, as appveyor doesn't support secure variables on pr builds
42 | # so `COVERALLS_REPO_TOKEN` cannot be set, without hard-coding in this file
43 | #on_success:
44 | #- npm run coveralls
45 |
--------------------------------------------------------------------------------
/app/containers/NotFoundPage/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * NotFoundPage
3 | *
4 | * This is the page we show when the user visits a url that doesn't have a route
5 | */
6 |
7 | import React from 'react';
8 | import { connect } from 'react-redux';
9 | import { push } from 'react-router-redux';
10 |
11 | import messages from './messages';
12 | import { FormattedMessage } from 'react-intl';
13 | import Button from 'components/Button';
14 | import H1 from 'components/H1';
15 |
16 | export function NotFound(props) {
17 | return (
18 |
19 |
30 | );
31 | }
32 |
33 | NotFound.propTypes = {
34 | changeRoute: React.PropTypes.func,
35 | };
36 |
37 | // react-redux stuff
38 | function mapDispatchToProps(dispatch) {
39 | return {
40 | changeRoute: (url) => dispatch(push(url)),
41 | };
42 | }
43 |
44 | // Wrap the component to inject dispatch and state into it
45 | export default connect(null, mapDispatchToProps)(NotFound);
46 |
--------------------------------------------------------------------------------
/app/containers/LanguageProvider/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import LanguageProvider from '../index';
2 |
3 | import expect from 'expect';
4 | import { shallow } from 'enzyme';
5 | import { FormattedMessage, defineMessages } from 'react-intl';
6 | import configureStore from '../../../store';
7 | import React from 'react';
8 | import { Provider } from 'react-redux';
9 | import { browserHistory } from 'react-router';
10 | import { translatedMessages } from '../../../i18n';
11 |
12 | describe('
28 |
29 |
31 |
32 | );
33 | expect(renderedComponent.contains(
17 |
19 | )).toEqual(true);
20 | });
21 |
22 | it('should link to "/"', () => {
23 | const openRouteSpy = expect.createSpy();
24 |
25 | // Spy on the openRoute method of the FeaturePage
26 | const openRoute = (dest) => {
27 | if (dest === '/') {
28 | openRouteSpy();
29 | }
30 | };
31 |
32 | const renderedComponent = mount(
33 |
34 |
36 | );
37 | const button = renderedComponent.find('button');
38 | button.simulate('click');
39 | expect(openRouteSpy).toHaveBeenCalled();
40 | });
41 | });
42 |
--------------------------------------------------------------------------------
/app/components/Button/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * Button.react.js
4 | *
5 | * A common button, if you pass it a prop "route" it'll render a link to a react-router route
6 | * otherwise it'll render a link with an onclick
7 | */
8 |
9 | import React, { PropTypes, Children } from 'react';
10 |
11 | import styles from './styles.css';
12 |
13 | function Button(props) {
14 | const className = props.className ? props.className : styles.button;
15 |
16 | // Render an anchor tag
17 | let button = (
18 |
19 | {Children.toArray(props.children)}
20 |
21 | );
22 |
23 | // If the Button has a handleRoute prop, we want to render a button
24 | if (props.handleRoute) {
25 | button = (
26 |
29 | );
30 | }
31 |
32 | return (
33 |
19 | {React.Children.only(this.props.children)}
20 |
21 | );
22 | }
23 | }
24 |
25 | LanguageProvider.propTypes = {
26 | locale: React.PropTypes.string,
27 | messages: React.PropTypes.object,
28 | children: React.PropTypes.element.isRequired,
29 | };
30 |
31 |
32 | const mapStateToProps = createSelector(
33 | selectLocale(),
34 | (locale) => ({ locale })
35 | );
36 |
37 | function mapDispatchToProps(dispatch) {
38 | return {
39 | dispatch,
40 | };
41 | }
42 |
43 | export default connect(mapStateToProps, mapDispatchToProps)(LanguageProvider);
44 |
--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
1 | /* eslint consistent-return:0 */
2 |
3 | const express = require('express');
4 | const logger = require('./logger');
5 |
6 | const argv = require('minimist')(process.argv.slice(2));
7 | const setup = require('./middlewares/frontendMiddleware');
8 | const setupApi = require('./middlewares/api');
9 | const isDev = process.env.NODE_ENV !== 'production';
10 | const ngrok = (isDev && process.env.ENABLE_TUNNEL) || argv.tunnel ? require('ngrok') : false;
11 | const resolve = require('path').resolve;
12 | const app = express();
13 |
14 | setupApi(app);
15 |
16 | // In production we need to pass these values in instead of relying on webpack
17 | setup(app, {
18 | outputPath: resolve(process.cwd(), 'build'),
19 | publicPath: '/',
20 | });
21 |
22 | // get the intended port number, use port 3000 if not provided
23 | const port = argv.port || process.env.PORT || 3000;
24 |
25 | // Start your app.
26 | app.listen(port, (err) => {
27 | if (err) {
28 | return logger.error(err.message);
29 | }
30 |
31 | // Connect to ngrok in dev mode
32 | if (ngrok) {
33 | ngrok.connect(port, (innerErr, url) => {
34 | if (innerErr) {
35 | return logger.error(innerErr);
36 | }
37 |
38 | logger.appStarted(port, url);
39 | });
40 | } else {
41 | logger.appStarted(port);
42 | }
43 | });
44 |
--------------------------------------------------------------------------------
/app/containers/App/selectors.js:
--------------------------------------------------------------------------------
1 | /**
2 | * The global state selectors
3 | */
4 |
5 | import { createSelector } from 'reselect';
6 |
7 | const selectGlobal = () => (state) => state.get('global');
8 |
9 | const selectCurrentUser = () => createSelector(
10 | selectGlobal(),
11 | (globalState) => globalState.get('currentUser')
12 | );
13 |
14 | const selectLoading = () => createSelector(
15 | selectGlobal(),
16 | (globalState) => globalState.get('loading')
17 | );
18 |
19 | const selectError = () => createSelector(
20 | selectGlobal(),
21 | (globalState) => globalState.get('error')
22 | );
23 |
24 | const selectRepos = () => createSelector(
25 | selectGlobal(),
26 | (globalState) => globalState.getIn(['userData', 'repositories'])
27 | );
28 |
29 | const selectLocationState = () => {
30 | let prevRoutingState;
31 | let prevRoutingStateJS;
32 |
33 | return (state) => {
34 | const routingState = state.get('route'); // or state.route
35 |
36 | if (!routingState.equals(prevRoutingState)) {
37 | prevRoutingState = routingState;
38 | prevRoutingStateJS = routingState.toJS();
39 | }
40 |
41 | return prevRoutingStateJS;
42 | };
43 | };
44 |
45 | export {
46 | selectGlobal,
47 | selectCurrentUser,
48 | selectLoading,
49 | selectError,
50 | selectRepos,
51 | selectLocationState,
52 | };
53 |
--------------------------------------------------------------------------------
/docs/general/deployment.md:
--------------------------------------------------------------------------------
1 | # Deployment
2 |
3 | ## Heroku
4 |
5 | ### Easy 5-Step Deployment Process
6 |
7 | *Step 1:* Create a Procfile with the following line: `web: npm run start:prod`. We are doing this because heroku runs `npm run start` by default, so we need this setting to override the default run command.
8 |
9 | *Step 2:* Install heroku's buildpack on your heroku app by running the following command: `heroku buildpacks:set https://github.com/heroku/heroku-buildpack-nodejs#v90 -a [your app name]`. Make sure to replace `#v90` with whatever the latest buildpack is which you can [find here](https://github.com/heroku/heroku-buildpack-nodejs/releases).
10 |
11 | *Step 3:* Add this line to your Package.json file in the scripts area: `"postinstall": "npm run build:clean",`. This is because Heroku runs this as part of their build process (more of which you can [read about here](https://devcenter.heroku.com/articles/nodejs-support#build-behavior)).
12 |
13 | *Step 4:* Run `heroku config:set NPM_CONFIG_PRODUCTION=false` so that Heroku can compile the NPM Modules included in your devDependencies (since many of these packages are required for the build process).
14 |
15 | *Step 5:* Follow the standard Heroku deploy process at this point:
16 |
17 | 1. `git add .`
18 | 2. `git commit -m 'Made some epic changes as per usual'`
19 | 3. `git push heroku master`
20 |
--------------------------------------------------------------------------------
/app/utils/request.js:
--------------------------------------------------------------------------------
1 | import 'whatwg-fetch';
2 |
3 | /**
4 | * Parses the JSON returned by a network request
5 | *
6 | * @param {object} response A response from a network request
7 | *
8 | * @return {object} The parsed JSON from the request
9 | */
10 | function parseJSON(response) {
11 | return response.json();
12 | }
13 |
14 | /**
15 | * Checks if a network request came back fine, and throws an error if not
16 | *
17 | * @param {object} response A response from a network request
18 | *
19 | * @return {object|undefined} Returns either the response, or throws an error
20 | */
21 | function checkStatus(response) {
22 | if (response.status >= 200 && response.status < 300) {
23 | return response;
24 | }
25 |
26 | const error = new Error(response.statusText);
27 | error.response = response;
28 | throw error;
29 | }
30 |
31 | /**
32 | * Requests a URL, returning a promise
33 | *
34 | * @param {string} url The URL we want to request
35 | * @param {object} [options] The options we want to pass to "fetch"
36 | *
37 | * @return {object} An object containing either "data" or "err"
38 | */
39 | export default function request(url, options) {
40 | return fetch(url, options)
41 | .then(checkStatus)
42 | .then(parseJSON)
43 | .then((data) => ({ data }))
44 | .catch((err) => ({ err }));
45 | }
46 |
--------------------------------------------------------------------------------
/app/containers/App/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * App.react.js
4 | *
5 | * This component is the skeleton around the actual pages, and should only
6 | * contain code that should be seen on all pages. (e.g. navigation bar)
7 | */
8 |
9 | import React from 'react';
10 | import Helmet from 'react-helmet';
11 |
12 | // Import the CSS reset, which HtmlWebpackPlugin transfers to the build folder
13 | import 'sanitize.css/sanitize.css';
14 |
15 | import Img from 'components/Img';
16 | import Footer from 'components/Footer';
17 | import Banner from './banner-metal.jpg';
18 | import A from 'components/A';
19 |
20 | import styles from './styles.css';
21 |
22 | function App(props) {
23 | return (
24 |
22 |
23 |
25 |
26 | );
27 | expect(renderedComponent.contains(
33 |
34 |
36 |
37 | );
38 | expect(renderedComponent.contains()).toEqual(true);
39 | });
40 | });
41 |
--------------------------------------------------------------------------------
/app/containers/App/reducer.js:
--------------------------------------------------------------------------------
1 | /*
2 | * AppReducer
3 | *
4 | * The reducer takes care of our data. Using actions, we can change our
5 | * application state.
6 | * To add a new action, add it to the switch statement in the reducer function
7 | *
8 | * Example:
9 | * case YOUR_ACTION_CONSTANT:
10 | * return state.set('yourStateVariable', true);
11 | */
12 |
13 | import {
14 | LOAD_REPOS_SUCCESS,
15 | LOAD_REPOS,
16 | LOAD_REPOS_ERROR,
17 | } from './constants';
18 | import { fromJS } from 'immutable';
19 |
20 | // The initial state of the App
21 | const initialState = fromJS({
22 | loading: false,
23 | error: false,
24 | currentUser: false,
25 | userData: fromJS({
26 | repositories: false,
27 | }),
28 | });
29 |
30 | function appReducer(state = initialState, action) {
31 | switch (action.type) {
32 | case LOAD_REPOS:
33 | return state
34 | .set('loading', true)
35 | .set('error', false)
36 | .setIn(['userData', 'repositories'], false);
37 | case LOAD_REPOS_SUCCESS:
38 | return state
39 | .setIn(['userData', 'repositories'], action.repos)
40 | .set('loading', false)
41 | .set('currentUser', action.username);
42 | case LOAD_REPOS_ERROR:
43 | return state
44 | .set('error', action.error)
45 | .set('loading', false);
46 | default:
47 | return state;
48 | }
49 | }
50 |
51 | export default appReducer;
52 |
--------------------------------------------------------------------------------
/app/containers/App/tests/actions.test.js:
--------------------------------------------------------------------------------
1 | import expect from 'expect';
2 |
3 | import {
4 | LOAD_REPOS,
5 | LOAD_REPOS_SUCCESS,
6 | LOAD_REPOS_ERROR,
7 | } from '../constants';
8 |
9 | import {
10 | loadRepos,
11 | reposLoaded,
12 | repoLoadingError,
13 | } from '../actions';
14 |
15 | describe('App Actions', () => {
16 | describe('loadRepos', () => {
17 | it('should return the correct type', () => {
18 | const expectedResult = {
19 | type: LOAD_REPOS,
20 | };
21 |
22 | expect(loadRepos()).toEqual(expectedResult);
23 | });
24 | });
25 |
26 | describe('reposLoaded', () => {
27 | it('should return the correct type and the passed repos', () => {
28 | const fixture = ['Test'];
29 | const username = 'test';
30 | const expectedResult = {
31 | type: LOAD_REPOS_SUCCESS,
32 | repos: fixture,
33 | username,
34 | };
35 |
36 | expect(reposLoaded(fixture, username)).toEqual(expectedResult);
37 | });
38 | });
39 |
40 | describe('repoLoadingError', () => {
41 | it('should return the correct type and the error', () => {
42 | const fixture = {
43 | msg: 'Something went wrong!',
44 | };
45 | const expectedResult = {
46 | type: LOAD_REPOS_ERROR,
47 | error: fixture,
48 | };
49 |
50 | expect(repoLoadingError(fixture)).toEqual(expectedResult);
51 | });
52 | });
53 | });
54 |
--------------------------------------------------------------------------------
/docs/js/README.md:
--------------------------------------------------------------------------------
1 | # JavaScript
2 |
3 | ## State management
4 |
5 | This boilerplate manages application state using [Redux](redux.md), makes it
6 | immutable with [`ImmutableJS`](immutablejs.md) and keeps access performant
7 | via [`reselect`](reselect.md).
8 |
9 | For managing asynchronous flows (e.g. logging in) we use [`redux-saga`](redux-saga.md).
10 |
11 | For routing, we use [`react-router` in combination with `react-router-redux`](routing.md).
12 |
13 | We include a generator for components, containers, sagas, routes and selectors.
14 | Run `npm run generate` to choose from the available generators, and automatically
15 | add new parts of your application!
16 |
17 | > Note: If you want to skip the generator selection process,
18 | `npm run generate ` also works. (e.g. `npm run generate route`)
19 |
20 | ### Learn more
21 |
22 | - [Redux](redux.md)
23 | - [ImmutableJS](immutablejs.md)
24 | - [reselect](reselect.md)
25 | - [redux-saga](redux-saga.md)
26 | - [react-intl](i18n.md)
27 | - [routing](routing.md)
28 |
29 | ## Architecture: `components` and `containers`
30 |
31 | We adopted a split between stateless, reusable components called (wait for it...)
32 | `components` and stateful parent components called `containers`.
33 |
34 | ### Learn more
35 |
36 | See [this article](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)
37 | by Dan Abramov for a great introduction to this approach.
38 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | ## React Boilerplate
2 |
3 | Thank you for contributing! Please take a moment to review our [**contributing guidelines**](https://github.com/mxstbr/react-boilerplate/blob/master/.github/CONTRIBUTING.md)
4 | to make the process easy and effective for everyone involved.
5 |
6 | **Please open an issue** before embarking on any significant pull request, especially those that
7 | add a new library or change existing tests, otherwise you risk spending a lot of time working
8 | on something that might not end up being merged into the project.
9 |
10 | Before opening a pull request, please ensure:
11 |
12 | - [ ] You have followed our [**contributing guidelines**](https://github.com/mxstbr/react-boilerplate/blob/master/.github/CONTRIBUTING.md)
13 | - [ ] Pull request has tests (we are going for 100% coverage!)
14 | - [ ] Code is well-commented, linted and follows project conventions
15 | - [ ] Documentation is updated (if necessary)
16 | - [ ] Internal code generators and templates are updated (if necessary)
17 | - [ ] Description explains the issue/use-case resolved and auto-closes related issues
18 |
19 | Be kind to code reviewers, please try to keep pull requests as small and focused as possible :)
20 |
21 | **IMPORTANT**: By submitting a patch, you agree to allow the project
22 | owners to license your work under the terms of the [MIT License](https://github.com/mxstbr/react-boilerplate/blob/master/LICENSE.md).
23 |
--------------------------------------------------------------------------------
/internals/templates/reducers.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Combine all reducers in this file and export the combined reducers.
3 | * If we were to do this in store.js, reducers wouldn't be hot reloadable.
4 | */
5 |
6 | import { combineReducers } from 'redux-immutable';
7 | import { fromJS } from 'immutable';
8 | import { LOCATION_CHANGE } from 'react-router-redux';
9 | import languageProviderReducer from 'containers/LanguageProvider/reducer';
10 |
11 | /*
12 | * routeReducer
13 | *
14 | * The reducer merges route location changes into our immutable state.
15 | * The change is necessitated by moving to react-router-redux@4
16 | *
17 | */
18 |
19 | // Initial routing state
20 | const routeInitialState = fromJS({
21 | locationBeforeTransitions: null,
22 | });
23 |
24 | /**
25 | * Merge route into the global application state
26 | */
27 | function routeReducer(state = routeInitialState, action) {
28 | switch (action.type) {
29 | /* istanbul ignore next */
30 | case LOCATION_CHANGE:
31 | return state.merge({
32 | locationBeforeTransitions: action.payload,
33 | });
34 | default:
35 | return state;
36 | }
37 | }
38 |
39 | /**
40 | * Creates the main reducer with the asynchronously loaded ones
41 | */
42 | export default function createReducer(asyncReducers) {
43 | return combineReducers({
44 | route: routeReducer,
45 | language: languageProviderReducer,
46 | ...asyncReducers,
47 | });
48 | }
49 |
--------------------------------------------------------------------------------
/app/reducers.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Combine all reducers in this file and export the combined reducers.
3 | * If we were to do this in store.js, reducers wouldn't be hot reloadable.
4 | */
5 |
6 | import { fromJS } from 'immutable';
7 | import { combineReducers } from 'redux-immutable';
8 | import { LOCATION_CHANGE } from 'react-router-redux';
9 |
10 | import globalReducer from 'containers/App/reducer';
11 | import languageProviderReducer from 'containers/LanguageProvider/reducer';
12 |
13 | /*
14 | * routeReducer
15 | *
16 | * The reducer merges route location changes into our immutable state.
17 | * The change is necessitated by moving to react-router-redux@4
18 | *
19 | */
20 |
21 | // Initial routing state
22 | const routeInitialState = fromJS({
23 | locationBeforeTransitions: null,
24 | });
25 |
26 | /**
27 | * Merge route into the global application state
28 | */
29 | function routeReducer(state = routeInitialState, action) {
30 | switch (action.type) {
31 | /* istanbul ignore next */
32 | case LOCATION_CHANGE:
33 | return state.merge({
34 | locationBeforeTransitions: action.payload,
35 | });
36 | default:
37 | return state;
38 | }
39 | }
40 |
41 | /**
42 | * Creates the main reducer with the asynchronously loaded ones
43 | */
44 | export default function createReducer(asyncReducers) {
45 | return combineReducers({
46 | route: routeReducer,
47 | global: globalReducer,
48 | language: languageProviderReducer,
49 | ...asyncReducers,
50 | });
51 | }
52 |
--------------------------------------------------------------------------------
/internals/templates/routes.js:
--------------------------------------------------------------------------------
1 | // These are the pages you can go to.
2 | // They are all wrapped in the App component, which should contain the navbar etc
3 | // See http://blog.mxstbr.com/2016/01/react-apps-with-pages for more information
4 | // about the code splitting business
5 | import { getAsyncInjectors } from 'utils/asyncInjectors';
6 |
7 | const errorLoading = (err) => {
8 | console.error('Dynamic page loading failed', err); // eslint-disable-line no-console
9 | };
10 |
11 | const loadModule = (cb) => (componentModule) => {
12 | cb(null, componentModule.default);
13 | };
14 |
15 | export default function createRoutes(store) {
16 | // Create reusable async injectors using getAsyncInjectors factory
17 | const { injectReducer, injectSagas } = getAsyncInjectors(store); // eslint-disable-line no-unused-vars
18 |
19 | return [
20 | {
21 | path: '/',
22 | name: 'home',
23 | getComponent(nextState, cb) {
24 | const importModules = Promise.all([
25 | System.import('containers/HomePage'),
26 | ]);
27 |
28 | const renderRoute = loadModule(cb);
29 |
30 | importModules.then(([component]) => {
31 | renderRoute(component);
32 | });
33 |
34 | importModules.catch(errorLoading);
35 | },
36 | }, {
37 | path: '*',
38 | name: 'notfound',
39 | getComponent(nextState, cb) {
40 | System.import('containers/NotFoundPage')
41 | .then(loadModule(cb))
42 | .catch(errorLoading);
43 | },
44 | },
45 | ];
46 | }
47 |
--------------------------------------------------------------------------------
/app/.nginx.conf:
--------------------------------------------------------------------------------
1 | ##
2 | # Put this file in /etc/nginx/conf.d folder and make sure
3 | # you have line 'include /etc/nginx/conf.d/*.conf;'
4 | # in your main nginx configuration file
5 | ##
6 |
7 | ##
8 | # Redirect to the same URL with https://
9 | ##
10 |
11 | server {
12 |
13 | listen 80;
14 |
15 | # Type your domain name below
16 | server_name example.com;
17 |
18 | return 301 https://$server_name$request_uri;
19 |
20 | }
21 |
22 | ##
23 | # HTTPS configurations
24 | ##
25 |
26 | server {
27 |
28 | listen 443;
29 |
30 | # Type your domain name below
31 | server_name example.com;
32 |
33 | ssl on;
34 | ssl_certificate /path/to/certificate.crt;
35 | ssl_certificate_key /path/to/server.key;
36 |
37 | # Use only TSL protocols for more secure
38 | ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
39 |
40 | # Always serve index.html for any request
41 | location / {
42 | # Set path
43 | root /var/www/;
44 | try_files $uri /index.html;
45 | }
46 |
47 | ##
48 | # If you want to use Node/Rails/etc. API server
49 | # on the same port (443) config Nginx as a reverse proxy.
50 | # For security reasons use a firewall like ufw in Ubuntu
51 | # and deny port 3000/tcp.
52 | ##
53 |
54 | # location /api/ {
55 | #
56 | # proxy_pass http://localhost:3000;
57 | # proxy_http_version 1.1;
58 | # proxy_set_header X-Forwarded-Proto https;
59 | # proxy_set_header Upgrade $http_upgrade;
60 | # proxy_set_header Connection 'upgrade';
61 | # proxy_set_header Host $host;
62 | # proxy_cache_bypass $http_upgrade;
63 | #
64 | # }
65 |
66 | }
67 |
--------------------------------------------------------------------------------
/app/components/Button/tests/index.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Testing our Button component
3 | */
4 |
5 | import Button from '../index';
6 |
7 | import expect from 'expect';
8 | import { shallow } from 'enzyme';
9 | import React from 'react';
10 |
11 | describe('', () => {
12 | it('should render its children', () => {
13 | const children = (
15 | This boilerplate uses [Travis CI](https://travis-ci.com) for Linux environments 16 | and [AppVeyor](https://www.appveyor.com/) for Windows platforms, but feel free 17 | to swap either out for your own choice of CI. 18 | 19 | * `package.json`: Our `npm` configuration file has three functions: 20 | 21 | 1. It's where Babel, ESLint and stylelint are configured 22 | 1. It's the API for the project: a consistent interface for all its controls 23 | 1. It lists the project's package dependencies 24 | 25 | Baking the config in is a slightly unusual set-up, but it allows us to keep 26 | the project root as uncluttered and grokkable-at-a-glance as possible. 27 | 28 | ## The `./internals` folder 29 | 30 | This is where the bulk of the tooling configuration lives, broken out into 31 | recognisable units of work. 32 | 33 | Feel free to change anything you like but don't be afraid to [ask upfront](https://gitter.im/mxstbr/react-boilerplate) 34 | whether you should: build systems are easy to break! 35 | -------------------------------------------------------------------------------- /app/containers/NotFoundPage/tests/index.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Testing the NotFoundPage 3 | */ 4 | 5 | import expect from 'expect'; 6 | import { shallow, mount } from 'enzyme'; 7 | import React from 'react'; 8 | 9 | import { IntlProvider, FormattedMessage } from 'react-intl'; 10 | import { NotFound } from '../index'; 11 | import H1 from 'components/H1'; 12 | import Button from 'components/Button'; 13 | 14 | describe('
21 |
)).toEqual(true);
26 | });
27 |
28 | it('should render a button', () => {
29 | const renderedComponent = shallow(
30 |
46 |
48 | );
49 | const button = renderedComponent.find('button');
50 | button.simulate('click');
51 | expect(changeRouteSpy).toHaveBeenCalled();
52 | });
53 | });
54 |
--------------------------------------------------------------------------------
/app/containers/HomePage/sagas.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Gets the repositories of the user from Github
3 | */
4 |
5 | import { take, call, put, select, fork, cancel } from 'redux-saga/effects';
6 | import { LOCATION_CHANGE } from 'react-router-redux';
7 | import { LOAD_REPOS } from 'containers/App/constants';
8 | import { reposLoaded, repoLoadingError } from 'containers/App/actions';
9 |
10 | import request from 'utils/request';
11 | import { selectUsername } from 'containers/HomePage/selectors';
12 |
13 | /**
14 | * Github repos request/response handler
15 | */
16 | export function* getRepos() {
17 | // Select username from store
18 | const username = yield select(selectUsername());
19 | const requestURL = `https://api.github.com/users/${username}/repos?type=all&sort=updated`;
20 |
21 | // Call our request helper (see 'utils/request')
22 | const repos = yield call(request, requestURL);
23 |
24 | if (!repos.err) {
25 | yield put(reposLoaded(repos.data, username));
26 | } else {
27 | yield put(repoLoadingError(repos.err));
28 | }
29 | }
30 |
31 | /**
32 | * Watches for LOAD_REPOS action and calls handler
33 | */
34 | export function* getReposWatcher() {
35 | while (yield take(LOAD_REPOS)) {
36 | yield call(getRepos);
37 | }
38 | }
39 |
40 | /**
41 | * Root saga manages watcher lifecycle
42 | */
43 | export function* githubData() {
44 | // Fork watcher so we can continue execution
45 | const watcher = yield fork(getReposWatcher);
46 |
47 | // Suspend execution until location changes
48 | yield take(LOCATION_CHANGE);
49 | yield cancel(watcher);
50 | }
51 |
52 | // Bootstrap sagas
53 | export default [
54 | githubData,
55 | ];
56 |
--------------------------------------------------------------------------------
/internals/templates/store.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Create the store with asynchronously loaded reducers
3 | */
4 |
5 | import { createStore, applyMiddleware, compose } from 'redux';
6 | import { fromJS } from 'immutable';
7 | import { routerMiddleware } from 'react-router-redux';
8 | import createSagaMiddleware from 'redux-saga';
9 | import createReducer from './reducers';
10 |
11 | const sagaMiddleware = createSagaMiddleware();
12 | const devtools = window.devToolsExtension || (() => noop => noop);
13 |
14 | export default function configureStore(initialState = {}, history) {
15 | // Create the store with two middlewares
16 | // 1. sagaMiddleware: Makes redux-sagas work
17 | // 2. routerMiddleware: Syncs the location/URL path to the state
18 | const middlewares = [
19 | sagaMiddleware,
20 | routerMiddleware(history),
21 | ];
22 |
23 | const enhancers = [
24 | applyMiddleware(...middlewares),
25 | devtools(),
26 | ];
27 |
28 | const store = createStore(
29 | createReducer(),
30 | fromJS(initialState),
31 | compose(...enhancers)
32 | );
33 |
34 | // Create hook for async sagas
35 | store.runSaga = sagaMiddleware.run;
36 | store.asyncSagas = {};
37 |
38 | // Make reducers hot reloadable, see http://mxs.is/googmo
39 | /* istanbul ignore next */
40 | if (module.hot) {
41 | System.import('./reducers').then((reducerModule) => {
42 | const createReducers = reducerModule.default;
43 | const nextReducers = createReducers(store.asyncReducers);
44 |
45 | store.replaceReducer(nextReducers);
46 | });
47 | }
48 |
49 | // Initialize it with no other reducers
50 | store.asyncReducers = {};
51 | return store;
52 | }
53 |
--------------------------------------------------------------------------------
/app/store.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Create the store with asynchronously loaded reducers
3 | */
4 |
5 | import { createStore, applyMiddleware, compose } from 'redux';
6 | import { fromJS } from 'immutable';
7 | import { routerMiddleware } from 'react-router-redux';
8 | import createSagaMiddleware from 'redux-saga';
9 | import createReducer from './reducers';
10 |
11 | const sagaMiddleware = createSagaMiddleware();
12 | const devtools = window.devToolsExtension || (() => noop => noop);
13 |
14 | export default function configureStore(initialState = {}, history) {
15 | // Create the store with two middlewares
16 | // 1. sagaMiddleware: Makes redux-sagas work
17 | // 2. routerMiddleware: Syncs the location/URL path to the state
18 | const middlewares = [
19 | sagaMiddleware,
20 | routerMiddleware(history),
21 | ];
22 |
23 | const enhancers = [
24 | applyMiddleware(...middlewares),
25 | devtools(),
26 | ];
27 |
28 | const store = createStore(
29 | createReducer(),
30 | fromJS(initialState),
31 | compose(...enhancers)
32 | );
33 |
34 | // Extensions
35 | store.runSaga = sagaMiddleware.run;
36 | store.asyncReducers = {}; // Async reducer registry
37 | store.asyncSagas = {};
38 |
39 | // Make reducers hot reloadable, see http://mxs.is/googmo
40 | /* istanbul ignore next */
41 | if (module.hot) {
42 | module.hot.accept('./reducers', () => {
43 | System.import('./reducers').then((reducerModule) => {
44 | const createReducers = reducerModule.default;
45 | const nextReducers = createReducers(store.asyncReducers);
46 |
47 | store.replaceReducer(nextReducers);
48 | });
49 | });
50 | }
51 |
52 | return store;
53 | }
54 |
--------------------------------------------------------------------------------
/app/.htaccess:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | #######################################################################
5 | # GENERAL #
6 | #######################################################################
7 |
8 | # Make apache follow sym links to files
9 | Options +FollowSymLinks
10 | # If somebody opens a folder, hide all files from the resulting folder list
11 | IndexIgnore */*
12 |
13 |
14 | #######################################################################
15 | # REWRITING #
16 | #######################################################################
17 |
18 | # Enable rewriting
19 | RewriteEngine On
20 |
21 | # If its not HTTPS
22 | RewriteCond %{HTTPS} off
23 |
24 | # Comment out the RewriteCond above, and uncomment the RewriteCond below if you're using a load balancer (e.g. CloudFlare) for SSL
25 | # RewriteCond %{HTTP:X-Forwarded-Proto} !https
26 |
27 | # Redirect to the same URL with https://, ignoring all further rules if this one is in effect
28 | RewriteRule ^(.*) https://%{HTTP_HOST}/$1 [R,L]
29 |
30 | # If we get to here, it means we are on https://
31 |
32 | # If the file with the specified name in the browser doesn't exist
33 | RewriteCond %{REQUEST_FILENAME} !-f
34 |
35 | # and the directory with the specified name in the browser doesn't exist
36 | RewriteCond %{REQUEST_FILENAME} !-d
37 |
38 | # and we are not opening the root already (otherwise we get a redirect loop)
39 | RewriteCond %{REQUEST_FILENAME} !\/$
40 |
41 | # Rewrite all requests to the root
42 | RewriteRule ^(.*) /
43 |
44 |
45 |
--------------------------------------------------------------------------------
/docs/general/remove.md:
--------------------------------------------------------------------------------
1 | ### Removing offline access
2 |
3 | **Careful** about removing this, as there is no real downside to having your
4 | application available when the users network connection isn't perfect.
5 |
6 | To remove offline capability, delete the `offline-plugin` from the
7 | [`package.json`](../../package.json), remove the import of the plugin in
8 | [`app.js`](../../app/app.js) and remove the plugin from the
9 | [`webpack.prod.babel.js`](../../internals/webpack/webpack.prod.babel.js).
10 |
11 | ### Removing add to homescreen functionality
12 |
13 | Delete [`manifest.json`](../../app/manifest.json) and remove the
14 | `` tag from the
15 | [`index.html`](../../app/index.html).
16 |
17 | ### Removing performant web font loading
18 |
19 | **Careful** about removing this, as perceived performance might be highly impacted.
20 |
21 | To remove `FontFaceObserver`, don't import it in [`app.js`](../../app/app.js) and
22 | remove it from the [`package.json`](../../package.json).
23 |
24 | ### Removing image optimization
25 |
26 | To remove image optimization, delete the `image-webpack-loader` from the
27 | [`package.json`](../../package.json), and remove the `image-loader` from [`webpack.base.babel.js`](../../internals/webpack/webpack.base.babel.js):
28 | ```
29 | …
30 | {
31 | test: /\.(jpg|png|gif)$/,
32 | loaders: [
33 | 'file-loader',
34 | 'image-webpack?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}',
35 | ],
36 | }
37 | …
38 | ```
39 |
40 | Then replace it with classic `file-loader`:
41 |
42 | ```
43 | …
44 | {
45 | test: /\.(jpg|png|gif)$/,
46 | loader: 'file-loader',
47 | }
48 | …
49 | ```
50 |
--------------------------------------------------------------------------------
/internals/generators/container/index.js.hbs:
--------------------------------------------------------------------------------
1 | /*
2 | *
3 | * {{properCase name }}
4 | *
5 | */
6 |
7 | import React from 'react';
8 | import { connect } from 'react-redux';
9 | {{#if wantHeaders}}
10 | import Helmet from 'react-helmet';
11 | {{/if}}
12 | {{#if wantActionsAndReducer}}
13 | import select{{properCase name}} from './selectors';
14 | {{/if}}
15 | {{#if wantMessages}}
16 | import { FormattedMessage } from 'react-intl';
17 | import messages from './messages';
18 | {{/if}}
19 | {{#if wantCSS}}
20 | import styles from './styles.css';
21 | {{/if}}
22 |
23 | export class {{ properCase name }} extends React.Component { // eslint-disable-line react/prefer-stateless-function
24 | render() {
25 | return (
26 | {{#if wantCSS}}
27 |
24 | {{/if}}
25 | {{#if wantMessages}}
26 |
29 | );
30 | }
31 | }
32 |
33 | export default {{ properCase name }};
34 |
--------------------------------------------------------------------------------
/internals/templates/notFoundPage/notFoundPage.js:
--------------------------------------------------------------------------------
1 | /**
2 | * NotFoundPage
3 | *
4 | * This is the page we show when the user visits a url that doesn't have a route
5 | *
6 | * NOTE: while this component should technically be a stateless functional
7 | * component (SFC), hot reloading does not currently support SFCs. If hot
8 | * reloading is not a neccessity for you then you can refactor it and remove
9 | * the linting exception.
10 | */
11 |
12 | import React from 'react';
13 | import { FormattedMessage } from 'react-intl';
14 | import messages from './messages';
15 |
16 | export default class NotFound extends React.Component { // eslint-disable-line react/prefer-stateless-function
17 |
18 | render() {
19 | return (
20 |
21 |
23 | );
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/app/components/List/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import styles from './styles.css';
4 |
5 | function List(props) {
6 | const ComponentToRender = props.component;
7 | let content = ();
8 |
9 | // If we have items, render them
10 | if (props.items) {
11 | content = props.items.map((item, index) => (
12 |
21 |
25 | );
26 | }
27 |
28 | List.propTypes = {
29 | component: React.PropTypes.func.isRequired,
30 | items: React.PropTypes.array,
31 | };
32 |
33 | export default List;
34 |
--------------------------------------------------------------------------------
/docs/general/gotchas.md:
--------------------------------------------------------------------------------
1 | # Gotchas
2 |
3 | These are some things to be aware of when using this boilerplate.
4 |
5 | ## Special images in HTML files
6 |
7 | If you specify your images in the `.html` files using the `-
22 | {content}
23 |
Test
); 18 | const renderedComponent = shallow( 19 |
27 | {React.Children.toArray(this.props.children)}
28 |
29 | );
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/internals/generators/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * generator/index.js
3 | *
4 | * Exports the generators so plop knows them
5 | */
6 |
7 | const fs = require('fs');
8 | const componentGenerator = require('./component/index.js');
9 | const containerGenerator = require('./container/index.js');
10 | const routeGenerator = require('./route/index.js');
11 | const languageGenerator = require('./language/index.js');
12 |
13 | module.exports = (plop) => {
14 | plop.setGenerator('component', componentGenerator);
15 | plop.setGenerator('container', containerGenerator);
16 | plop.setGenerator('route', routeGenerator);
17 | plop.setGenerator('language', languageGenerator);
18 | plop.addHelper('directory', (comp) => {
19 | try {
20 | fs.accessSync(`app/containers/${comp}`, fs.F_OK);
21 | return `containers/${comp}`;
22 | } catch (e) {
23 | return `components/${comp}`;
24 | }
25 | });
26 | plop.addHelper('curly', (object, open) => (open ? '{' : '}'));
27 | };
28 |
--------------------------------------------------------------------------------
/docs/js/remove.md:
--------------------------------------------------------------------------------
1 | ## Removing `redux-saga`
2 |
3 | **We don't recommend removing `redux-saga`**, as we strongly feel that it's the
4 | way to go for most redux based applications.
5 |
6 | If you really want to get rid of it, delete the `sagas/` folder, remove the
7 | `import` and the `sagaMiddleware` from the `store.js` and finally remove it from
8 | the `package.json`. Then you should be good to go with whatever side-effect
9 | management library you want to use!
10 |
11 | ## Removing `reselect`
12 |
13 | To remove `reselect`, delete the `app/selectors` folder, remove it from your
14 | dependencies in `package.json` and then write your `mapStateToProps` functions
15 | like you normally would!
16 |
17 | You'll also need to hook up the history directly to the store. Change the const
18 | `history` in `app/app.js` to the following:
19 |
20 | ```js
21 | const history = syncHistoryWithStore(browserHistory, store, {
22 | selectLocationState: (state) => state.get('route').toJS(),
23 | });
24 | ```
25 |
--------------------------------------------------------------------------------
/app/components/LoadingIndicator/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import styles from './styles.css';
4 |
5 | function LoadingIndicator() {
6 | return (
7 |
8 |
23 | );
24 | }
25 |
26 | export default LoadingIndicator;
27 |
--------------------------------------------------------------------------------
/app/i18n.js:
--------------------------------------------------------------------------------
1 | /**
2 | * i18n.js
3 | *
4 | * This will setup the i18n language files and locale data for your app.
5 | *
6 | */
7 | import { addLocaleData } from 'react-intl';
8 |
9 | import enLocaleData from 'react-intl/locale-data/en';
10 | import deLocaleData from 'react-intl/locale-data/de';
11 |
12 | addLocaleData(enLocaleData);
13 | addLocaleData(deLocaleData);
14 |
15 | export const appLocales = [
16 | 'en',
17 | 'de',
18 | ];
19 |
20 | import enTranslationMessages from './translations/en.json';
21 | import deTranslationMessages from './translations/de.json';
22 |
23 | export const formatTranslationMessages = (messages) => {
24 | const formattedMessages = {};
25 | for (const message of messages) {
26 | formattedMessages[message.id] = message.message || message.defaultMessage;
27 | }
28 |
29 | return formattedMessages;
30 | };
31 |
32 | export const translationMessages = {
33 | en: formatTranslationMessages(enTranslationMessages),
34 | de: formatTranslationMessages(deTranslationMessages),
35 | };
36 |
--------------------------------------------------------------------------------
/app/containers/HomePage/actions.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Home Actions
3 | *
4 | * Actions change things in your application
5 | * Since this boilerplate uses a uni-directional data flow, specifically redux,
6 | * we have these actions which are the only way your application interacts with
7 | * your appliction state. This guarantees that your state is up to date and nobody
8 | * messes it up weirdly somewhere.
9 | *
10 | * To add a new Action:
11 | * 1) Import your constant
12 | * 2) Add a function like this:
13 | * export function yourAction(var) {
14 | * return { type: YOUR_ACTION_CONSTANT, var: var }
15 | * }
16 | */
17 |
18 | import {
19 | CHANGE_USERNAME,
20 | } from './constants';
21 |
22 | /**
23 | * Changes the input field of the form
24 | *
25 | * @param {name} name The new text of the input field
26 | *
27 | * @return {object} An action object with a type of CHANGE_USERNAME
28 | */
29 | export function changeUsername(name) {
30 | return {
31 | type: CHANGE_USERNAME,
32 | name,
33 | };
34 | }
35 |
--------------------------------------------------------------------------------
/app/components/Toggle/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import Toggle from '../index';
2 |
3 | import expect from 'expect';
4 | import { shallow } from 'enzyme';
5 | import { IntlProvider, defineMessages } from 'react-intl';
6 | import React from 'react';
7 |
8 | describe('
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | Test
); 14 | const renderedComponent = shallow( 15 | 16 | {children} 17 | 18 | ); 19 | expect(renderedComponent.contains(children)).toEqual(true); 20 | }); 21 | 22 | it('should adopt the className', () => { 23 | const renderedComponent = shallow(); 24 | expect(renderedComponent.find('a').hasClass('test')).toEqual(true); 25 | }); 26 | 27 | it('should adopt the href', () => { 28 | const renderedComponent = shallow(); 29 | expect(renderedComponent.prop('href')).toEqual('mxstbr.com'); 30 | }); 31 | 32 | it('should adopt the target', () => { 33 | const renderedComponent = shallow(); 34 | expect(renderedComponent.prop('target')).toEqual('_blank'); 35 | }); 36 | }); 37 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Maximilian Stoiber 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /app/containers/HomePage/messages.js: -------------------------------------------------------------------------------- 1 | /* 2 | * HomePage Messages 3 | * 4 | * This contains all the text for the HomePage component. 5 | */ 6 | import { defineMessages } from 'react-intl'; 7 | 8 | export default defineMessages({ 9 | startProjectHeader: { 10 | id: 'boilerplate.containers.HomePage.start_project.header', 11 | defaultMessage: 'Start your next react project in seconds', 12 | }, 13 | startProjectMessage: { 14 | id: 'boilerplate.containers.HomePage.start_project.message', 15 | defaultMessage: 'A highly scalable, offline-first foundation with the best DX and a focus on performance and best practices', 16 | }, 17 | trymeHeader: { 18 | id: 'boilerplate.containers.HomePage.tryme.header', 19 | defaultMessage: 'Try me!', 20 | }, 21 | trymeMessage: { 22 | id: 'boilerplate.containers.HomePage.tryme.message', 23 | defaultMessage: 'Show Github repositories by', 24 | }, 25 | trymeAtPrefix: { 26 | id: 'boilerplate.containers.HomePage.tryme.atPrefix', 27 | defaultMessage: '@', 28 | }, 29 | featuresButton: { 30 | id: 'boilerplate.containers.HomePage.features.Button', 31 | defaultMessage: 'Features', 32 | }, 33 | }); 34 | -------------------------------------------------------------------------------- /app/containers/LanguageProvider/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * 3 | * LanguageProvider 4 | * 5 | * this component connects the redux state language locale to the 6 | * IntlProvider component and i18n messages (loaded from `app/translations`) 7 | */ 8 | 9 | import React from 'react'; 10 | import { connect } from 'react-redux'; 11 | import { createSelector } from 'reselect'; 12 | import { IntlProvider } from 'react-intl'; 13 | import { selectLocale } from './selectors'; 14 | 15 | export class LanguageProvider extends React.Component { // eslint-disable-line react/prefer-stateless-function 16 | render() { 17 | return ( 18 |
18 |
29 |
20 |
22 | 29 |
21 |
23 | );
24 | }
25 | }
26 |
27 | LocaleToggle.propTypes = {
28 | onLocaleToggle: React.PropTypes.func,
29 | };
30 |
31 | const mapStateToProps = createSelector(
32 | selectLocale(),
33 | (locale) => ({ locale })
34 | );
35 |
36 | function mapDispatchToProps(dispatch) {
37 | return {
38 | onLocaleToggle: (evt) => dispatch(changeLocale(evt.target.value)),
39 | dispatch,
40 | };
41 | }
42 |
43 | export default connect(mapStateToProps, mapDispatchToProps)(LocaleToggle);
44 |
--------------------------------------------------------------------------------
/app/containers/FeaturePage/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import expect from 'expect';
2 | import { shallow, mount } from 'enzyme';
3 | import React from 'react';
4 |
5 | import { IntlProvider, FormattedMessage } from 'react-intl';
6 | import messages from '../messages';
7 | import { FeaturePage } from '../index';
8 | import H1 from 'components/H1';
9 |
10 | describe('
17 |
19 | )).toEqual(true);
20 | });
21 |
22 | it('should link to "/"', () => {
23 | const openRouteSpy = expect.createSpy();
24 |
25 | // Spy on the openRoute method of the FeaturePage
26 | const openRoute = (dest) => {
27 | if (dest === '/') {
28 | openRouteSpy();
29 | }
30 | };
31 |
32 | const renderedComponent = mount(
33 |
34 | {button}
35 |
36 | );
37 | }
38 |
39 | Button.propTypes = {
40 | className: PropTypes.string,
41 | handleRoute: PropTypes.func,
42 | href: PropTypes.string,
43 | onClick: PropTypes.func,
44 | children: PropTypes.node.isRequired,
45 | };
46 |
47 | export default Button;
48 |
--------------------------------------------------------------------------------
/internals/templates/languageProvider/languageProvider.js:
--------------------------------------------------------------------------------
1 | /*
2 | *
3 | * LanguageProvider
4 | *
5 | * this component connects the redux state language locale to the
6 | * IntlProvider component and i18n messages (loaded from `app/translations`)
7 | */
8 |
9 | import React from 'react';
10 | import { connect } from 'react-redux';
11 | import { createSelector } from 'reselect';
12 | import { IntlProvider } from 'react-intl';
13 | import { selectLocale } from './selectors';
14 |
15 | export class LanguageProvider extends React.Component { // eslint-disable-line react/prefer-stateless-function
16 | render() {
17 | return (
18 |
25 | 
34 |
35 | {React.Children.toArray(props.children)}
36 |
37 |
38 | );
39 | }
40 |
41 | App.propTypes = {
42 | children: React.PropTypes.node,
43 | };
44 |
45 | export default App;
46 |
--------------------------------------------------------------------------------
/docs/css/sass.md:
--------------------------------------------------------------------------------
1 | # Can I use Sass with this boilerplate?
2 |
3 | Yes, although we advise against it and **do not support this**. We selected
4 | PostCSS over Sass because its approach is more powerful: instead of trying to
5 | give a styling language programmatic abilities, it pulls logic and configuration
6 | out into JS where we believe those features belong.
7 |
8 | As an alternative, consider installing a PostCSS plugin called [`PreCSS`](https://github.com/jonathantneal/precss):
9 | it lets you use familiar syntax - $variables, nesting, mixins, etc. - but retain
10 | the advantages (speed, memory efficiency, extensibility, etc) of PostCSS.
11 |
12 | If you _really_ still want (or need) to use Sass then...
13 |
14 | 1. Change `internals/webpack/webpack.base.babel.js` so that line 22 reads
15 | ```JavaScript
16 | test: /\.s?css$/,
17 | ```
18 |
19 | This means that both `.scss` and `.css` will be picked up by the compiler
20 |
21 | 1. Update each of
22 |
23 | - `internals/webpack/webpack.dev.babel.js`
24 | - `internals/webpack/webpack.prod.babel.js`
25 |
26 | changing the config option for `cssLoaders` to
27 |
28 | ```JavaScript
29 | cssLoaders: 'style-loader!css-loader?modules&importLoaders=1&sourceMap!postcss-loader!sass-loader',
30 | ```
31 |
32 | Then run `npm i -D sass-loader node-sass`
33 |
34 | ...and you should be good to go!
35 |
--------------------------------------------------------------------------------
/app/containers/LocaleToggle/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import LocaleToggle from '../index';
2 | import LanguageProvider from '../../LanguageProvider';
3 |
4 | import expect from 'expect';
5 | import { shallow, mount } from 'enzyme';
6 | import configureStore from '../../../store';
7 | import React from 'react';
8 | import { Provider } from 'react-redux';
9 | import { browserHistory } from 'react-router';
10 | import { translationMessages } from '../../../i18n';
11 |
12 | describe('Test
); 14 | const renderedComponent = shallow( 15 | 18 | ); 19 | expect(renderedComponent.contains(children)).toEqual(true); 20 | }); 21 | 22 | it('should adopt the className', () => { 23 | const renderedComponent = shallow(); 24 | expect(renderedComponent.find('a').hasClass('test')).toEqual(true); 25 | }); 26 | 27 | it('should render an tag if no route is specified', () => { 28 | const renderedComponent = shallow(); 29 | expect(renderedComponent.find('a').length).toEqual(1); 30 | }); 31 | 32 | it('should render a button to change route if the handleRoute prop is specified', () => { 33 | const renderedComponent = shallow(); 34 | 35 | expect(renderedComponent.find('button').length).toEqual(1); 36 | }); 37 | 38 | it('should handle click events', () => { 39 | const onClickSpy = expect.createSpy(); 40 | const renderedComponent = shallow(); 41 | renderedComponent.find('a').simulate('click'); 42 | expect(onClickSpy).toHaveBeenCalled(); 43 | }); 44 | }); 45 | -------------------------------------------------------------------------------- /internals/scripts/dependencies.js: -------------------------------------------------------------------------------- 1 | /*eslint-disable*/ 2 | 3 | // No need to build the DLL in production 4 | if (process.env.NODE_ENV === 'production') { 5 | process.exit(0) 6 | } 7 | 8 | require('shelljs/global') 9 | 10 | const path = require('path') 11 | const fs = require('fs') 12 | const exists = fs.existsSync 13 | const writeFile = fs.writeFileSync 14 | 15 | const defaults = require('lodash/defaultsDeep') 16 | const pkg = require(path.join(process.cwd(), 'package.json')) 17 | const config = require('../config') 18 | const dllConfig = defaults(pkg.dllPlugin, config.dllPlugin.defaults) 19 | const outputPath = path.join(process.cwd(), dllConfig.path) 20 | const dllManifestPath = path.join(outputPath, 'package.json') 21 | 22 | /** 23 | * I use node_modules/react-boilerplate-dlls by default just because 24 | * it isn't going to be version controlled and babel wont try to parse it. 25 | */ 26 | mkdir('-p', outputPath) 27 | 28 | echo('Building the Webpack DLL...') 29 | 30 | /** 31 | * Create a manifest so npm install doesnt warn us 32 | */ 33 | if (!exists(dllManifestPath)) { 34 | writeFile( 35 | dllManifestPath, 36 | JSON.stringify(defaults({ 37 | name: 'react-boilerplate-dlls', 38 | private: true, 39 | author: pkg.author, 40 | repository: pkg.repository, 41 | version: pkg.version 42 | }), null, 2), 43 | 44 | 'utf8' 45 | ) 46 | } 47 | 48 | // the BUILDING_DLL env var is set to avoid confusing the development environment 49 | exec('cross-env BUILDING_DLL=true webpack --display-chunks --color --config internals/webpack/webpack.dll.babel.js') 50 | -------------------------------------------------------------------------------- /internals/testing/karma.conf.js: -------------------------------------------------------------------------------- 1 | const webpackConfig = require('../webpack/webpack.test.babel'); 2 | const argv = require('minimist')(process.argv.slice(2)); 3 | const path = require('path'); 4 | 5 | module.exports = (config) => { 6 | config.set({ 7 | frameworks: ['mocha'], 8 | reporters: ['coverage', 'mocha'], 9 | browsers: process.env.TRAVIS // eslint-disable-line no-nested-ternary 10 | ? ['ChromeTravis'] 11 | : process.env.APPVEYOR 12 | ? ['IE'] : ['Chrome'], 13 | 14 | autoWatch: false, 15 | singleRun: true, 16 | 17 | client: { 18 | mocha: { 19 | grep: argv.grep, 20 | }, 21 | }, 22 | 23 | files: [ 24 | { 25 | pattern: './test-bundler.js', 26 | watched: false, 27 | served: true, 28 | included: true, 29 | }, 30 | ], 31 | 32 | preprocessors: { 33 | ['./test-bundler.js']: ['webpack', 'sourcemap'], // eslint-disable-line no-useless-computed-key 34 | }, 35 | 36 | webpack: webpackConfig, 37 | 38 | // make Webpack bundle generation quiet 39 | webpackMiddleware: { 40 | noInfo: true, 41 | stats: 'errors-only', 42 | }, 43 | 44 | customLaunchers: { 45 | ChromeTravis: { 46 | base: 'Chrome', 47 | flags: ['--no-sandbox'], 48 | }, 49 | }, 50 | 51 | coverageReporter: { 52 | dir: path.join(process.cwd(), 'coverage'), 53 | reporters: [ 54 | { type: 'lcov', subdir: 'lcov' }, 55 | { type: 'html', subdir: 'html' }, 56 | { type: 'text-summary' }, 57 | ], 58 | }, 59 | 60 | }); 61 | }; 62 | -------------------------------------------------------------------------------- /docs/general/files.md: -------------------------------------------------------------------------------- 1 | # Configuration: A Glossary 2 | 3 | A guide to the configuration files for this project: where they live and what 4 | they do. 5 | 6 | ## The root folder 7 | 8 | * `.editorconfig`: Sets the default configuration for certain files across editors. (e.g. indentation) 9 | 10 | * `.gitattributes`: Normalizes how `git`, the version control system this boilerplate uses, handles certain files. 11 | 12 | * `.gitignore`: Tells `git` to ignore certain files and folders which don't need to be version controlled, like the build folder. 13 | 14 | * `.travis.yml` and `appveyor.yml`: Continuous Integration configuration15 | This boilerplate uses [Travis CI](https://travis-ci.com) for Linux environments 16 | and [AppVeyor](https://www.appveyor.com/) for Windows platforms, but feel free 17 | to swap either out for your own choice of CI. 18 | 19 | * `package.json`: Our `npm` configuration file has three functions: 20 | 21 | 1. It's where Babel, ESLint and stylelint are configured 22 | 1. It's the API for the project: a consistent interface for all its controls 23 | 1. It lists the project's package dependencies 24 | 25 | Baking the config in is a slightly unusual set-up, but it allows us to keep 26 | the project root as uncluttered and grokkable-at-a-glance as possible. 27 | 28 | ## The `./internals` folder 29 | 30 | This is where the bulk of the tooling configuration lives, broken out into 31 | recognisable units of work. 32 | 33 | Feel free to change anything you like but don't be afraid to [ask upfront](https://gitter.im/mxstbr/react-boilerplate) 34 | whether you should: build systems are easy to break! 35 | -------------------------------------------------------------------------------- /app/containers/NotFoundPage/tests/index.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Testing the NotFoundPage 3 | */ 4 | 5 | import expect from 'expect'; 6 | import { shallow, mount } from 'enzyme'; 7 | import React from 'react'; 8 | 9 | import { IntlProvider, FormattedMessage } from 'react-intl'; 10 | import { NotFound } from '../index'; 11 | import H1 from 'components/H1'; 12 | import Button from 'components/Button'; 13 | 14 | describe('
21 |
)).toEqual(true);
26 | });
27 |
28 | it('should render a button', () => {
29 | const renderedComponent = shallow(
30 |
28 | {{else}}
29 |
26 |
31 | );
32 | expect(
33 | renderedComponent
34 | .text()
35 | .indexOf('Something went wrong, please try again!')
36 | ).toBeGreaterThan(-1);
37 | });
38 |
39 | it('should render the repositories if loading was successful', () => {
40 | const repos = [{
41 | owner: {
42 | login: 'mxstbr',
43 | },
44 | html_url: 'https://github.com/mxstbr/react-boilerplate',
45 | name: 'react-boilerplate',
46 | open_issues_count: 20,
47 | full_name: 'mxstbr/react-boilerplate',
48 | }];
49 | const renderedComponent = shallow(
50 |
71 |
73 | );
74 | const button = renderedComponent.find('button');
75 | button.simulate('click');
76 | expect(openRouteSpy).toHaveBeenCalled();
77 | });
78 | });
79 |
--------------------------------------------------------------------------------
/app/containers/App/tests/selectors.test.js:
--------------------------------------------------------------------------------
1 | import { fromJS } from 'immutable';
2 | import expect from 'expect';
3 |
4 | import {
5 | selectGlobal,
6 | selectCurrentUser,
7 | selectLoading,
8 | selectError,
9 | selectRepos,
10 | selectLocationState,
11 | } from '../selectors';
12 |
13 | describe('selectGlobal', () => {
14 | const globalSelector = selectGlobal();
15 | it('should select the global state', () => {
16 | const globalState = fromJS({});
17 | const mockedState = fromJS({
18 | global: globalState,
19 | });
20 | expect(globalSelector(mockedState)).toEqual(globalState);
21 | });
22 | });
23 |
24 | describe('selectCurrentUser', () => {
25 | const currentUserSelector = selectCurrentUser();
26 | it('should select the current user', () => {
27 | const username = 'mxstbr';
28 | const mockedState = fromJS({
29 | global: {
30 | currentUser: username,
31 | },
32 | });
33 | expect(currentUserSelector(mockedState)).toEqual(username);
34 | });
35 | });
36 |
37 | describe('selectLoading', () => {
38 | const loadingSelector = selectLoading();
39 | it('should select the loading', () => {
40 | const loading = false;
41 | const mockedState = fromJS({
42 | global: {
43 | loading,
44 | },
45 | });
46 | expect(loadingSelector(mockedState)).toEqual(loading);
47 | });
48 | });
49 |
50 | describe('selectError', () => {
51 | const errorSelector = selectError();
52 | it('should select the error', () => {
53 | const error = 404;
54 | const mockedState = fromJS({
55 | global: {
56 | error,
57 | },
58 | });
59 | expect(errorSelector(mockedState)).toEqual(error);
60 | });
61 | });
62 |
63 | describe('selectRepos', () => {
64 | const reposSelector = selectRepos();
65 | it('should select the repos', () => {
66 | const repositories = fromJS([]);
67 | const mockedState = fromJS({
68 | global: {
69 | userData: {
70 | repositories,
71 | },
72 | },
73 | });
74 | expect(reposSelector(mockedState)).toEqual(repositories);
75 | });
76 | });
77 |
78 | describe('selectLocationState', () => {
79 | const locationStateSelector = selectLocationState();
80 | it('should select the route as a plain JS object', () => {
81 | const route = fromJS({
82 | locationBeforeTransitions: null,
83 | });
84 | const mockedState = fromJS({
85 | route,
86 | });
87 | expect(locationStateSelector(mockedState)).toEqual(route.toJS());
88 | });
89 | });
90 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Code of Conduct
2 |
3 | As contributors and maintainers of this project, and in the interest of
4 | fostering an open and welcoming community, we pledge to respect all people who
5 | contribute through reporting issues, posting feature requests, updating
6 | documentation, submitting pull requests or patches, and other activities.
7 |
8 | We are committed to making participation in this project a harassment-free
9 | experience for everyone, regardless of level of experience, gender, gender
10 | identity and expression, sexual orientation, disability, personal appearance,
11 | body size, race, ethnicity, age, religion, or nationality.
12 |
13 | Examples of unacceptable behavior by participants include:
14 |
15 | * The use of sexualized language or imagery
16 | * Personal attacks
17 | * Trolling or insulting/derogatory comments
18 | * Public or private harassment
19 | * Publishing other's private information, such as physical or electronic
20 | addresses, without explicit permission
21 | * Other unethical or unprofessional conduct
22 |
23 | Project maintainers have the right and responsibility to remove, edit, or
24 | reject comments, commits, code, wiki edits, issues, and other contributions
25 | that are not aligned to this Code of Conduct, or to ban temporarily or
26 | permanently any contributor for other behaviors that they deem inappropriate,
27 | threatening, offensive, or harmful.
28 |
29 | By adopting this Code of Conduct, project maintainers commit themselves to
30 | fairly and consistently applying these principles to every aspect of managing
31 | this project. Project maintainers who do not follow or enforce the Code of
32 | Conduct may be permanently removed from the project team.
33 |
34 | This Code of Conduct applies both within project spaces and in public spaces
35 | when an individual is representing the project or its community.
36 |
37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
38 | reported by contacting the project maintainer at contact@mxstbr.com. All
39 | complaints will be reviewed and investigated and will result in a response that
40 | is deemed necessary and appropriate to the circumstances. Maintainers are
41 | obligated to maintain confidentiality with regard to the reporter of an
42 | incident.
43 |
44 |
45 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
46 | version 1.3.0, available at
47 | [http://contributor-covenant.org/version/1/3/0/][version]
48 |
49 | [homepage]: http://contributor-covenant.org
50 | [version]: http://contributor-covenant.org/version/1/3/0/
51 |
--------------------------------------------------------------------------------
/server/middlewares/frontendMiddleware.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable global-require */
2 | const express = require('express');
3 | const path = require('path');
4 | const compression = require('compression');
5 | const pkg = require(path.resolve(process.cwd(), 'package.json'));
6 |
7 | // Dev middleware
8 | const addDevMiddlewares = (app, webpackConfig) => {
9 | const webpack = require('webpack');
10 | const webpackDevMiddleware = require('webpack-dev-middleware');
11 | const webpackHotMiddleware = require('webpack-hot-middleware');
12 | const compiler = webpack(webpackConfig);
13 | const middleware = webpackDevMiddleware(compiler, {
14 | noInfo: true,
15 | publicPath: webpackConfig.output.publicPath,
16 | silent: true,
17 | stats: 'errors-only',
18 | });
19 |
20 | app.use(middleware);
21 | app.use(webpackHotMiddleware(compiler));
22 |
23 | // Since webpackDevMiddleware uses memory-fs internally to store build
24 | // artifacts, we use it instead
25 | const fs = middleware.fileSystem;
26 |
27 | if (pkg.dllPlugin) {
28 | app.get(/\.dll\.js$/, (req, res) => {
29 | const filename = req.path.replace(/^\//, '');
30 | res.sendFile(path.join(process.cwd(), pkg.dllPlugin.path, filename));
31 | });
32 | }
33 |
34 | app.get('*', (req, res) => {
35 | fs.readFile(path.join(compiler.outputPath, 'index.html'), (err, file) => {
36 | if (err) {
37 | res.sendStatus(404);
38 | } else {
39 | res.send(file.toString());
40 | }
41 | });
42 | });
43 | };
44 |
45 | // Production middlewares
46 | const addProdMiddlewares = (app, options) => {
47 | const publicPath = options.publicPath || '/';
48 | const outputPath = options.outputPath || path.resolve(process.cwd(), 'build');
49 |
50 | // compression middleware compresses your server responses which makes them
51 | // smaller (applies also to assets). You can read more about that technique
52 | // and other good practices on official Express.js docs http://mxs.is/googmy
53 | app.use(compression());
54 | app.use(publicPath, express.static(outputPath));
55 |
56 | app.get('*', (req, res) => res.sendFile(path.resolve(outputPath, 'index.html')));
57 | };
58 |
59 | /**
60 | * Front-end middleware
61 | */
62 | module.exports = (app, options) => {
63 | const isProd = process.env.NODE_ENV === 'production';
64 |
65 | if (isProd) {
66 | addProdMiddlewares(app, options);
67 | } else {
68 | const webpackConfig = require('../../internals/webpack/webpack.dev.babel');
69 | addDevMiddlewares(app, webpackConfig);
70 | }
71 |
72 | return app;
73 | };
74 |
--------------------------------------------------------------------------------
/app/containers/RepoListItem/tests/index.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Test the repo list item
3 | */
4 |
5 | import expect from 'expect';
6 | import { shallow, mount } from 'enzyme';
7 | import React from 'react';
8 |
9 | import { IntlProvider } from 'react-intl';
10 | import { RepoListItem } from '../index';
11 | import ListItem from 'components/ListItem';
12 |
13 | describe('
39 |
41 | );
42 | expect(renderedComponent.text().indexOf(item.owner.login)).toBeLessThan(0);
43 | });
44 |
45 | it('should render usernames that are not the current one', () => {
46 | const renderedComponent = mount(
47 |
48 |
50 | );
51 | expect(renderedComponent.text().indexOf(item.owner.login)).toBeGreaterThan(-1);
52 | });
53 |
54 | it('should render the repo name', () => {
55 | const renderedComponent = mount(
56 |
57 |
59 | );
60 | expect(renderedComponent.text().indexOf(item.name)).toBeGreaterThan(-1);
61 | });
62 |
63 | it('should render the issue count', () => {
64 | const renderedComponent = mount(
65 |
66 |
68 | );
69 | expect(renderedComponent.text().indexOf(item.open_issues_count)).toBeGreaterThan(1);
70 | });
71 |
72 | it('should render the IssueIcon', () => {
73 | const renderedComponent = mount(
74 |
75 |
77 | );
78 | expect(renderedComponent.find('svg').length).toEqual(1);
79 | });
80 | });
81 |
--------------------------------------------------------------------------------
/app/components/LoadingIndicator/styles.css:
--------------------------------------------------------------------------------
1 | .sk-fading-circle {
2 | margin: 2em auto;
3 | width: 40px;
4 | height: 40px;
5 | position: relative;
6 | }
7 |
8 | .skCircle {
9 | width: 100%;
10 | height: 100%;
11 | position: absolute;
12 | left: 0;
13 | top: 0;
14 | }
15 |
16 | .skCircle::before {
17 | content: '';
18 | display: block;
19 | margin: 0 auto;
20 | width: 15%;
21 | height: 15%;
22 | background-color: #999;
23 | border-radius: 100%;
24 | animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
25 | }
26 |
27 | .sk-circle2 {
28 | composes: skCircle;
29 | transform: rotate(30deg);
30 | }
31 |
32 | .sk-circle3 {
33 | composes: skCircle;
34 | transform: rotate(60deg);
35 | }
36 |
37 | .sk-circle4 {
38 | composes: skCircle;
39 | transform: rotate(90deg);
40 | }
41 |
42 | .sk-circle5 {
43 | composes: skCircle;
44 | transform: rotate(120deg);
45 | }
46 |
47 | .sk-circle6 {
48 | composes: skCircle;
49 | transform: rotate(150deg);
50 | }
51 |
52 | .sk-circle7 {
53 | composes: skCircle;
54 | transform: rotate(180deg);
55 | }
56 |
57 | .sk-circle8 {
58 | composes: skCircle;
59 | transform: rotate(210deg);
60 | }
61 |
62 | .sk-circle9 {
63 | composes: skCircle;
64 | transform: rotate(240deg);
65 | }
66 |
67 | .sk-circle10 {
68 | composes: skCircle;
69 | transform: rotate(270deg);
70 | }
71 |
72 | .sk-circle11 {
73 | composes: skCircle;
74 | transform: rotate(300deg);
75 | }
76 |
77 | .sk-circle12 {
78 | composes: skCircle;
79 | transform: rotate(330deg);
80 | }
81 |
82 | .sk-circle2::before {
83 | animation-delay: -1.1s;
84 | }
85 |
86 | .sk-circle3::before {
87 | animation-delay: -1s;
88 | }
89 |
90 | .sk-circle4::before {
91 | animation-delay: -0.9s;
92 | }
93 |
94 | .sk-circle5::before {
95 | animation-delay: -0.8s;
96 | }
97 |
98 | .sk-circle6::before {
99 | animation-delay: -0.7s;
100 | }
101 |
102 | .sk-circle7::before {
103 | animation-delay: -0.6s;
104 | }
105 |
106 | .sk-circle8::before {
107 | animation-delay: -0.5s;
108 | }
109 |
110 | .sk-circle9::before {
111 | animation-delay: -0.4s;
112 | }
113 |
114 | .sk-circle10::before {
115 | animation-delay: -0.3s;
116 | }
117 |
118 | .sk-circle11::before {
119 | animation-delay: -0.2s;
120 | }
121 |
122 | .sk-circle12::before {
123 | animation-delay: -0.1s;
124 | }
125 |
126 | @keyframes sk-circleFadeDelay {
127 | 0% {
128 | opacity: 0;
129 | }
130 |
131 | 39% {
132 | opacity: 0;
133 | }
134 |
135 | 40% {
136 | opacity: 1;
137 | }
138 |
139 | 100% {
140 | opacity: 0;
141 | }
142 | }
143 |
--------------------------------------------------------------------------------
/internals/webpack/webpack.test.babel.js:
--------------------------------------------------------------------------------
1 | /**
2 | * TEST WEBPACK CONFIGURATION
3 | */
4 |
5 | const path = require('path');
6 | const webpack = require('webpack');
7 | const modules = [
8 | 'app',
9 | 'node_modules',
10 | ];
11 |
12 | module.exports = {
13 | devtool: 'inline-source-map',
14 | isparta: {
15 | babel: {
16 | presets: ['es2015', 'react', 'stage-0'],
17 | },
18 | },
19 | module: {
20 | // Some libraries don't like being run through babel.
21 | // If they gripe, put them here.
22 | noParse: [
23 | /node_modules(\\|\/)sinon/,
24 | /node_modules(\\|\/)acorn/,
25 | ],
26 | preLoaders: [
27 | { test: /\.js$/,
28 | loader: 'isparta',
29 | include: path.resolve('app/'),
30 | },
31 | ],
32 | loaders: [
33 | { test: /\.json$/, loader: 'json-loader' },
34 | { test: /\.css$/, loader: 'null-loader' },
35 |
36 | // sinon.js--aliased for enzyme--expects/requires global vars.
37 | // imports-loader allows for global vars to be injected into the module.
38 | // See https://github.com/webpack/webpack/issues/304
39 | { test: /sinon(\\|\/)pkg(\\|\/)sinon\.js/,
40 | loader: 'imports?define=>false,require=>false',
41 | },
42 | { test: /\.js$/,
43 | loader: 'babel',
44 | exclude: [/node_modules/],
45 | },
46 | { test: /\.jpe?g$|\.gif$|\.png$|\.svg$/i,
47 | loader: 'null-loader',
48 | },
49 | ],
50 | },
51 |
52 | plugins: [
53 |
54 | // Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
55 | // inside your code for any environment checks; UglifyJS will automatically
56 | // drop any unreachable code.
57 | new webpack.DefinePlugin({
58 | 'process.env': {
59 | NODE_ENV: JSON.stringify(process.env.NODE_ENV),
60 | },
61 | })],
62 |
63 | // Some node_modules pull in Node-specific dependencies.
64 | // Since we're running in a browser we have to stub them out. See:
65 | // https://webpack.github.io/docs/configuration.html#node
66 | // https://github.com/webpack/node-libs-browser/tree/master/mock
67 | // https://github.com/webpack/jade-loader/issues/8#issuecomment-55568520
68 | node: {
69 | fs: 'empty',
70 | child_process: 'empty',
71 | net: 'empty',
72 | tls: 'empty',
73 | },
74 |
75 | // required for enzyme to work properly
76 | externals: {
77 | jsdom: 'window',
78 | 'react/addons': true,
79 | 'react/lib/ExecutionEnvironment': true,
80 | 'react/lib/ReactContext': 'window',
81 | },
82 | resolve: {
83 | modulesDirectories: modules,
84 | modules,
85 | alias: {
86 | // required for enzyme to work properly
87 | sinon: 'sinon/pkg/sinon',
88 | },
89 | },
90 | };
91 |
--------------------------------------------------------------------------------
/internals/generators/language/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Language Generator
3 | */
4 | const exec = require('child_process').exec;
5 |
6 | module.exports = {
7 | description: 'Add a langauge',
8 | prompts: [{
9 | type: 'input',
10 | name: 'language',
11 | message: 'What is the language you want to add i18n support for (e.g. "fr", "de")?',
12 | default: 'fr',
13 | validate: value => {
14 | if ((/.+/).test(value) && value.length === 2) {
15 | return true;
16 | }
17 |
18 | return '2 character language specifier is required';
19 | },
20 | }],
21 |
22 | actions: () => {
23 | const actions = [];
24 | actions.push({
25 | type: 'modify',
26 | path: '../../app/i18n.js',
27 | pattern: /('react-intl\/locale-data\/[a-z]+';\n)(?!.*'react-intl\/locale-data\/[a-z]+';)/g,
28 | templateFile: './language/intl-locale-data.hbs',
29 | });
30 | actions.push({
31 | type: 'modify',
32 | path: '../../app/i18n.js',
33 | pattern: /([\n\s'[a-z]+',)(?!.*[\n\s'[a-z]+',)/g,
34 | templateFile: './language/app-locale.hbs',
35 | });
36 | actions.push({
37 | type: 'modify',
38 | path: '../../app/i18n.js',
39 | pattern: /(from\s'.\/translations\/[a-z]+.json';\n)(?!.*from\s'.\/translations\/[a-z]+.json';)/g,
40 | templateFile: './language/translation-messages.hbs',
41 | });
42 | actions.push({
43 | type: 'modify',
44 | path: '../../app/i18n.js',
45 | pattern: /(addLocaleData\([a-z]+LocaleData\);\n)(?!.*addLocaleData\([a-z]+LocaleData\);)/g,
46 | templateFile: './language/add-locale-data.hbs',
47 | });
48 | actions.push({
49 | type: 'modify',
50 | path: '../../app/i18n.js',
51 | pattern: /([a-z]+:\sformatTranslationMessages\([a-z]+TranslationMessages\),\n)(?!.*[a-z]+:\sformatTranslationMessages\([a-z]+TranslationMessages\),)/g,
52 | templateFile: './language/format-translation-messages.hbs',
53 | });
54 | actions.push({
55 | type: 'add',
56 | path: '../../app/translations/{{language}}.json',
57 | templateFile: './language/translations-json.hbs',
58 | abortOnFail: true,
59 | });
60 | actions.push({
61 | type: 'modify',
62 | path: '../../app/app.js',
63 | pattern: /(System\.import\('intl\/locale-data\/jsonp\/[a-z]+\.js'\),\n)(?!.*System\.import\('intl\/locale-data\/jsonp\/[a-z]+\.js'\),)/g,
64 | templateFile: './language/polyfill-intl-locale.hbs',
65 | });
66 | actions.push(
67 | () => {
68 | const cmd = 'npm run extract-intl';
69 | exec(cmd, (err, result, stderr) => {
70 | if (err || stderr) {
71 | throw err || stderr;
72 | }
73 | process.stdout.write(result);
74 | });
75 | }
76 | );
77 |
78 | return actions;
79 | },
80 | };
81 |
--------------------------------------------------------------------------------
/internals/webpack/webpack.base.babel.js:
--------------------------------------------------------------------------------
1 | /**
2 | * COMMON WEBPACK CONFIGURATION
3 | */
4 |
5 | const path = require('path');
6 | const webpack = require('webpack');
7 |
8 | module.exports = (options) => ({
9 | entry: options.entry,
10 | output: Object.assign({ // Compile into js/build.js
11 | path: path.resolve(process.cwd(), 'build'),
12 | publicPath: '/',
13 | }, options.output), // Merge with env dependent settings
14 | module: {
15 | loaders: [{
16 | test: /\.js$/, // Transform all .js files required somewhere with Babel
17 | loader: 'babel',
18 | exclude: /node_modules/,
19 | query: options.babelQuery,
20 | }, {
21 | // Transform our own .css files with PostCSS and CSS-modules
22 | test: /\.css$/,
23 | exclude: /node_modules/,
24 | loader: options.cssLoaders,
25 | }, {
26 | // Do not transform vendor's CSS with CSS-modules
27 | // The point is that they remain in global scope.
28 | // Since we require these CSS files in our JS or CSS files,
29 | // they will be a part of our compilation either way.
30 | // So, no need for ExtractTextPlugin here.
31 | test: /\.css$/,
32 | include: /node_modules/,
33 | loaders: ['style-loader', 'css-loader'],
34 | }, {
35 | test: /\.(eot|svg|ttf|woff|woff2)$/,
36 | loader: 'file-loader',
37 | }, {
38 | test: /\.(jpg|png|gif)$/,
39 | loaders: [
40 | 'file-loader',
41 | 'image-webpack?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}',
42 | ],
43 | }, {
44 | test: /\.html$/,
45 | loader: 'html-loader',
46 | }, {
47 | test: /\.json$/,
48 | loader: 'json-loader',
49 | }, {
50 | test: /\.(mp4|webm)$/,
51 | loader: 'url-loader?limit=10000',
52 | }],
53 | },
54 | plugins: options.plugins.concat([
55 | new webpack.ProvidePlugin({
56 | // make fetch available
57 | fetch: 'exports?self.fetch!whatwg-fetch',
58 | }),
59 |
60 | // Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
61 | // inside your code for any environment checks; UglifyJS will automatically
62 | // drop any unreachable code.
63 | new webpack.DefinePlugin({
64 | 'process.env': {
65 | NODE_ENV: JSON.stringify(process.env.NODE_ENV),
66 | },
67 | }),
68 | ]),
69 | postcss: () => options.postcssPlugins,
70 | resolve: {
71 | modules: ['app', 'node_modules'],
72 | extensions: [
73 | '',
74 | '.js',
75 | '.jsx',
76 | '.react.js',
77 | ],
78 | mainFields: [
79 | 'jsnext:main',
80 | 'main',
81 | ],
82 | },
83 | devtool: options.devtool,
84 | target: 'web', // Make web variables accessible to webpack, e.g. window
85 | stats: false, // Don't show stats in the console
86 | progress: true,
87 | });
88 |
--------------------------------------------------------------------------------
/docs/js/redux-saga.md:
--------------------------------------------------------------------------------
1 | # `redux-saga`
2 |
3 | `redux-saga` is a library to manage side effects in your application. It works
4 | beautifully for data fetching, concurrent computations and a lot more.
5 | [Sebastien Lorber](https://twitter.com/sebastienlorber) put it best:
6 |
7 | > Imagine there is widget1 and widget2. When some button on widget1 is clicked,
8 | then it should have an effect on widget2. Instead of coupling the 2 widgets
9 | together (ie widget1 dispatch an action that targets widget2), widget1 only
10 | dispatch that its button was clicked. Then the saga listen for this button
11 | click and then update widget2 by dispaching a new event that widget2 is aware of.
12 | >
13 | > This adds a level of indirection that is unnecessary for simple apps, but make
14 | it more easy to scale complex applications. You can now publish widget1 and
15 | widget2 to different npm repositories so that they never have to know about
16 | each others, without having them to share a global registry of actions. The 2
17 | widgets are now bounded contexts that can live separately. They do not need
18 | each others to be consistent and can be reused in other apps as well. **The saga
19 | is the coupling point between the two widgets that coordinate them in a
20 | meaningful way for your business.**
21 |
22 | _Note: It is well worth reading the [source](https://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in-redux/34623840#34623840)
23 | of this quote in its entirety!_
24 |
25 | To learn more about this amazing way to handle concurrent flows, start with the
26 | [official documentation](https://github.com/yelouafi/redux-saga) and explore
27 | some examples! (read [this comparison](https://stackoverflow.com/questions/34930735/pros-cons-of-using-redux-saga-with-es6-generators-vs-redux-thunk-with-es7-async/34933395) if you're used to `redux-thunk`)
28 |
29 | ## Usage
30 |
31 | Sagas are associated with a container, just like actions, constants, selectors
32 | and reducers. If your container already has a `sagas.js` file, simply add your
33 | saga to that. If your container does not yet have a `sagas.js` file, add one with
34 | this boilerplate structure:
35 |
36 | ```JS
37 | import { take, call, put, select } from 'redux-saga/effects';
38 |
39 | // Your sagas for this container
40 | export default [
41 | sagaName,
42 | ];
43 |
44 | // Individual exports for testing
45 | export function* sagaName() {
46 |
47 | }
48 | ```
49 |
50 | Then, in your `routes.js`, add injection for the newly added saga:
51 |
52 | ```JS
53 | getComponent(nextState, cb) {
54 | const importModules = Promise.all([
55 | System.import('containers/YourComponent/reducer'),
56 | System.import('containers/YourComponent/sagas'),
57 | System.import('containers/YourComponent'),
58 | ]);
59 |
60 | const renderRoute = loadModule(cb);
61 |
62 | importModules.then(([reducer, sagas, component]) => {
63 | injectReducer('home', reducer.default);
64 | injectSagas(sagas.default); // Inject the saga
65 |
66 | renderRoute(component);
67 | });
68 |
69 | importModules.catch(errorLoading);
70 | },
71 | ```
72 |
73 | Now add as many sagas to your `sagas.js` file as you want!
74 |
75 | ---
76 |
77 | _Don't like this feature? [Click here](remove.md)_
78 |
--------------------------------------------------------------------------------
/docs/js/immutablejs.md:
--------------------------------------------------------------------------------
1 | # ImmutableJS
2 |
3 | Immutable data structures can be deeply compared in no time. This allows us to
4 | efficiently determine if our components need to rerender since we know if the
5 | `props` changed or not!
6 |
7 | Check out the [official documentation](https://facebook.github.io/immutable-js/)
8 | for a good explanation of the more intricate benefits it has.
9 |
10 | ## Usage
11 |
12 | In our reducers, we make the initial state an immutable data structure with the
13 | `fromJS` function. We pass it an object or an array, and it takes care of
14 | converting it to a compatible one. (Note: the conversion is performed deeply so
15 | that even arbitrarily nested arrays/objects are immutable stuctures too!)
16 |
17 | ```JS
18 | import { fromJS } from 'immutable';
19 |
20 | const initialState = fromJS({
21 | myData: 'Hello World!',
22 | });
23 | ```
24 |
25 | To react to an incoming actions our reducers can use the `.set` and the `.setIn`
26 | functions.
27 |
28 | ```JS
29 | import { SOME_ACTION } from './actions';
30 |
31 | // […]
32 |
33 | function myReducer(state = initialState, action) {
34 | switch (action.type) {
35 | case SOME_ACTION:
36 | return state.set('myData', action.payload);
37 | default:
38 | return state;
39 | }
40 | }
41 | ```
42 |
43 | We use [`reselect`](./reselect.md) to efficiently cache our computed application
44 | state. Since that state is now immutable, we need to use the `.get` and `.getIn`
45 | functions to select the part we want.
46 |
47 | ```JS
48 | const myDataSelector = (state) => state.get('myData');
49 |
50 | export default myDataSelector;
51 | ```
52 |
53 | To learn more, check out [`reselect.md`](reselect.md)!
54 |
55 | ## Advanced Usage
56 |
57 | ImmutableJS provide many immutable structures like `Map`, `Set` and `List`. But the downside to using ImmutableJS data structures is that they are not normal JavaScript data structures.
58 |
59 | That means you must use getters to access properties : for instance you'll do `map.get("property")` instead of `map.property`, and `array.get(0)` instead of `array[0]`. It's not natural and your code becoming bigger, you finish by not knowing anymore if you are working with a JavaScript object or an Immutable one. While it's possible to be clear where you are using immutable objects, you still pass them through the system into places where it's not clear. This makes reasoning about functions harder.
60 |
61 | The `Record` structure tries to get rid of this drawback. `Record` is like a `Map` whose shape is fixed : you can't later add a new property after the record is created. The benefit of `Record` is that you can now, along with others .get, .set and .merge methods, use the dot notation to access properties, which is a good point to write simpler code.
62 |
63 | The creation of a record is less simple. You got to first create the `Record` shape. With the example above, to create your initial state, you'll write :
64 |
65 | ```JS
66 | //the shape
67 | const StateRecord = Record({
68 | myData: 'Hello World!',
69 | });
70 |
71 | const initialState = new StateRecord({}); // initialState is now a new StateRecord instance
72 | // initialized with myData set by default as 'Hello World!'
73 | ```
74 |
75 | Now, if you want to access `myData`, you can just write `state.myData` in your reducer code.
76 |
77 |
--------------------------------------------------------------------------------
/app/containers/FeaturePage/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | * FeaturePage
3 | *
4 | * List all the features
5 | */
6 | import React from 'react';
7 | import { connect } from 'react-redux';
8 | import { push } from 'react-router-redux';
9 | import Helmet from 'react-helmet';
10 |
11 | import messages from './messages';
12 | import { FormattedMessage } from 'react-intl';
13 | import Button from 'components/Button';
14 | import H1 from 'components/H1';
15 |
16 | import styles from './styles.css';
17 |
18 | export class FeaturePage extends React.Component {
19 | /**
20 | * Changes the route
21 | *
22 | * @param {string} route The route we want to go to
23 | */
24 | openRoute = (route) => {
25 | this.props.changeRoute(route);
26 | };
27 |
28 | /**
29 | * Changed route to '/'
30 | */
31 | openHomePage = () => {
32 | this.openRoute('/');
33 | };
34 |
35 | render() {
36 | return (
37 |
58 |
59 |
69 | ,
70 | document.getElementById('app')
71 | );
72 | };
73 |
74 |
75 | // Hot reloadable translation json files
76 | if (module.hot) {
77 | // modules.hot.accept does not accept dynamic dependencies,
78 | // have to be constants at compile-time
79 | module.hot.accept('./i18n', () => {
80 | render(translationMessages);
81 | });
82 | }
83 |
84 | // Chunked polyfill for browsers without Intl support
85 | if (!window.Intl) {
86 | Promise.all([
87 | System.import('intl'),
88 | System.import('intl/locale-data/jsonp/en.js'),
89 | ]).then(() => render(translationMessages));
90 | } else {
91 | render(translationMessages);
92 | }
93 |
94 | // Install ServiceWorker and AppCache in the end since
95 | // it's not most important operation and if main code fails,
96 | // we do not want it installed
97 | import { install } from 'offline-plugin/runtime';
98 | install();
99 |
--------------------------------------------------------------------------------
/internals/scripts/clean.js:
--------------------------------------------------------------------------------
1 | require('shelljs/global');
2 |
3 | /**
4 | * Adds mark check symbol
5 | */
6 | function addCheckMark(callback) {
7 | process.stdout.write(' ✓');
8 | callback();
9 | }
10 |
11 | if (!which('git')) {
12 | echo('Sorry, this script requires git');
13 | exit(1);
14 | }
15 |
16 | if (!test('-e', 'internals/templates')) {
17 | echo('The example is deleted already.');
18 | exit(1);
19 | }
20 |
21 | process.stdout.write('Cleanup started...');
22 |
23 | // Cleanup components folder
24 | rm('-rf', 'app/components/*');
25 |
26 | // Cleanup containers folder
27 | rm('-rf', 'app/containers/*');
28 | mkdir('-p', 'app/containers/App');
29 | mkdir('-p', 'app/containers/NotFoundPage');
30 | mkdir('-p', 'app/containers/HomePage');
31 | cp('internals/templates/appContainer.js', 'app/containers/App/index.js');
32 | cp('internals/templates/notFoundPage/notFoundPage.js', 'app/containers/NotFoundPage/index.js');
33 | cp('internals/templates/notFoundPage/messages.js', 'app/containers/NotFoundPage/messages.js');
34 | cp('internals/templates/homePage/homePage.js', 'app/containers/HomePage/index.js');
35 | cp('internals/templates/homePage/messages.js', 'app/containers/HomePage/messages.js');
36 |
37 | // Handle Translations
38 | mkdir('-p', 'app/translations');
39 | cp('internals/templates/translations/en.json',
40 | 'app/translations/en.json');
41 |
42 | // move i18n file
43 | cp('internals/templates/i18n.js',
44 | 'app/i18n.js');
45 |
46 | // Copy LanguageProvider
47 | mkdir('-p', 'app/containers/LanguageProvider');
48 | mkdir('-p', 'app/containers/LanguageProvider/tests');
49 | cp('internals/templates/languageProvider/actions.js',
50 | 'app/containers/LanguageProvider/actions.js');
51 | cp('internals/templates/languageProvider/constants.js',
52 | 'app/containers/LanguageProvider/constants.js');
53 | cp('internals/templates/languageProvider/languageProvider.js',
54 | 'app/containers/LanguageProvider/index.js');
55 | cp('internals/templates/languageProvider/reducer.js',
56 | 'app/containers/LanguageProvider/reducer.js');
57 | cp('internals/templates/languageProvider/selectors.js',
58 | 'app/containers/LanguageProvider/selectors.js');
59 | cp('internals/templates/styles.css', 'app/containers/App/styles.css');
60 |
61 | // Copy selectors
62 | mkdir('app/containers/App/tests');
63 | cp('internals/templates/selectors.js',
64 | 'app/containers/App/selectors.js');
65 | cp('internals/templates/selectors.test.js',
66 | 'app/containers/App/tests/selectors.test.js');
67 |
68 | // Utils
69 | rm('-rf', 'app/utils');
70 | mkdir('app/utils');
71 | mkdir('app/utils/tests');
72 | cp('internals/templates/asyncInjectors.js',
73 | 'app/utils/asyncInjectors.js');
74 | cp('internals/templates/asyncInjectors.test.js',
75 | 'app/utils/tests/asyncInjectors.test.js');
76 |
77 | // Replace the files in the root app/ folder
78 | cp('internals/templates/app.js', 'app/app.js');
79 | cp('internals/templates/index.html', 'app/index.html');
80 | cp('internals/templates/reducers.js', 'app/reducers.js');
81 | cp('internals/templates/routes.js', 'app/routes.js');
82 | cp('internals/templates/store.js', 'app/store.js');
83 | cp('internals/templates/store.test.js', 'app/tests/store.test.js');
84 |
85 | // Remove the templates folder
86 | rm('-rf', 'internals/templates');
87 |
88 | process.stdout.write(' ✓');
89 |
90 | // Commit the changes
91 | if (exec('git add . --all && git commit -qm "Remove default example"').code !== 0) {
92 | echo('\nError: Git commit failed');
93 | exit(1);
94 | }
95 |
96 | echo('\nCleanup done. Happy Coding!!!');
97 |
--------------------------------------------------------------------------------
/server/middlewares/api.js:
--------------------------------------------------------------------------------
1 | const low = require('lowdb');
2 | const bodyParser = require('body-parser');
3 | const uuid = require('uuid');
4 |
5 | function setupDb() {
6 | const db = low();
7 |
8 | db.defaults({ topics: [], links: [] })
9 | .value();
10 |
11 | const topic1 = {
12 | name: 'libraries',
13 | description: 'links to useful open source libraries',
14 | };
15 |
16 | const topic2 = {
17 | name: 'apps',
18 | description: 'links to new and exciting apps',
19 | };
20 |
21 | const topic3 = {
22 | name: 'news',
23 | description: 'links to programming related news articles',
24 | };
25 |
26 |
27 | db.get('topics').push(topic1).value();
28 | db.get('topics').push(topic2).value();
29 | db.get('topics').push(topic3).value();
30 |
31 | db.get('links').push({
32 | description: 'The very library we are working with now',
33 | url: 'https://github.com/facebook/react',
34 | topicName: topic1.name,
35 | id: uuid(),
36 | voteCount: 0,
37 | voters: [],
38 | }).value();
39 | db.get('links').push({
40 | description: 'Some old videos',
41 | url: 'http://tagtree.io',
42 | topicName: topic1.name,
43 | id: uuid(),
44 | voteCount: 0,
45 | voters: [],
46 | }).value();
47 |
48 | db.get('links').push({
49 | description: 'An app to manage your finances',
50 | url: 'https://22seven.com',
51 | topicName: topic2.name,
52 | id: uuid(),
53 | voteCount: 0,
54 | voters: [],
55 | }).value();
56 | db.get('links').push({
57 | description: 'Go find some news yourself!',
58 | url: 'https://google.com',
59 | topicName: topic3.name,
60 | id: uuid(),
61 | voteCount: 0,
62 | voters: [],
63 | }).value();
64 |
65 | return db;
66 | }
67 |
68 | module.exports = (app) => {
69 | const db = setupDb();
70 |
71 | app.use((req, res, next) => {
72 | // Website you wish to allow to connect
73 | res.setHeader('Access-Control-Allow-Origin', '*');
74 | // Request methods you wish to allow
75 | res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
76 | // Request headers you wish to allow
77 | res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type, Authorization');
78 |
79 | // Pass to next layer of middleware
80 | next();
81 | });
82 |
83 | app.use(bodyParser.json());
84 |
85 | app.get('/api/topics', (req, res) => {
86 | res.send(db.get('topics').toArray().value());
87 | });
88 |
89 | app.get('/api/topics/:name/links', (req, res) => {
90 | const links = db.get('links').filter((l) =>
91 | l.topicName === req.params.name
92 | ).value();
93 | res.send(links);
94 | });
95 |
96 | app.post('/api/topics/:name/links', (req, res) => {
97 | const existingLink = db.get('links').find({ url: req.body.url }).value();
98 | if (existingLink) {
99 | return res.send(403);
100 | }
101 |
102 | const link = Object.assign({}, req.body, {
103 | id: uuid(),
104 | voteCount: 0,
105 | voters: [],
106 | });
107 | db.get('links').push(link).value();
108 | return res.send(link);
109 | });
110 |
111 | app.post('/api/links/:id/vote', (req, res) => {
112 | const link = db.get('links').find({ id: req.params.id }).value();
113 | if (link.voters && link.voters.indexOf(req.body.email) > -1) {
114 | return res.send(403);
115 | }
116 |
117 | link.voters.push(req.body.email);
118 | link.voteCount += req.body.increment;
119 | return res.send(link);
120 | });
121 | };
122 |
--------------------------------------------------------------------------------
/Changelog.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 |
3 | ## RBP v3: The "JS Fatigue Antivenin" Edition
4 |
5 | React Boilerplate (RBP) v3.0.0 is out, and it's a _complete_ rewrite! :tada:
6 |
7 | We've focused on becoming a rock-solid foundation to start your next project
8 | with, no matter what its scale. You get to focus on writing your app because we
9 | focus on making that as easy as pie.
10 |
11 | website!
12 |
13 | ## Highlights
14 |
15 | - **Scaffolding**: Thanks to @somus, you can now run `npm run generate` in your
16 | terminal and immediately create new components, containers, sagas, routes and
17 | selectors! No more context switching, no more "Create new file, copy and paste
18 | that boilerplate structure, bla bla": just `npm run generate ` and go.
19 |
20 | Oh... and starting a project got a whole lot easier too: `npm run setup`. Done.
21 |
22 | - **Revamped architecture**: Following the incredible discussion in #27 (thanks
23 | everybody for sharing your thoughts), we now have a weapons-grade, domain-driven
24 | application architecture.
25 |
26 | "Smart" containers are now isolated from stateless and/or generic components,
27 | tests are now co-located with the code that they validate.
28 |
29 | - **New industry-standard JS utilties** We're now making the most of...
30 | - ImmutableJS
31 | - reselect
32 | - react-router-redux
33 | - redux-saga
34 |
35 | - **Huge CSS Improvements**
36 | - _[CSS Modules](docs/css/css-modules.md)_: Finally, truly modular, reusable
37 | styles!
38 | - _Page-specific CSS_: smart Webpack configuration means that only the CSS
39 | your components need is served
40 | - _Standards rock:_ Nothing beats consistent styling so we beefed up the
41 | quality checks with **[stylelint](docs/css/stylelint.md)** to help ensure
42 | that you and your team stay on point.
43 |
44 | - **Performance**
45 | - _Code splitting_: splitting/chunking by route means the leanest, meanest
46 | payload (because the fastest code is the code you don't load!)
47 | - _PageSpeed Metrics_ are built right in with `npm run pagespeed`
48 |
49 | - **Testing setup**: Thanks to @jbinto's herculean efforts, testing is now a
50 | first-class citizen of this boilerplate. (the example app has _99% test coverage!_)
51 | Karma and enzyme take care of unit testing, while ngrok tunnels your local
52 | server for access from anywhere in the world – perfect for testing on different
53 | devices in different locations.
54 |
55 | - **New server setup**: Thanks to the mighty @grabbou, we now use express.js to
56 | give users a production-ready server right out of the box. Hot reloading is
57 | still as available as always, but adding a custom API or a non-React page to
58 | your application is now easier than ever :smile:
59 |
60 | - **Cleaner layout:** We've taken no prisoners with our approach to keeping your
61 | code the star of the show: wherever possible, the new file layout keeps the
62 | config in the background so that you can keep your focus where it needs to be.
63 |
64 | - **Documentation**: Thanks to @oliverturner, this boilerplate has some of the best
65 | documentation going. Not just clearly explained usage guides, but easy-to-follow
66 | _removal_ guides for most features too. RBP is just a launchpad: don't want to
67 | use a bundled feature? Get rid of it quickly and easily without having to dig
68 | through the code.
69 |
70 | - **Countless small improvements**: Everything, from linting pre-commit (thanks
71 | @okonet!) to code splitting to cross-OS compatibility is now tested and ready
72 | to go:
73 |
74 | - We finally added a **[CoC](CODE_OF_CONDUCT.md)**
75 | - Windows compatibility has improved massively
76 |
--------------------------------------------------------------------------------
30 | {{/if}}
31 | {{#if wantHeaders}}
32 |
43 | );
44 | }
45 | }
46 |
47 | {{#if wantActionsAndReducer}}
48 | const mapStateToProps = select{{properCase name}}();
49 | {{/if}}
50 |
51 | function mapDispatchToProps(dispatch) {
52 | return {
53 | dispatch,
54 | };
55 | }
56 |
57 | {{#if wantActionsAndReducer}}
58 | export default connect(mapStateToProps, mapDispatchToProps)({{ properCase name }});
59 | {{else}}
60 | export default connect(mapDispatchToProps)({{ properCase name }});
61 | {{/if}}
62 |
--------------------------------------------------------------------------------
/docs/js/redux.md:
--------------------------------------------------------------------------------
1 | # Redux
2 |
3 | If you haven't worked with Redux, it's highly recommended (possibly indispensable!)
4 | to read through the (amazing) [official documentation](http://redux.js.org)
5 | and/or watch this [free video tutorial series](https://egghead.io/series/getting-started-with-redux).
6 |
7 | ## Usage
8 |
9 | See above! As minimal as Redux is, the challenge it addresses - app state
10 | management - is a complex topic that is too involved to properly discuss here.
11 |
12 | ## Removing redux
13 |
14 | There are a few reasons why we chose to bundle redux with React Boilerplate, the
15 | biggest being that it is widely regarded as the current best Flux implementation
16 | in terms of architecture, support and documentation.
17 |
18 | You may feel differently! This is completely OK :)
19 |
20 | Below are a few reasons you might want to remove it:
21 |
22 | ### I'm just getting started and Flux is hard
23 |
24 | You're under no obligation to use Redux or any other Flux library! The complexity
25 | of your application will determine the point at which you need to introduce it.
26 |
27 | Here are a couple of great resources for taking a minimal approach:
28 |
29 | - [Misconceptions of Tooling in JavaScript](http://javascriptplayground.com/blog/2016/02/the-react-webpack-tooling-problem)
30 | - [Learn Raw React — no JSX, no Flux, no ES6, no Webpack…](http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/)
31 |
32 | ### It's overkill for my project!
33 |
34 | See above.
35 |
36 | ### I prefer `(Alt|MobX|SomethingElse)`!
37 |
38 | React Boilerplate is a baseline for _your_ app: go for it!
39 |
40 | If you feel that we should take a closer look at supporting your preference
41 | out of the box, please let us know.
42 |
--------------------------------------------------------------------------------
/app/containers/App/actions.js:
--------------------------------------------------------------------------------
1 | /*
2 | * App Actions
3 | *
4 | * Actions change things in your application
5 | * Since this boilerplate uses a uni-directional data flow, specifically redux,
6 | * we have these actions which are the only way your application interacts with
7 | * your appliction state. This guarantees that your state is up to date and nobody
8 | * messes it up weirdly somewhere.
9 | *
10 | * To add a new Action:
11 | * 1) Import your constant
12 | * 2) Add a function like this:
13 | * export function yourAction(var) {
14 | * return { type: YOUR_ACTION_CONSTANT, var: var }
15 | * }
16 | */
17 |
18 | import {
19 | LOAD_REPOS,
20 | LOAD_REPOS_SUCCESS,
21 | LOAD_REPOS_ERROR,
22 | } from './constants';
23 |
24 | /**
25 | * Load the repositories, this action starts the request saga
26 | *
27 | * @return {object} An action object with a type of LOAD_REPOS
28 | */
29 | export function loadRepos() {
30 | return {
31 | type: LOAD_REPOS,
32 | };
33 | }
34 |
35 | /**
36 | * Dispatched when the repositories are loaded by the request saga
37 | *
38 | * @param {array} repos The repository data
39 | * @param {string} username The current username
40 | *
41 | * @return {object} An action object with a type of LOAD_REPOS_SUCCESS passing the repos
42 | */
43 | export function reposLoaded(repos, username) {
44 | return {
45 | type: LOAD_REPOS_SUCCESS,
46 | repos,
47 | username,
48 | };
49 | }
50 |
51 | /**
52 | * Dispatched when loading the repositories fails
53 | *
54 | * @param {object} error The error
55 | *
56 | * @return {object} An action object with a type of LOAD_REPOS_ERROR passing the error
57 | */
58 | export function repoLoadingError(error) {
59 | return {
60 | type: LOAD_REPOS_ERROR,
61 | error,
62 | };
63 | }
64 |
--------------------------------------------------------------------------------
/app/containers/App/tests/reducer.test.js:
--------------------------------------------------------------------------------
1 | import expect from 'expect';
2 | import appReducer from '../reducer';
3 | import {
4 | loadRepos,
5 | reposLoaded,
6 | repoLoadingError,
7 | } from '../actions';
8 | import { fromJS } from 'immutable';
9 |
10 | describe('appReducer', () => {
11 | let state;
12 | beforeEach(() => {
13 | state = fromJS({
14 | loading: false,
15 | error: false,
16 | currentUser: false,
17 | userData: fromJS({
18 | repositories: false,
19 | }),
20 | });
21 | });
22 |
23 | it('should return the initial state', () => {
24 | const expectedResult = state;
25 | expect(appReducer(undefined, {})).toEqual(expectedResult);
26 | });
27 |
28 | it('should handle the loadRepos action correctly', () => {
29 | const expectedResult = state
30 | .set('loading', true)
31 | .set('error', false)
32 | .setIn(['userData', 'repositories'], false);
33 |
34 | expect(appReducer(state, loadRepos())).toEqual(expectedResult);
35 | });
36 |
37 | it('should handle the reposLoaded action correctly', () => {
38 | const fixture = [{
39 | name: 'My Repo',
40 | }];
41 | const username = 'test';
42 | const expectedResult = state
43 | .setIn(['userData', 'repositories'], fixture)
44 | .set('loading', false)
45 | .set('currentUser', username);
46 |
47 | expect(appReducer(state, reposLoaded(fixture, username))).toEqual(expectedResult);
48 | });
49 |
50 | it('should handle the repoLoadingError action correctly', () => {
51 | const fixture = {
52 | msg: 'Not found',
53 | };
54 | const expectedResult = state
55 | .set('error', fixture)
56 | .set('loading', false);
57 |
58 | expect(appReducer(state, repoLoadingError(fixture))).toEqual(expectedResult);
59 | });
60 | });
61 |
--------------------------------------------------------------------------------
/app/utils/tests/request.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Test the request function
3 | */
4 |
5 | import request from '../request';
6 | import sinon from 'sinon';
7 | import expect from 'expect';
8 |
9 | describe('request', () => {
10 | // Before each test, stub the fetch function
11 | beforeEach(() => {
12 | sinon.stub(window, 'fetch');
13 | });
14 |
15 | // After each test, restore the fetch function
16 | afterEach(() => {
17 | window.fetch.restore();
18 | });
19 |
20 | describe('stubbing successful response', () => {
21 | // Before each test, pretend we got a successful response
22 | beforeEach(() => {
23 | const res = new Response('{"hello":"world"}', {
24 | status: 200,
25 | headers: {
26 | 'Content-type': 'application/json',
27 | },
28 | });
29 |
30 | window.fetch.returns(Promise.resolve(res));
31 | });
32 |
33 | it('should format the response correctly', (done) => {
34 | request('/thisurliscorrect')
35 | .catch(done)
36 | .then((json) => {
37 | expect(json.data.hello).toEqual('world');
38 | done();
39 | });
40 | });
41 | });
42 |
43 | describe('stubbing error response', () => {
44 | // Before each test, pretend we got an unsuccessful response
45 | beforeEach(() => {
46 | const res = new Response('', {
47 | status: 404,
48 | statusText: 'Not Found',
49 | headers: {
50 | 'Content-type': 'application/json',
51 | },
52 | });
53 |
54 | window.fetch.returns(Promise.resolve(res));
55 | });
56 |
57 | it('should catch errors', (done) => {
58 | request('/thisdoesntexist')
59 | .then((json) => {
60 | expect(json.err.response.status).toEqual(404);
61 | expect(json.err.response.statusText).toEqual('Not Found');
62 | done();
63 | });
64 | });
65 | });
66 | });
67 |
--------------------------------------------------------------------------------
/app/routes.js:
--------------------------------------------------------------------------------
1 | // These are the pages you can go to.
2 | // They are all wrapped in the App component, which should contain the navbar etc
3 | // See http://blog.mxstbr.com/2016/01/react-apps-with-pages for more information
4 | // about the code splitting business
5 | import { getAsyncInjectors } from './utils/asyncInjectors';
6 |
7 | const errorLoading = (err) => {
8 | console.error('Dynamic page loading failed', err); // eslint-disable-line no-console
9 | };
10 |
11 | const loadModule = (cb) => (componentModule) => {
12 | cb(null, componentModule.default);
13 | };
14 |
15 | export default function createRoutes(store) {
16 | // create reusable async injectors using getAsyncInjectors factory
17 | const { injectReducer, injectSagas } = getAsyncInjectors(store);
18 |
19 | return [
20 | {
21 | path: '/',
22 | name: 'home',
23 | getComponent(nextState, cb) {
24 | const importModules = Promise.all([
25 | System.import('containers/HomePage/reducer'),
26 | System.import('containers/HomePage/sagas'),
27 | System.import('containers/HomePage'),
28 | ]);
29 |
30 | const renderRoute = loadModule(cb);
31 |
32 | importModules.then(([reducer, sagas, component]) => {
33 | injectReducer('home', reducer.default);
34 | injectSagas('home', sagas.default);
35 |
36 | renderRoute(component);
37 | });
38 |
39 | importModules.catch(errorLoading);
40 | },
41 | }, {
42 | path: '/features',
43 | name: 'features',
44 | getComponent(nextState, cb) {
45 | System.import('containers/FeaturePage')
46 | .then(loadModule(cb))
47 | .catch(errorLoading);
48 | },
49 | }, {
50 | path: '*',
51 | name: 'notfound',
52 | getComponent(nextState, cb) {
53 | System.import('containers/NotFoundPage')
54 | .then(loadModule(cb))
55 | .catch(errorLoading);
56 | },
57 | },
58 | ];
59 | }
60 |
--------------------------------------------------------------------------------
/internals/config.js:
--------------------------------------------------------------------------------
1 | const resolve = require('path').resolve;
2 | const pullAll = require('lodash/pullAll');
3 | const uniq = require('lodash/uniq');
4 |
5 | const ReactBoilerplate = {
6 | // This refers to the react-boilerplate version this project is based on.
7 | version: '3.1.0',
8 |
9 | /**
10 | * The DLL Plugin provides a dramatic speed increase to webpack build and hot module reloading
11 | * by caching the module metadata for all of our npm dependencies. We enable it by default
12 | * in development.
13 | *
14 | *
15 | * To disable the DLL Plugin, set this value to false.
16 | */
17 | dllPlugin: {
18 | defaults: {
19 | /**
20 | * we need to exclude dependencies which are not intended for the browser
21 | * by listing them here.
22 | */
23 | exclude: [
24 | 'chalk',
25 | 'compression',
26 | 'cross-env',
27 | 'express',
28 | 'ip',
29 | 'minimist',
30 | 'sanitize.css',
31 | 'yarn'
32 | ],
33 |
34 | /**
35 | * Specify any additional dependencies here. We include core-js and lodash
36 | * since a lot of our dependencies depend on them and they get picked up by webpack.
37 | */
38 | include: ['core-js', 'eventsource-polyfill', 'babel-polyfill', 'lodash'],
39 |
40 | // The path where the DLL manifest and bundle will get built
41 | path: resolve('../node_modules/react-boilerplate-dlls'),
42 | },
43 |
44 | entry(pkg) {
45 | const dependencyNames = Object.keys(pkg.dependencies);
46 | const exclude = pkg.dllPlugin.exclude || ReactBoilerplate.dllPlugin.defaults.exclude;
47 | const include = pkg.dllPlugin.include || ReactBoilerplate.dllPlugin.defaults.include;
48 | const includeDependencies = uniq(dependencyNames.concat(include));
49 |
50 | return {
51 | reactBoilerplateDeps: pullAll(includeDependencies, exclude),
52 | };
53 | },
54 | },
55 | };
56 |
57 | module.exports = ReactBoilerplate;
58 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # From https://github.com/Danimoth/gitattributes/blob/master/Web.gitattributes
2 |
3 | # Handle line endings automatically for files detected as text
4 | # and leave all files detected as binary untouched.
5 | * text=auto
6 |
7 | #
8 | # The above will handle all files NOT found below
9 | #
10 |
11 | #
12 | ## These files are text and should be normalized (Convert crlf => lf)
13 | #
14 |
15 | # source code
16 | *.php text
17 | *.css text
18 | *.sass text
19 | *.scss text
20 | *.less text
21 | *.styl text
22 | *.js text eol=lf
23 | *.coffee text
24 | *.json text
25 | *.htm text
26 | *.html text
27 | *.xml text
28 | *.svg text
29 | *.txt text
30 | *.ini text
31 | *.inc text
32 | *.pl text
33 | *.rb text
34 | *.py text
35 | *.scm text
36 | *.sql text
37 | *.sh text
38 | *.bat text
39 |
40 | # templates
41 | *.ejs text
42 | *.hbt text
43 | *.jade text
44 | *.haml text
45 | *.hbs text
46 | *.dot text
47 | *.tmpl text
48 | *.phtml text
49 |
50 | # server config
51 | .htaccess text
52 |
53 | # git config
54 | .gitattributes text
55 | .gitignore text
56 | .gitconfig text
57 |
58 | # code analysis config
59 | .jshintrc text
60 | .jscsrc text
61 | .jshintignore text
62 | .csslintrc text
63 |
64 | # misc config
65 | *.yaml text
66 | *.yml text
67 | .editorconfig text
68 |
69 | # build config
70 | *.npmignore text
71 | *.bowerrc text
72 |
73 | # Heroku
74 | Procfile text
75 | .slugignore text
76 |
77 | # Documentation
78 | *.md text
79 | LICENSE text
80 | AUTHORS text
81 |
82 |
83 | #
84 | ## These files are binary and should be left untouched
85 | #
86 |
87 | # (binary is a macro for -text -diff)
88 | *.png binary
89 | *.jpg binary
90 | *.jpeg binary
91 | *.gif binary
92 | *.ico binary
93 | *.mov binary
94 | *.mp4 binary
95 | *.mp3 binary
96 | *.flv binary
97 | *.fla binary
98 | *.swf binary
99 | *.gz binary
100 | *.zip binary
101 | *.7z binary
102 | *.ttf binary
103 | *.eot binary
104 | *.woff binary
105 | *.pyc binary
106 | *.pdf binary
107 |
--------------------------------------------------------------------------------
/app/containers/RepoListItem/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * RepoListItem
3 | *
4 | * Lists the name and the issue count of a repository
5 | */
6 |
7 | import React from 'react';
8 | import { connect } from 'react-redux';
9 | import { createSelector } from 'reselect';
10 |
11 | import { FormattedNumber } from 'react-intl';
12 | import { selectCurrentUser } from 'containers/App/selectors';
13 | import ListItem from 'components/ListItem';
14 | import IssueIcon from 'components/IssueIcon';
15 | import A from 'components/A';
16 |
17 | import styles from './styles.css';
18 |
19 | export class RepoListItem extends React.Component { // eslint-disable-line react/prefer-stateless-function
20 | render() {
21 | const item = this.props.item;
22 | let nameprefix = '';
23 |
24 | // If the repository is owned by a different person than we got the data for
25 | // it's a fork and we should show the name of the owner
26 | if (item.owner.login !== this.props.currentUser) {
27 | nameprefix = `${item.owner.login}/`;
28 | }
29 |
30 | // Put together the content of the repository
31 | const content = (
32 |
33 |
38 | {nameprefix + item.name}
39 |
40 |
45 |
49 | );
50 |
51 | // Render the content into a list item
52 | return (
53 |
38 |
45 |
47 |
97 | );
98 | }
99 | }
100 | FeaturePage.propTypes = {
101 | changeRoute: React.PropTypes.func,
102 | };
103 |
104 | function mapDispatchToProps(dispatch) {
105 | return {
106 | changeRoute: (url) => dispatch(push(url)),
107 | };
108 | }
109 |
110 | export default connect(null, mapDispatchToProps)(FeaturePage);
111 |
--------------------------------------------------------------------------------
/app/containers/HomePage/tests/sagas.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Tests for HomePage sagas
3 | */
4 |
5 | import expect from 'expect';
6 | import { take, call, put, select, fork, cancel } from 'redux-saga/effects';
7 | import { LOCATION_CHANGE } from 'react-router-redux';
8 |
9 | import { getRepos, getReposWatcher, githubData } from '../sagas';
10 |
11 | import { LOAD_REPOS } from 'containers/App/constants';
12 | import { reposLoaded, repoLoadingError } from 'containers/App/actions';
13 |
14 | import request from 'utils/request';
15 | import { selectUsername } from 'containers/HomePage/selectors';
16 |
17 | const username = 'mxstbr';
18 |
19 | describe('getRepos Saga', () => {
20 | let getReposGenerator;
21 |
22 | // We have to test twice, once for a successful load and once for an unsuccessful one
23 | // so we do all the stuff that happens beforehand automatically in the beforeEach
24 | beforeEach(() => {
25 | getReposGenerator = getRepos();
26 |
27 | const selectDescriptor = getReposGenerator.next().value;
28 | expect(selectDescriptor).toEqual(select(selectUsername()));
29 |
30 | const requestURL = `https://api.github.com/users/${username}/repos?type=all&sort=updated`;
31 | const callDescriptor = getReposGenerator.next(username).value;
32 | expect(callDescriptor).toEqual(call(request, requestURL));
33 | });
34 |
35 | it('should dispatch the reposLoaded action if it requests the data successfully', () => {
36 | const response = {
37 | data: [{
38 | name: 'First repo',
39 | }, {
40 | name: 'Second repo',
41 | }],
42 | };
43 | const putDescriptor = getReposGenerator.next(response).value;
44 | expect(putDescriptor).toEqual(put(reposLoaded(response.data, username)));
45 | });
46 |
47 | it('should call the repoLoadingError action if the response errors', () => {
48 | const response = {
49 | err: 'Some error',
50 | };
51 | const putDescriptor = getReposGenerator.next(response).value;
52 | expect(putDescriptor).toEqual(put(repoLoadingError(response.err)));
53 | });
54 | });
55 |
56 | describe('getReposWatcher Saga', () => {
57 | const getReposWatcherGenerator = getReposWatcher();
58 |
59 | it('should watch for LOAD_REPOS action', () => {
60 | const takeDescriptor = getReposWatcherGenerator.next().value;
61 | expect(takeDescriptor).toEqual(take(LOAD_REPOS));
62 | });
63 |
64 | it('should invoke getRepos saga on actions', () => {
65 | const callDescriptor = getReposWatcherGenerator.next(put(LOAD_REPOS)).value;
66 | expect(callDescriptor).toEqual(call(getRepos));
67 | });
68 | });
69 |
70 | describe('githubDataSaga Saga', () => {
71 | const githubDataSaga = githubData();
72 |
73 | let forkDescriptor;
74 |
75 | it('should asyncronously fork getReposWatcher saga', () => {
76 | forkDescriptor = githubDataSaga.next();
77 | expect(forkDescriptor.value).toEqual(fork(getReposWatcher));
78 | });
79 |
80 | it('should yield until LOCATION_CHANGE action', () => {
81 | const takeDescriptor = githubDataSaga.next();
82 | expect(takeDescriptor.value).toEqual(take(LOCATION_CHANGE));
83 | });
84 |
85 | it('should finally cancel() the forked getReposWatcher saga',
86 | function* githubDataSagaCancellable() {
87 | // reuse open fork for more integrated approach
88 | forkDescriptor = githubDataSaga.next(put(LOCATION_CHANGE));
89 | expect(forkDescriptor.value).toEqual(cancel(forkDescriptor));
90 | }
91 | );
92 | });
93 |
--------------------------------------------------------------------------------
/internals/templates/app.js:
--------------------------------------------------------------------------------
1 | /**
2 | * app.js
3 | *
4 | * This is the entry file for the application, only setup and boilerplate
5 | * code.
6 | */
7 | import 'babel-polyfill';
8 |
9 | /* eslint-disable import/no-unresolved */
10 | // Load the manifest.json file and the .htaccess file
11 | import '!file?name=[name].[ext]!./manifest.json';
12 | import 'file?name=[name].[ext]!./.htaccess';
13 | /* eslint-enable import/no-unresolved */
14 |
15 | // Import all the third party stuff
16 | import React from 'react';
17 | import ReactDOM from 'react-dom';
18 | import { Provider } from 'react-redux';
19 | import { applyRouterMiddleware, Router, browserHistory } from 'react-router';
20 | import { syncHistoryWithStore } from 'react-router-redux';
21 | import useScroll from 'react-router-scroll';
22 | import LanguageProvider from 'containers/LanguageProvider';
23 | import configureStore from './store';
24 |
25 | // Import i18n messages
26 | import { translationMessages } from './i18n';
27 |
28 | // Import the CSS reset, which HtmlWebpackPlugin transfers to the build folder
29 | import 'sanitize.css/sanitize.css';
30 |
31 | // Create redux store with history
32 | // this uses the singleton browserHistory provided by react-router
33 | // Optionally, this could be changed to leverage a created history
34 | // e.g. `const browserHistory = useRouterHistory(createBrowserHistory)();`
35 | const initialState = {};
36 | const store = configureStore(initialState, browserHistory);
37 |
38 | // Sync history and store, as the react-router-redux reducer
39 | // is under the non-default key ("routing"), selectLocationState
40 | // must be provided for resolving how to retrieve the "route" in the state
41 | import { selectLocationState } from 'containers/App/selectors';
42 | const history = syncHistoryWithStore(browserHistory, store, {
43 | selectLocationState: selectLocationState(),
44 | });
45 |
46 | // Set up the router, wrapping all Routes in the App component
47 | import App from 'containers/App';
48 | import createRoutes from './routes';
49 | const rootRoute = {
50 | component: App,
51 | childRoutes: createRoutes(store),
52 | };
53 |
54 |
55 | const render = (translatedMessages) => {
56 | ReactDOM.render(
57 |
45 |
47 | -
48 |
-
49 |
50 |
52 |51 | 53 |
55 |54 |
56 |
57 | -
58 |
59 |
61 |60 | 62 |
64 |63 |
65 |
66 | -
67 |
68 |
70 |69 | 71 |
73 |72 |
74 |
75 | -
76 |
77 |
79 |78 | 80 |
82 |81 |
83 |
84 | -
85 |
86 |
88 |87 | 89 |
91 |90 |
92 |