├── .nvmrc
├── .dockerignore
├── .env
├── .vscode
    └── settings.json
├── netlify.toml
├── src
    ├── queries
    │   └── getHackerNewsTopStories.graphql
    ├── graphql
    │   ├── fragments.tsx
    │   └── index.tsx
    ├── global
    │   ├── styles.global.scss
    │   └── styles.ts
    ├── runner
    │   ├── build.ts
    │   ├── development.ts
    │   ├── static.ts
    │   ├── production.ts
    │   └── app.ts
    ├── components
    │   ├── example
    │   │   ├── dynamic.tsx
    │   │   ├── count.tsx
    │   │   ├── index.tsx
    │   │   └── hackernews.tsx
    │   ├── helpers
    │   │   └── scrollTop.tsx
    │   └── root.tsx
    ├── views
    │   ├── static.html
    │   └── ssr.tsx
    ├── webpack
    │   ├── static.ts
    │   ├── common.ts
    │   ├── server.ts
    │   ├── css.ts
    │   └── client.ts
    ├── lib
    │   ├── output.ts
    │   ├── stats.ts
    │   ├── apollo.ts
    │   └── hotServerMiddleware.ts
    └── entry
    │   ├── client.tsx
    │   └── server.tsx
├── types
    ├── global.d.ts
    ├── fonts.d.ts
    ├── microseconds.d.ts
    └── images.d.ts
├── .prettierignore
├── schema
    └── schema.graphql
├── codegen.yml
├── Dockerfile
├── .gitignore
├── index.ts
├── tsconfig.json
├── LICENSE
├── package.json
└── README.md


/.nvmrc:
--------------------------------------------------------------------------------
1 | v12.2.0
2 | 


--------------------------------------------------------------------------------
/.dockerignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .git
3 | .vscode
4 | dist


--------------------------------------------------------------------------------
/.env:
--------------------------------------------------------------------------------
1 | HOST=0.0.0.0
2 | GRAPHQL=https://graphqlhub.com/graphql
3 | WS_SUBSCRIPTIONS=0
4 | LOCAL_STORAGE_KEY=reactql


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "editor.tabSize": 2,
3 |   "typescript.tsdk": "node_modules/typescript/lib",
4 | }


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   command = "npm run build:static"
3 |   publish = "dist/public"
4 | 
5 | [[redirects]]
6 |   from = "/*"
7 |   to = "/index.html"
8 |   status = 200
9 | 


--------------------------------------------------------------------------------
/src/queries/getHackerNewsTopStories.graphql:
--------------------------------------------------------------------------------
 1 | query GetHackerNewsTopStories {
 2 |   hn {
 3 |     topStories {
 4 |       id
 5 |       title
 6 |       url
 7 |     }
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/types/global.d.ts:
--------------------------------------------------------------------------------
1 | // Globals
2 | declare var GRAPHQL: string;
3 | declare var SERVER: boolean;
4 | declare var WS_SUBSCRIPTIONS: boolean;
5 | declare var LOCAL_STORAGE_KEY: string;
6 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
 1 | # git
 2 | .github
 3 | **/.gitattributes
 4 | 
 5 | # editors
 6 | .vscode
 7 | *.un~
 8 | *.swp
 9 | 
10 | # NPM
11 | **/node_modules
12 | 
13 | # ext to ignore
14 | **/*.svg
15 | **/.DS_Store


--------------------------------------------------------------------------------
/schema/schema.graphql:
--------------------------------------------------------------------------------
 1 | type Story {
 2 |   id: String
 3 |   title: String
 4 |   url: String
 5 | }
 6 | 
 7 | type HackerNews {
 8 |   topStories: [Story]
 9 | }
10 | 
11 | type Query {
12 |   hn: HackerNews
13 | }
14 | 
15 | schema {
16 |   query: Query
17 | }
18 | 


--------------------------------------------------------------------------------
/types/fonts.d.ts:
--------------------------------------------------------------------------------
 1 | // Fonts
 2 | declare module "*.eot" {
 3 |   const value: string;
 4 |   export default value;
 5 | }
 6 | 
 7 | declare module "*.ttf" {
 8 |   const value: string;
 9 |   export default value;
10 | }
11 | 
12 | declare module "*.woff" {
13 |   const value: string;
14 |   export default value;
15 | }
16 | 


--------------------------------------------------------------------------------
/codegen.yml:
--------------------------------------------------------------------------------
 1 | overwrite: true
 2 | schema: "schema/schema.graphql"
 3 | documents: "src/**/*.graphql"
 4 | generates:
 5 |   src/graphql/index.tsx:
 6 |     plugins:
 7 |       - typescript
 8 |       - typescript-operations
 9 |       - typescript-react-apollo
10 |   src/graphql/fragments.tsx:
11 |     plugins:
12 |       - fragment-matcher
13 | 


--------------------------------------------------------------------------------
/src/graphql/fragments.tsx:
--------------------------------------------------------------------------------
 1 | export interface IntrospectionResultData {
 2 |   __schema: {
 3 |     types: {
 4 |       kind: string;
 5 |       name: string;
 6 |       possibleTypes: {
 7 |         name: string;
 8 |       }[];
 9 |     }[];
10 |   };
11 | }
12 | 
13 | const result: IntrospectionResultData = {
14 |   __schema: {
15 |     types: []
16 |   }
17 | };
18 | 
19 | export default result;
20 | 


--------------------------------------------------------------------------------
/types/microseconds.d.ts:
--------------------------------------------------------------------------------
 1 | declare module "microseconds" {
 2 |   interface Parsed {
 3 |     microseconds: number;
 4 |     milliseconds: number;
 5 |     seconds: number;
 6 |     minutes: number;
 7 |     hours: number;
 8 |     days: number;
 9 |     toString(): string;
10 |   }
11 |   function now(): number;
12 |   function parse(nano: number): Parsed;
13 |   function since(nano: number): number;
14 | }
15 | 


--------------------------------------------------------------------------------
/src/global/styles.global.scss:
--------------------------------------------------------------------------------
 1 | /* Regular @import url statements work as you'd expect them to -- alternatively
 2 | you can import locally, and they wind up in the resulting bundle */
 3 | @import url("https://fonts.googleapis.com/css?family=Gentium+Basic");
 4 | 
 5 | html {
 6 |   padding: 0;
 7 |   border: 0;
 8 |   font-family: "Gentium Basic", serif;
 9 |   font-size: 16px;
10 | 
11 |   /* We can nest rules, thanks to SASS */
12 |   li {
13 |     font-size: 2rem;
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/types/images.d.ts:
--------------------------------------------------------------------------------
 1 | // Images
 2 | declare module "*.png" {
 3 |   const value: string;
 4 |   export default value;
 5 | }
 6 | 
 7 | declare module "*.jpg" {
 8 |   const value: string;
 9 |   export default value;
10 | }
11 | 
12 | declare module "*.jpeg" {
13 |   const value: string;
14 |   export default value;
15 | }
16 | 
17 | declare module "*.gif" {
18 |   const value: string;
19 |   export default value;
20 | }
21 | 
22 | declare module "*.svg" {
23 |   const value: string;
24 |   export default value;
25 | }
26 | 


--------------------------------------------------------------------------------
/src/runner/build.ts:
--------------------------------------------------------------------------------
 1 | // Runner (production)
 2 | 
 3 | // ----------------------------------------------------------------------------
 4 | // IMPORTS
 5 | 
 6 | /* NPM */
 7 | import chalk from "chalk";
 8 | 
 9 | /* Local */
10 | import { build, common } from "./app";
11 | 
12 | // ----------------------------------------------------------------------------
13 | 
14 | common.spinner.info(chalk.bgBlue("Build mode"));
15 | 
16 | void (async () => {
17 |   await build();
18 |   common.spinner.succeed("Finished building");
19 | })();
20 | 


--------------------------------------------------------------------------------
/src/components/example/dynamic.tsx:
--------------------------------------------------------------------------------
 1 | // Dynamic component that's loaded by `await import("./dynamic")`
 2 | 
 3 | // ----------------------------------------------------------------------------
 4 | // IMPORTS
 5 | 
 6 | /* NPM */
 7 | 
 8 | import React from "react";
 9 | 
10 | // ----------------------------------------------------------------------------
11 | 
12 | // Say hello from GraphQL, along with a HackerNews feed fetched by GraphQL
13 | const Dynamic: React.FunctionComponent = () => (
14 |   <>
15 |     <h2>This component was loaded dynamically!</h2>
16 |   </>
17 | );
18 | 
19 | export default Dynamic;
20 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM node:12.2.0-alpine AS builder
 2 | 
 3 | # log most things
 4 | ENV NPM_CONFIG_LOGLEVEL notice
 5 | 
 6 | # OS packages for compilation
 7 | RUN apk add --no-cache python2 make g++
 8 | 
 9 | # install NPM packages
10 | WORKDIR /build
11 | ADD package*.json ./
12 | RUN npm i
13 | 
14 | # add source
15 | ADD . .
16 | 
17 | # build
18 | RUN npm run build:production
19 | 
20 | ########################
21 | 
22 | FROM node:12.2.0-alpine
23 | WORKDIR /app
24 | 
25 | # copy source + compiled `node_modules` 
26 | COPY --from=builder /build .
27 | 
28 | # by default, run in production mode
29 | CMD npm run production


--------------------------------------------------------------------------------
/src/runner/development.ts:
--------------------------------------------------------------------------------
 1 | // Runner (development)
 2 | 
 3 | // ----------------------------------------------------------------------------
 4 | // IMPORTS
 5 | 
 6 | /* NPM */
 7 | import chalk from "chalk";
 8 | 
 9 | /* Local */
10 | import hotServerMiddleware from "../lib/hotServerMiddleware";
11 | import { app, common, compiler, devServer } from "./app";
12 | 
13 | // ----------------------------------------------------------------------------
14 | 
15 | common.spinner
16 |   .info(chalk.magenta("Development mode"))
17 |   .info("Building development server...");
18 | 
19 | app.listen({ port: common.port, host: common.host }, async () => {
20 |   await devServer(app, compiler);
21 |   app.use(hotServerMiddleware(compiler));
22 | });
23 | 


--------------------------------------------------------------------------------
/src/views/static.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" prefix="og: http://ogp.me/ns#">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title><%= htmlWebpackPlugin.options.title%></title>
 8 |     <% for (var css in htmlWebpackPlugin.files.css) { %>
 9 |     <link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet" />
10 |     <% } %>
11 |   </head>
12 |   <body>
13 |     <div id="root"></div>
14 |     <% for (const chunk in htmlWebpackPlugin.files.chunks) { %>
15 |     <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
16 |     <% } %>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/src/components/helpers/scrollTop.tsx:
--------------------------------------------------------------------------------
 1 | // Scroll to the top of the window
 2 | 
 3 | // -----------------------------------------------------------------------------
 4 | // IMPORTS
 5 | 
 6 | /* NPM */
 7 | import React from "react";
 8 | import { RouteComponentProps, withRouter } from "react-router-dom";
 9 | 
10 | // -----------------------------------------------------------------------------
11 | 
12 | class ScrollTop extends React.PureComponent<RouteComponentProps<any>> {
13 |   public componentDidUpdate(prevProps: RouteComponentProps<any>) {
14 |     if (this.props.location !== prevProps.location) {
15 |       window.scrollTo(0, 0);
16 |     }
17 |   }
18 | 
19 |   public render() {
20 |     return this.props.children;
21 |   }
22 | }
23 | 
24 | export default withRouter(ScrollTop);
25 | 


--------------------------------------------------------------------------------
/src/components/example/count.tsx:
--------------------------------------------------------------------------------
 1 | // ReactQL local state counter example
 2 | 
 3 | // ----------------------------------------------------------------------------
 4 | // IMPORTS
 5 | 
 6 | /* NPM */
 7 | import React from "react";
 8 | import { Observer, useObservable } from "mobx-react-lite";
 9 | 
10 | // ----------------------------------------------------------------------------
11 | 
12 | export const Count: React.FunctionComponent = () => {
13 |   const store = useObservable({ count: 0 });
14 |   return (
15 |     <>
16 |       <Observer>
17 |         {() => <h3>Current count (from MobX): {store.count}</h3>}
18 |       </Observer>
19 |       <button onClick={() => store.count++}>Increment</button>
20 |       <button onClick={() => (store.count = 0)}>Reset</button>
21 |     </>
22 |   );
23 | };
24 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Meta
 2 | **/.DS_Store
 3 | 
 4 | # Logs
 5 | logs
 6 | *.log
 7 | npm-debug.log*
 8 | 
 9 | # Runtime data
10 | pids
11 | *.pid
12 | *.seed
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # node-waf configuration
27 | .lock-wscript
28 | 
29 | # Compiled binary addons (http://nodejs.org/api/addons.html)
30 | build/Release
31 | 
32 | # Dependency directories
33 | node_modules
34 | jspm_packages
35 | 
36 | # Optional npm cache directory
37 | .npm
38 | 
39 | # Optional REPL history
40 | .node_repl_history
41 | 
42 | # Distribution
43 | dist
44 | 


--------------------------------------------------------------------------------
/index.ts:
--------------------------------------------------------------------------------
 1 | import * as path from "path";
 2 | import * as fs from "fs";
 3 | 
 4 | // Load env vars, for the `GRAPHQL` endpoint and anything else we need
 5 | require("dotenv").config();
 6 | 
 7 | // Catch CTRL/CMD+C interrupts cleanly
 8 | const signals: NodeJS.Signals[] = [
 9 |   "SIGHUP",
10 |   "SIGINT",
11 |   "SIGQUIT",
12 |   "SIGABRT",
13 |   "SIGTERM"
14 | ];
15 | 
16 | signals.forEach(s => process.on(s, () => process.exit(0)));
17 | 
18 | // Check that we have a specified Webpack runner
19 | if (!process.env.RUNNER) {
20 |   console.error("No Webpack runner specified");
21 |   process.exit(1);
22 | }
23 | 
24 | // Path to runner
25 | const script = path.resolve("./src/runner", `${process.env.RUNNER!}.ts`);
26 | 
27 | // Check that the runner exists
28 | if (!fs.existsSync(script)) {
29 |   console.error(`Runner doesn't exist: ${script}`);
30 |   process.exit(1);
31 | }
32 | 
33 | // Start the script
34 | require(script);
35 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     // Incremental mode
 4 |     "incremental": true,
 5 |     // Target latest version of ECMAScript.
 6 |     "target": "esnext",
 7 |     // Search under node_modules for non-relative imports.
 8 |     "moduleResolution": "node",
 9 |     // Set module format
10 |     "module": "commonjs",
11 |     // Process & infer types from .js files.
12 |     "allowJs": true,
13 |     // Don't emit; allow Babel to transform files.
14 |     "noEmit": true,
15 |     // Enable strictest settings like strictNullChecks & noImplicitAny.
16 |     "strict": true,
17 |     // Import non-ES modules as default imports.
18 |     "esModuleInterop": true,
19 |     // Enable React
20 |     "jsx": "preserve",
21 |     // Set the base path
22 |     "baseUrl": ".",
23 |     // Source paths
24 |     "paths": {
25 |       "@/*": ["src/*"],
26 |       "microseconds": ["types/microseconds.d.ts"]
27 |     }
28 |   },
29 |   "include": ["src", "types"]
30 | }
31 | 


--------------------------------------------------------------------------------
/src/webpack/static.ts:
--------------------------------------------------------------------------------
 1 | // Webpack (static bundling)
 2 | 
 3 | // ----------------------------------------------------------------------------
 4 | // IMPORTS
 5 | 
 6 | /* NPM */
 7 | 
 8 | import { mergeWith } from "lodash";
 9 | import webpack from "webpack";
10 | import {} from "webpack-dev-server";
11 | 
12 | // Plugin for generating `index.html` file for static hosting
13 | import HtmlWebpackPlugin from "html-webpack-plugin";
14 | 
15 | /* Local */
16 | 
17 | // Common config
18 | import { defaultMerger } from "./common";
19 | 
20 | // Get the client-side config as a base to extend
21 | import client from "./client";
22 | 
23 | // ----------------------------------------------------------------------------
24 | 
25 | // Augment client-side config with HtmlWebPackPlugin
26 | const base: webpack.Configuration = {
27 |   plugins: [
28 |     new HtmlWebpackPlugin({
29 |       inject: false,
30 |       template: "src/views/static.html",
31 |       title: "ReactQL app"
32 |     })
33 |   ]
34 | };
35 | 
36 | export default mergeWith({}, client, base, defaultMerger);
37 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2007-2018 Lee Benson
 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.
22 | 


--------------------------------------------------------------------------------
/src/global/styles.ts:
--------------------------------------------------------------------------------
 1 | /* tslint:disable no-unused-expression */
 2 | 
 3 | // Global styles
 4 | 
 5 | /*
 6 |   By default, this file does two things:
 7 | 
 8 |   1. Importing `styles.global.scss` will tell Webpack to generate a `main.css`
 9 |    which is automatically included along with our SSR / initial HTML. This
10 |    is for processing CSS through the SASS/LESS -> PostCSS pipeline.
11 | 
12 |   2. It exports a global styles template which is used by Emotion to generate
13 |   styles that apply to all pages.
14 | /*
15 | 
16 | // ----------------------------------------------------------------------------
17 | // IMPORTS
18 | 
19 | /* NPM */
20 | import { css } from "@emotion/core";
21 | 
22 | /* Local */
23 | 
24 | // Import global SASS styles that you want to be rendered into the
25 | // resulting `main.css` file included with the initial render. If you don't
26 | // want a CSS file to be generated, you can comment out this line
27 | import "./styles.global.scss";
28 | 
29 | // ----------------------------------------------------------------------------
30 | 
31 | // Global styles to apply
32 | export default css`
33 |   /* Make all <h1> tags orange  */
34 |   h1 {
35 |     background-color: orange;
36 |   }
37 | `;
38 | 


--------------------------------------------------------------------------------
/src/lib/output.ts:
--------------------------------------------------------------------------------
 1 | /*
 2 |   An `Output` instance is passed through to the Webpack entry point,
 3 |   when is then responsible for orchestrating middleware, routes or other
 4 |   functions within the Webpack'd environment
 5 | */
 6 | 
 7 | // ----------------------------------------------------------------------------
 8 | // IMPORTS
 9 | 
10 | /* Local */
11 | import Stats from "./stats";
12 | 
13 | // ----------------------------------------------------------------------------
14 | 
15 | // Types
16 | export interface IOutput {
17 |   client: Stats;
18 |   server: Stats;
19 | }
20 | 
21 | // Config cache
22 | const config = new WeakMap<Output, IOutput>();
23 | 
24 | export default class Output {
25 |   // --------------------------------------------------------------------------
26 |   /* PUBLIC METHODS */
27 |   // --------------------------------------------------------------------------
28 | 
29 |   /* CONSTRUCTOR */
30 |   public constructor(c: IOutput) {
31 |     config.set(this, c);
32 |   }
33 | 
34 |   /* GETTERS */
35 | 
36 |   // Return the Webpack client build stats
37 |   public get client() {
38 |     return config.get(this)!.client;
39 |   }
40 | 
41 |   // Return the Webpack server build stats
42 |   public get server() {
43 |     return config.get(this)!.server;
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/src/components/root.tsx:
--------------------------------------------------------------------------------
 1 | // Root entry point
 2 | 
 3 | // ----------------------------------------------------------------------------
 4 | // IMPORTS
 5 | 
 6 | /* NPM */
 7 | import React from "react";
 8 | import Helmet from "react-helmet";
 9 | import { hot } from "react-hot-loader/root";
10 | import { Route, Switch } from "react-router-dom";
11 | import { Global } from "@emotion/core";
12 | 
13 | /* Local */
14 | 
15 | // Components
16 | import ScrollTop from "@/components/helpers/scrollTop";
17 | 
18 | // Global styles
19 | import globalStyles from "@/global/styles";
20 | 
21 | // By default, pull in the ReactQL example. In your own project, just nix
22 | // the `src/components/example` folder and replace the following line with
23 | // your own React components
24 | import Example from "@/components/example";
25 | 
26 | // ----------------------------------------------------------------------------
27 | 
28 | const Root: React.FunctionComponent = () => (
29 |   <div>
30 |     <Global styles={globalStyles} />
31 |     <Helmet>
32 |       <title>ReactQL starter kit - edit me!</title>
33 |     </Helmet>
34 |     <ScrollTop>
35 |       <Switch>
36 |         <Route path="/" exact component={Example} />
37 |       </Switch>
38 |     </ScrollTop>
39 |   </div>
40 | );
41 | 
42 | export default hot(Root);
43 | 


--------------------------------------------------------------------------------
/src/entry/client.tsx:
--------------------------------------------------------------------------------
 1 | // Client entry point
 2 | 
 3 | // ----------------------------------------------------------------------------
 4 | // IMPORTS
 5 | 
 6 | /* NPM */
 7 | 
 8 | // Create browser history, for navigation a la single page apps
 9 | import { createBrowserHistory } from "history";
10 | 
11 | // React, our UI engine
12 | import React from "react";
13 | 
14 | // HOC for enabling Apollo GraphQL `<Query>` and `<Mutation>`
15 | import { ApolloProvider } from "react-apollo";
16 | 
17 | // Attach React to the browser DOM
18 | import ReactDOM from "react-dom";
19 | 
20 | // Single page app routing
21 | import { Router } from "react-router-dom";
22 | 
23 | /* Local */
24 | 
25 | // Our main component, and the starting point for server/browser loading
26 | import Root from "@/components/root";
27 | 
28 | // Helper function that creates a new Apollo client per request
29 | import { createClient } from "@/lib/apollo";
30 | 
31 | // ----------------------------------------------------------------------------
32 | 
33 | // Create Apollo client
34 | const client = createClient();
35 | 
36 | // Create a browser history
37 | const history = createBrowserHistory();
38 | 
39 | // Render
40 | const root = document.getElementById("root")!;
41 | ReactDOM[root.innerHTML ? "hydrate" : "render"](
42 |   <ApolloProvider client={client}>
43 |     <Router history={history}>
44 |       <Root />
45 |     </Router>
46 |   </ApolloProvider>,
47 |   document.getElementById("root")
48 | );
49 | 


--------------------------------------------------------------------------------
/src/runner/static.ts:
--------------------------------------------------------------------------------
 1 | // Runner (static)
 2 | 
 3 | // ----------------------------------------------------------------------------
 4 | // IMPORTS
 5 | 
 6 | /* Node */
 7 | import path from "path";
 8 | 
 9 | /* NPM */
10 | import chalk from "chalk";
11 | 
12 | /* Local */
13 | import { build, common, app, staticCompiler, devServer } from "./app";
14 | import clientConfig from "../webpack/client";
15 | 
16 | // ----------------------------------------------------------------------------
17 | 
18 | common.spinner.info(chalk.bgBlue("Static mode"));
19 | 
20 | void (async () => {
21 |   // Production?
22 |   if (common.isProduction) {
23 |     common.spinner.info("Building production files...");
24 |     await build(true /* build in static mode */);
25 |     common.spinner.succeed("Finished building");
26 |     return;
27 |   }
28 | 
29 |   // Development...
30 |   common.spinner.info("Building development server...");
31 | 
32 |   app.listen({ port: common.port, host: common.host }, async () => {
33 |     // Build the static dev server
34 |     const middleware = await devServer(app, staticCompiler);
35 | 
36 |     // Fallback to /index.html on 404 routes, for client-side SPAs
37 |     app.use(async ctx => {
38 |       const filename = path.resolve(clientConfig.output.path, "index.html");
39 |       ctx.response.type = "html";
40 |       ctx.response.body = middleware.devMiddleware.fileSystem.createReadStream(
41 |         filename
42 |       );
43 |     });
44 |   });
45 | })();
46 | 


--------------------------------------------------------------------------------
/src/components/example/index.tsx:
--------------------------------------------------------------------------------
 1 | // ReactQL example page - delete this folder for your own project!
 2 | 
 3 | // ----------------------------------------------------------------------------
 4 | // IMPORTS
 5 | 
 6 | /* NPM */
 7 | 
 8 | import React from "react";
 9 | 
10 | /* Local */
11 | 
12 | // Counter, controlled by local Apollo state
13 | import { Count } from "./count";
14 | 
15 | // Hacker News GraphQL example
16 | import { HackerNews } from "./hackernews";
17 | 
18 | // ----------------------------------------------------------------------------
19 | 
20 | interface IIndexState {
21 |   dynamic: React.SFC | null;
22 | }
23 | 
24 | // Say hello from GraphQL, along with a HackerNews feed fetched by GraphQL
25 | class Index extends React.PureComponent<{}, IIndexState> {
26 |   public state = {
27 |     dynamic: null
28 |   };
29 | 
30 |   public componentDidMount = async () => {
31 |     // Fetch the component dynamically
32 |     const dynamic = await import("./dynamic");
33 | 
34 |     // ... and keep ahold of it locally
35 |     this.setState({
36 |       dynamic: dynamic.default
37 |     });
38 |   };
39 | 
40 |   public render() {
41 |     const DynamicComponent = this.state.dynamic || (() => <h2>Loading...</h2>);
42 | 
43 |     return (
44 |       <>
45 |         {/* Note: The <h1> style will have a yellow background due to @/global/styles.ts! */}
46 |         <h1>Hi from ReactQL</h1>
47 |         <DynamicComponent />
48 |         <Count />
49 |         <HackerNews />
50 |       </>
51 |     );
52 |   }
53 | }
54 | 
55 | export default Index;
56 | 


--------------------------------------------------------------------------------
/src/runner/production.ts:
--------------------------------------------------------------------------------
 1 | // Runner (production)
 2 | 
 3 | // ----------------------------------------------------------------------------
 4 | // IMPORTS
 5 | 
 6 | /* Node */
 7 | import fs from "fs";
 8 | 
 9 | /* NPM */
10 | import chalk from "chalk";
11 | 
12 | /* Local */
13 | import Output from "../lib/output";
14 | import Stats, { IStats } from "../lib/stats";
15 | import { app, build, common } from "./app";
16 | 
17 | // ----------------------------------------------------------------------------
18 | 
19 | function getStats(file: string): IStats {
20 |   return JSON.parse(fs.readFileSync(file, "utf8")) as IStats;
21 | }
22 | 
23 | common.spinner.info(chalk.green("Production mode"));
24 | 
25 | void (async () => {
26 |   // Get a list of file accessibility
27 |   const files = Object.values(common.compiled).map(file => {
28 |     try {
29 |       fs.accessSync(file);
30 |       return true;
31 |     } catch (_e) {
32 |       return false;
33 |     }
34 |   });
35 | 
36 |   // Compile the server if we don't have all the expected files
37 |   if (!files.every(file => file)) {
38 |     common.spinner.info("Building production server...");
39 |     await build();
40 |   } else {
41 |     common.spinner.info("Using cached build files");
42 |   }
43 | 
44 |   // Create an Output
45 |   const output = new Output({
46 |     client: new Stats(getStats(common.compiled.clientStats)),
47 |     server: new Stats(getStats(common.compiled.serverStats))
48 |   });
49 | 
50 |   // Attach middleware
51 |   app.use(require(common.compiled.server).default(output));
52 | 
53 |   app.listen(common.port, () => {
54 |     common.spinner.succeed(`Running on http://localhost:${common.port}`);
55 |   });
56 | })();
57 | 


--------------------------------------------------------------------------------
/src/lib/stats.ts:
--------------------------------------------------------------------------------
 1 | /*
 2 |   A `Stats` instance wraps client/server Webpack stats to provide
 3 |   helper functions to obtain chunk names, etc.
 4 | */
 5 | 
 6 | // ----------------------------------------------------------------------------
 7 | // IMPORTS
 8 | 
 9 | /* NPM */
10 | import lodash from "lodash";
11 | 
12 | // ----------------------------------------------------------------------------
13 | 
14 | export interface IStats {
15 |   assetsByChunkName?: {
16 |     main: string | string[];
17 |   };
18 | }
19 | 
20 | // Config for `Stats` instances
21 | const config = new WeakMap<Stats, IStats>();
22 | 
23 | export default class Stats {
24 |   // --------------------------------------------------------------------------
25 |   /* PUBLIC METHODS */
26 |   // --------------------------------------------------------------------------
27 | 
28 |   /* CONSTRUCTOR */
29 |   public constructor(stats: IStats = {}) {
30 |     // Store a raw copy of the config
31 |     config.set(this, stats);
32 |   }
33 | 
34 |   /* GETTERS */
35 | 
36 |   // Get the full, raw stats
37 |   public get raw(): any {
38 |     return config.get(this)!;
39 |   }
40 | 
41 |   // Get main built asset based on file extension
42 |   public main(ext: string): string | undefined {
43 |     const main: string | string[] = lodash.get(
44 |       config.get(this)!,
45 |       "assetsByChunkName.main",
46 |       []
47 |     );
48 |     const file = (Array.isArray(main) ? main : [main]).find((c: string) =>
49 |       c.endsWith(`.${ext}`)
50 |     );
51 |     return file && `/${file}`;
52 |   }
53 | 
54 |   public scripts(): string[] {
55 |     const initial = this.raw.chunks.find((chunk: any) => chunk.initial);
56 | 
57 |     const scripts: string[] = initial.siblings
58 |       .map((sibling: any) =>
59 |         this.raw.chunks.find((chunk: any) => chunk.id === sibling)
60 |       )
61 |       .map((sibling: any) => sibling.files)
62 |       .concat(initial.files)
63 |       .flat()
64 |       .filter((file: string) => file.endsWith(".js"))
65 |       .map((file: string) => `/${file}`);
66 | 
67 |     return scripts;
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/src/views/ssr.tsx:
--------------------------------------------------------------------------------
 1 | // Server-side HTML render
 2 | 
 3 | // Component to render the full HTML response in React
 4 | 
 5 | // ----------------------------------------------------------------------------
 6 | // IMPORTS
 7 | 
 8 | /* NPM */
 9 | import React from "react";
10 | import { HelmetData } from "react-helmet";
11 | 
12 | // ----------------------------------------------------------------------------
13 | 
14 | // Types
15 | 
16 | export interface IHtmlProps {
17 |   css?: string;
18 |   helmet: HelmetData;
19 |   html: string;
20 |   scripts: string[];
21 |   styles?: Array<React.ReactElement<{}>>;
22 |   window?: {
23 |     [key: string]: object;
24 |   };
25 | }
26 | 
27 | export default class Html extends React.PureComponent<IHtmlProps> {
28 |   public render() {
29 |     const { css, helmet, html, scripts, styles, window = {} } = this.props;
30 |     return (
31 |       <html
32 |         lang="en"
33 |         prefix="og: http://ogp.me/ns#"
34 |         {...helmet.htmlAttributes.toString()}
35 |       >
36 |         <head>
37 |           {helmet.title.toComponent()}
38 |           <meta charSet="utf-8" />
39 |           <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
40 |           <meta httpEquiv="Content-Language" content="en" />
41 |           <meta name="viewport" content="width=device-width, initial-scale=1" />
42 |           {helmet.meta.toComponent()}
43 |           {helmet.style.toComponent()}
44 |           {helmet.link.toComponent()}
45 |           {css && <link rel="stylesheet" href={css} />}
46 |           {styles}
47 |           {helmet.script.toComponent()}
48 |           {helmet.noscript.toComponent()}
49 |         </head>
50 |         <body {...helmet.bodyAttributes.toComponent()}>
51 |           <div id="root" dangerouslySetInnerHTML={{ __html: html }} />
52 |           <script
53 |             dangerouslySetInnerHTML={{
54 |               __html: Object.keys(window).reduce(
55 |                 (out, key) =>
56 |                   (out += `window.${key}=${JSON.stringify(window[key])};`),
57 |                 ""
58 |               )
59 |             }}
60 |           />
61 |         </body>
62 |         {scripts.map(script => (
63 |           <script key={script} src={script} />
64 |         ))}
65 |       </html>
66 |     );
67 |   }
68 | }
69 | 


--------------------------------------------------------------------------------
/src/components/example/hackernews.tsx:
--------------------------------------------------------------------------------
 1 | // ReactQL Hacker News GraphQL example
 2 | 
 3 | // ----------------------------------------------------------------------------
 4 | // IMPORTS
 5 | 
 6 | /* NPM */
 7 | import React from "react";
 8 | 
 9 | // Emotion styled component
10 | import styled from "@emotion/styled";
11 | 
12 | /* Local */
13 | 
14 | // Query to get top stories from HackerNews
15 | import { GetHackerNewsTopStoriesComponent } from "@/graphql";
16 | 
17 | // ----------------------------------------------------------------------------
18 | 
19 | // Unstyled Emotion parent block, to avoid repeating <style> tags
20 | // on child elements -- see https://github.com/emotion-js/emotion/issues/1061
21 | const List = styled.ul``;
22 | 
23 | // Style the list item so it overrides the default font
24 | const Story = styled("li")`
25 |   font-size: 16px;
26 | 
27 |   a:hover {
28 |     /* shows an example of how we can use themes */
29 |     color: orange;
30 |   }
31 | `;
32 | 
33 | // Execute the GraphQL query. With SSR, the server will await the returned
34 | // result before rendering out the initial HTML. On the browser, it will re-use
35 | // whatever the server has sent it - or, if it's a client-navigated route that
36 | // doesn't already have data from the server -- it'll display a loading message
37 | // while the data is being retrieved
38 | export const HackerNews: React.FunctionComponent = () => (
39 |   <GetHackerNewsTopStoriesComponent>
40 |     {({ data, loading, error }) => {
41 |       // Any errors? Say so!
42 |       if (error) {
43 |         return <h1>Error retrieving news stories! &mdash; {error}</h1>;
44 |       }
45 | 
46 |       // If the data is still loading, return with a basic
47 |       // message to alert the user
48 |       if (loading) {
49 |         return <h1>Loading Hacker News stories...</h1>;
50 |       }
51 | 
52 |       // Otherwise, we have data to work with... map over it with a
53 |       // bullet-point list
54 |       return (
55 |         <>
56 |           <h3>Top stories from Hacker News</h3>
57 |           <List>
58 |             {data!.hn!.topStories!.map(story => (
59 |               <Story key={story!.id!}>
60 |                 <a href={story!.url!} target="_blank">
61 |                   {story!.title}
62 |                 </a>
63 |               </Story>
64 |             ))}
65 |           </List>
66 |         </>
67 |       );
68 |     }}
69 |   </GetHackerNewsTopStoriesComponent>
70 | );
71 | 


--------------------------------------------------------------------------------
/src/graphql/index.tsx:
--------------------------------------------------------------------------------
 1 | type Maybe<T> = T | null;
 2 | /** All built-in and custom scalars, mapped to their actual values */
 3 | export type Scalars = {
 4 |   ID: string;
 5 |   String: string;
 6 |   Boolean: boolean;
 7 |   Int: number;
 8 |   Float: number;
 9 | };
10 | 
11 | export type HackerNews = {
12 |   topStories?: Maybe<Array<Maybe<Story>>>;
13 | };
14 | 
15 | export type Query = {
16 |   hn?: Maybe<HackerNews>;
17 | };
18 | 
19 | export type Story = {
20 |   id?: Maybe<Scalars["String"]>;
21 |   title?: Maybe<Scalars["String"]>;
22 |   url?: Maybe<Scalars["String"]>;
23 | };
24 | export type GetHackerNewsTopStoriesQueryVariables = {};
25 | 
26 | export type GetHackerNewsTopStoriesQuery = { __typename?: "Query" } & {
27 |   hn: Maybe<
28 |     { __typename?: "HackerNews" } & {
29 |       topStories: Maybe<
30 |         Array<
31 |           Maybe<{ __typename?: "Story" } & Pick<Story, "id" | "title" | "url">>
32 |         >
33 |       >;
34 |     }
35 |   >;
36 | };
37 | 
38 | import gql from "graphql-tag";
39 | import * as React from "react";
40 | import * as ReactApollo from "react-apollo";
41 | 
42 | export const GetHackerNewsTopStoriesDocument = gql`
43 |   query GetHackerNewsTopStories {
44 |     hn {
45 |       topStories {
46 |         id
47 |         title
48 |         url
49 |       }
50 |     }
51 |   }
52 | `;
53 | 
54 | export class GetHackerNewsTopStoriesComponent extends React.Component<
55 |   Partial<
56 |     ReactApollo.QueryProps<
57 |       GetHackerNewsTopStoriesQuery,
58 |       GetHackerNewsTopStoriesQueryVariables
59 |     >
60 |   >
61 | > {
62 |   render() {
63 |     return (
64 |       <ReactApollo.Query<
65 |         GetHackerNewsTopStoriesQuery,
66 |         GetHackerNewsTopStoriesQueryVariables
67 |       >
68 |         query={GetHackerNewsTopStoriesDocument}
69 |         {...(this as any)["props"] as any}
70 |       />
71 |     );
72 |   }
73 | }
74 | export type GetHackerNewsTopStoriesProps<TChildProps = {}> = Partial<
75 |   ReactApollo.DataProps<
76 |     GetHackerNewsTopStoriesQuery,
77 |     GetHackerNewsTopStoriesQueryVariables
78 |   >
79 | > &
80 |   TChildProps;
81 | export function withGetHackerNewsTopStories<TProps, TChildProps = {}>(
82 |   operationOptions:
83 |     | ReactApollo.OperationOption<
84 |         TProps,
85 |         GetHackerNewsTopStoriesQuery,
86 |         GetHackerNewsTopStoriesQueryVariables,
87 |         GetHackerNewsTopStoriesProps<TChildProps>
88 |       >
89 |     | undefined
90 | ) {
91 |   return ReactApollo.withQuery<
92 |     TProps,
93 |     GetHackerNewsTopStoriesQuery,
94 |     GetHackerNewsTopStoriesQueryVariables,
95 |     GetHackerNewsTopStoriesProps<TChildProps>
96 |   >(GetHackerNewsTopStoriesDocument, operationOptions);
97 | }
98 | 


--------------------------------------------------------------------------------
/src/webpack/common.ts:
--------------------------------------------------------------------------------
  1 | // Webpack (common)
  2 | 
  3 | // ----------------------------------------------------------------------------
  4 | // IMPORTS
  5 | 
  6 | /* Node */
  7 | import path from "path";
  8 | 
  9 | /* NPM */
 10 | import lodash from "lodash";
 11 | import webpack from "webpack";
 12 | 
 13 | // ----------------------------------------------------------------------------
 14 | 
 15 | const root = path.resolve(__dirname, "..", "..");
 16 | 
 17 | // Default merge customiser
 18 | export function defaultMerger(
 19 |   obj: any,
 20 |   src: any,
 21 |   key: any,
 22 |   _object: any,
 23 |   _source: any,
 24 |   _stack: any
 25 | ) {
 26 |   // Merge rules
 27 |   if (key === "rules" && [obj, src].every(v => Array.isArray(v))) {
 28 |     src.forEach((v: webpack.Rule, _i: number) => {
 29 |       const existingTest = (obj as webpack.Rule[]).find(
 30 |         rule => String(rule.test) === String(v.test)
 31 |       );
 32 | 
 33 |       if (existingTest) {
 34 |         lodash.mergeWith(existingTest, v, defaultMerger);
 35 |       } else {
 36 |         obj.push(v);
 37 |       }
 38 |     });
 39 | 
 40 |     return obj;
 41 |   }
 42 | 
 43 |   // By default, merge arrays
 44 |   if (Array.isArray(obj)) {
 45 |     return obj.concat(src);
 46 |   }
 47 | }
 48 | 
 49 | const isProduction = process.env.NODE_ENV === "production";
 50 | 
 51 | // RegExp for file types
 52 | export const files = {
 53 |   fonts: /\.(woff|woff2|(o|t)tf|eot)$/i,
 54 |   images: /\.(jpe?g|png|gif|svg)$/i
 55 | };
 56 | 
 57 | // Common config
 58 | export default (_ssr: boolean /* <-- not currently used */) => {
 59 |   const common: webpack.Configuration = {
 60 |     mode: isProduction ? "production" : "development",
 61 |     module: {
 62 |       rules: [
 63 |         // Typescript
 64 |         {
 65 |           exclude: /node_modules/,
 66 |           test: /\.(j|t)sx?$/i,
 67 |           use: [
 68 |             {
 69 |               loader: "babel-loader",
 70 |               options: {
 71 |                 cacheDirectory: true,
 72 |                 presets: ["@babel/typescript", "@babel/react"],
 73 |                 plugins: [
 74 |                   ["@babel/proposal-class-properties", { loose: true }],
 75 |                   "@babel/proposal-object-rest-spread",
 76 |                   "@babel/plugin-syntax-dynamic-import",
 77 |                   "react-hot-loader/babel",
 78 |                   "emotion"
 79 |                 ]
 80 |               }
 81 |             }
 82 |           ]
 83 |         }
 84 |       ]
 85 |     },
 86 | 
 87 |     output: {
 88 |       publicPath: "/"
 89 |     },
 90 | 
 91 |     resolve: {
 92 |       alias: {
 93 |         "@": path.resolve(root, "src"),
 94 |         "react-dom": "@hot-loader/react-dom"
 95 |       },
 96 |       extensions: [".mjs", ".ts", ".tsx", ".jsx", ".js", ".json"],
 97 |       modules: [path.resolve(root, "node_modules")]
 98 |     }
 99 |   };
100 | 
101 |   return common;
102 | };
103 | 


--------------------------------------------------------------------------------
/src/webpack/server.ts:
--------------------------------------------------------------------------------
  1 | // Webpack (server)
  2 | 
  3 | // ----------------------------------------------------------------------------
  4 | // IMPORTS
  5 | 
  6 | /* Node */
  7 | import path from "path";
  8 | 
  9 | /* NPM */
 10 | import { mergeWith } from "lodash";
 11 | import webpack from "webpack";
 12 | 
 13 | /* Local */
 14 | import common, { defaultMerger, files } from "./common";
 15 | import css from "./css";
 16 | 
 17 | // ----------------------------------------------------------------------------
 18 | 
 19 | const isProduction = process.env.NODE_ENV === "production";
 20 | 
 21 | // Base server config
 22 | const base: webpack.Configuration = {
 23 |   entry: [path.resolve(__dirname, "..", "entry", "server.tsx")],
 24 | 
 25 |   module: {
 26 |     rules: [
 27 |       ...css(false),
 28 |       // Images
 29 |       {
 30 |         test: files.images,
 31 |         use: [
 32 |           {
 33 |             loader: "file-loader",
 34 |             query: {
 35 |               emitFile: false,
 36 |               name: `assets/img/[name]${isProduction ? ".[hash]" : ""}.[ext]`
 37 |             }
 38 |           }
 39 |         ]
 40 |       },
 41 | 
 42 |       // Fonts
 43 |       {
 44 |         test: files.fonts,
 45 |         use: [
 46 |           {
 47 |             loader: "file-loader",
 48 |             query: {
 49 |               emitFile: false,
 50 |               name: `assets/fonts/[name]${isProduction ? ".[hash]" : ""}.[ext]`
 51 |             }
 52 |           }
 53 |         ]
 54 |       }
 55 |     ]
 56 |   },
 57 | 
 58 |   // Name
 59 |   name: "server",
 60 | 
 61 |   // Set output
 62 |   output: {
 63 |     filename: "../server.js",
 64 |     libraryTarget: "commonjs2",
 65 |     path: path.resolve(__dirname, "..", "..", "dist", "public"),
 66 |     publicPath: "/"
 67 |   },
 68 | 
 69 |   // Plugins
 70 |   plugins: [
 71 |     // Only emit a single `server.js` chunk
 72 |     new webpack.optimize.LimitChunkCountPlugin({
 73 |       maxChunks: 1
 74 |     }),
 75 | 
 76 |     // Add source map support to the server-side bundle
 77 |     new webpack.BannerPlugin({
 78 |       banner: `require("source-map-support").install();`,
 79 |       entryOnly: false,
 80 |       include: ["server.js"],
 81 |       raw: true
 82 |     }),
 83 | 
 84 |     // Add global variables
 85 |     new webpack.DefinePlugin({
 86 |       GRAPHQL: JSON.stringify(process.env.GRAPHQL),
 87 |       SERVER: true,
 88 |       WS_SUBSCRIPTIONS: JSON.stringify(process.env.WS_SUBSCRIPTIONS),
 89 |       LOCAL_STORAGE_KEY: JSON.stringify(process.env.LOCAL_STORAGE_KEY)
 90 |     })
 91 |   ],
 92 | 
 93 |   resolve: {
 94 |     modules: [path.resolve(__dirname, "..", "..", "node_modules")]
 95 |   },
 96 | 
 97 |   // Target
 98 |   target: "node"
 99 | };
100 | 
101 | // Development config
102 | const dev: webpack.Configuration = {
103 |   devtool: "eval-source-map"
104 | };
105 | 
106 | // Production config
107 | const prod: webpack.Configuration = {
108 |   devtool: "source-map"
109 | };
110 | 
111 | export default mergeWith(
112 |   {},
113 |   common(true),
114 |   base,
115 |   process.env.NODE_ENV === "production" ? prod : dev,
116 |   defaultMerger
117 | );
118 | 


--------------------------------------------------------------------------------
/src/webpack/css.ts:
--------------------------------------------------------------------------------
  1 | // Webpack (CSS style loading)
  2 | 
  3 | // ----------------------------------------------------------------------------
  4 | // IMPORTS
  5 | 
  6 | /* NPM */
  7 | import MiniCssExtractPlugin from "mini-css-extract-plugin";
  8 | import { Loader } from "webpack";
  9 | 
 10 | // ----------------------------------------------------------------------------
 11 | 
 12 | // Types
 13 | type ModuleSettings = [string, { modules: boolean }];
 14 | 
 15 | export interface IPostCSSConfig {
 16 |   exec?: boolean;
 17 |   parser?: string | object;
 18 |   syntax?: string | object;
 19 |   plugins?: any[] | ((loader: any) => any[]);
 20 |   sourceMap?: string | boolean;
 21 | }
 22 | 
 23 | export interface IStylesConfig {
 24 |   postcss?: boolean | IPostCSSConfig;
 25 | }
 26 | 
 27 | export interface IRule {
 28 |   ext: string;
 29 |   use: Loader[];
 30 | }
 31 | 
 32 | // Returns string RegEx and modules settings based on style file extension
 33 | function getExtensionSettings(ext: string): ModuleSettings[] {
 34 |   return [
 35 |     [`^(?!.*\\.global\\.${ext}$).*\\.${ext}$`, { modules: true }],
 36 |     [`\\.global\\.${ext}$`, { modules: false }]
 37 |   ];
 38 | }
 39 | 
 40 | // Rules configuration for each style file extension
 41 | export const rules: IRule[] = [
 42 |   {
 43 |     ext: "css",
 44 |     use: []
 45 |   },
 46 |   {
 47 |     ext: "s(c|a)ss",
 48 |     use: [
 49 |       {
 50 |         loader: "resolve-url-loader"
 51 |       },
 52 |       {
 53 |         loader: "sass-loader",
 54 |         options: {
 55 |           sourceMap: true
 56 |         }
 57 |       }
 58 |     ]
 59 |   },
 60 |   {
 61 |     ext: "less",
 62 |     use: ["less-loader"]
 63 |   }
 64 | ];
 65 | 
 66 | const isProduction = process.env.NODE_ENV === "production";
 67 | 
 68 | // Create generator to get rules
 69 | export default function* css(isClient = true) {
 70 |   // Source maps depend on us being in development
 71 |   const sourceMap = !isProduction;
 72 | 
 73 |   for (const loader of rules) {
 74 |     // Iterate over CSS/SASS/LESS and yield local and global mod configs
 75 |     for (const [test, modules] of getExtensionSettings(loader.ext)) {
 76 |       // Build the use rules
 77 |       const use = [
 78 |         // CSS hot loading on the client, in development
 79 |         isClient && !isProduction && "css-hot-loader",
 80 | 
 81 |         // Add MiniCSS if we're on the client
 82 |         isClient && MiniCssExtractPlugin.loader,
 83 | 
 84 |         // Set-up `css-loader`
 85 |         {
 86 |           // If we're on the server, we only want to output the name
 87 |           // loader: isClient ? "css-loader" : "css-loader/locals",
 88 |           loader: "css-loader",
 89 | 
 90 |           options: {
 91 |             // Calculate how many loaders follow this one
 92 |             importLoaders: loader.use.length + 1,
 93 | 
 94 |             // Format for 'localised' CSS modules
 95 |             localIdentName: "[local]-[hash:base64]",
 96 | 
 97 |             // Add sourcemaps if we're in dev
 98 |             sourceMap,
 99 | 
100 |             // Specify modules options
101 |             ...modules
102 |           }
103 |         },
104 | 
105 |         // Add PostCSS
106 |         {
107 |           loader: "postcss-loader",
108 |           options: {
109 |             ident: "postcss",
110 |             plugins() {
111 |               return [
112 |                 // TODO - MAKE PLUGINS WORK WITH SASS!
113 |                 require("postcss-preset-env")({
114 |                   features: {
115 |                     autoprefixer: false
116 |                   }
117 |                 }),
118 |                 require("cssnano")()
119 |               ];
120 |             },
121 |             // Enable sourcemaps in development
122 |             sourceMap
123 |           }
124 |         },
125 | 
126 |         // Copy over the loader's specific rules
127 |         ...loader.use
128 |       ];
129 | 
130 |       // Yield the full rule
131 |       yield {
132 |         test: new RegExp(test),
133 | 
134 |         // Remove all falsy values
135 |         use: use.filter(l => l) as Loader[]
136 |       };
137 |     }
138 |   }
139 | }
140 | 


--------------------------------------------------------------------------------
/src/lib/apollo.ts:
--------------------------------------------------------------------------------
  1 | // Apollo GraphQL client
  2 | 
  3 | // ----------------------------------------------------------------------------
  4 | // IMPORTS
  5 | 
  6 | /* NPM */
  7 | import {
  8 |   InMemoryCache,
  9 |   NormalizedCacheObject,
 10 |   IntrospectionFragmentMatcher
 11 | } from "apollo-cache-inmemory";
 12 | import { ApolloClient } from "apollo-client";
 13 | import { ApolloLink, split } from "apollo-link";
 14 | import { onError } from "apollo-link-error";
 15 | import { HttpLink } from "apollo-link-http";
 16 | import { WebSocketLink } from "apollo-link-ws";
 17 | import { getMainDefinition } from "apollo-utilities";
 18 | import { SubscriptionClient } from "subscriptions-transport-ws";
 19 | 
 20 | /* Local */
 21 | import introspectionQueryResultData from "@/graphql/fragments";
 22 | 
 23 | // ----------------------------------------------------------------------------
 24 | 
 25 | // Match up fragments
 26 | const fragmentMatcher = new IntrospectionFragmentMatcher({
 27 |   introspectionQueryResultData
 28 | });
 29 | 
 30 | export function createClient(): ApolloClient<NormalizedCacheObject> {
 31 |   // Create the cache first, which we'll share across Apollo tooling.
 32 |   // This is an in-memory cache. Since we'll be calling `createClient` on
 33 |   // universally, the cache will survive until the HTTP request is
 34 |   // responded to (on the server) or for the whole of the user's visit (in
 35 |   // the browser)
 36 |   const cache = new InMemoryCache({ fragmentMatcher });
 37 | 
 38 |   // Create a HTTP client (both server/client). It takes the GraphQL
 39 |   // server from the `GRAPHQL` environment variable, which by default is
 40 |   // set to an external playground at https://graphqlhub.com/graphql
 41 |   const httpLink = new HttpLink({
 42 |     credentials: "same-origin",
 43 |     uri: GRAPHQL
 44 |   });
 45 | 
 46 |   // If we're in the browser, we'd have received initial state from the
 47 |   // server. Restore it, so the client app can continue with the same data.
 48 |   if (!SERVER) {
 49 |     cache.restore((window as any).__APOLLO__);
 50 |   }
 51 | 
 52 |   // Return a new Apollo Client back, with the cache we've just created,
 53 |   // and an array of 'links' (Apollo parlance for GraphQL middleware)
 54 |   // to tell Apollo how to handle GraphQL requests
 55 |   return new ApolloClient({
 56 |     cache,
 57 |     link: ApolloLink.from([
 58 |       // General error handler, to log errors back to the console.
 59 |       // Replace this in production with whatever makes sense in your
 60 |       // environment. Remember you can use the global `SERVER` variable to
 61 |       // determine whether you're running on the server, and record errors
 62 |       // out to third-party services, etc
 63 |       onError(({ graphQLErrors, networkError }) => {
 64 |         if (graphQLErrors) {
 65 |           graphQLErrors.map(({ message, locations, path }) =>
 66 |             console.log(
 67 |               `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
 68 |             )
 69 |           );
 70 |         }
 71 |         if (networkError) {
 72 |           console.log(`[Network error]: ${networkError}`);
 73 |         }
 74 |       }),
 75 | 
 76 |       // Split on HTTP and WebSockets
 77 |       WS_SUBSCRIPTIONS && !SERVER
 78 |         ? split(
 79 |             ({ query }) => {
 80 |               const definition = getMainDefinition(query);
 81 |               return (
 82 |                 definition.kind === "OperationDefinition" &&
 83 |                 definition.operation === "subscription"
 84 |               );
 85 |             },
 86 |             // Use WebSockets for subscriptions
 87 |             new WebSocketLink(
 88 |               // Replace http(s) with `ws` for connecting via WebSockts
 89 |               new SubscriptionClient(GRAPHQL.replace(/^https?/, "ws"), {
 90 |                 reconnect: true // <-- automatically redirect as needed
 91 |               })
 92 |             ),
 93 |             // ... fall-back to HTTP for everything else
 94 |             httpLink
 95 |           )
 96 |         : httpLink // <-- just use HTTP on the server
 97 |     ]),
 98 |     // On the server, enable SSR mode
 99 |     ssrMode: SERVER
100 |   });
101 | }
102 | 


--------------------------------------------------------------------------------
/src/webpack/client.ts:
--------------------------------------------------------------------------------
  1 | // Webpack (client)
  2 | 
  3 | // ----------------------------------------------------------------------------
  4 | // IMPORTS
  5 | 
  6 | /* Node */
  7 | import path from "path";
  8 | 
  9 | /* NPM */
 10 | import CompressionPlugin from "compression-webpack-plugin";
 11 | import { mergeWith } from "lodash";
 12 | import MiniCssExtractPlugin from "mini-css-extract-plugin";
 13 | import webpack from "webpack";
 14 | const BrotliCompression = require("brotli-webpack-plugin");
 15 | 
 16 | /* Local */
 17 | import common, { defaultMerger, files } from "./common";
 18 | import css, { rules } from "./css";
 19 | 
 20 | // ----------------------------------------------------------------------------
 21 | 
 22 | const isProduction = process.env.NODE_ENV === "production";
 23 | 
 24 | // Base client config
 25 | const base: webpack.Configuration = {
 26 |   // Entry
 27 |   entry: [path.resolve(__dirname, "..", "entry", "client.tsx")],
 28 | 
 29 |   // Name
 30 |   name: "client",
 31 | 
 32 |   // Use `MiniCssExtractPlugin` in both dev and production, because
 33 |   // the server will need access to it in its initial render
 34 |   module: {
 35 |     rules: [
 36 |       ...css(),
 37 |       // Images
 38 |       {
 39 |         test: files.images,
 40 |         use: [
 41 |           {
 42 |             loader: "file-loader",
 43 |             query: {
 44 |               name: `assets/img/[name]${isProduction ? ".[hash]" : ""}.[ext]`
 45 |             }
 46 |           }
 47 |         ]
 48 |       },
 49 | 
 50 |       // Fonts
 51 |       {
 52 |         test: files.fonts,
 53 |         use: [
 54 |           {
 55 |             loader: "file-loader",
 56 |             query: {
 57 |               name: `assets/fonts/[name]${isProduction ? ".[hash]" : ""}.[ext]`
 58 |             }
 59 |           }
 60 |         ]
 61 |       }
 62 |     ]
 63 |   },
 64 | 
 65 |   // Set-up some common mocks/polyfills for features available in node, so
 66 |   // the browser doesn't balk when it sees this stuff
 67 |   node: {
 68 |     console: true,
 69 |     fs: "empty",
 70 |     net: "empty",
 71 |     tls: "empty"
 72 |   },
 73 | 
 74 |   // Output
 75 |   output: {
 76 |     path: path.resolve(__dirname, "..", "..", "dist", "public"),
 77 |     publicPath: "/"
 78 |   },
 79 | 
 80 |   // The client bundle will be responsible for building the resulting
 81 |   // CSS file; ensure compilation is dumped into a single chunk
 82 |   optimization: {
 83 |     splitChunks: {
 84 |       cacheGroups: {
 85 |         styles: {
 86 |           chunks: "all",
 87 |           enforce: true,
 88 |           name: "main",
 89 |           test: new RegExp(
 90 |             `\\.${rules.map(rule => `(${rule.ext})`).join("|")}$`
 91 |           )
 92 |         }
 93 |       }
 94 |     }
 95 |   },
 96 | 
 97 |   // Add `MiniCssExtractPlugin`
 98 |   plugins: [
 99 |     new MiniCssExtractPlugin({
100 |       chunkFilename: "assets/css/[id].css",
101 |       filename: `assets/css/[name]${isProduction ? ".[contenthash]" : ""}.css`
102 |     }),
103 | 
104 |     // Add global variables
105 |     new webpack.DefinePlugin({
106 |       GRAPHQL: JSON.stringify(process.env.GRAPHQL),
107 |       SERVER: false,
108 |       WS_SUBSCRIPTIONS: process.env.WS_SUBSCRIPTIONS,
109 |       LOCAL_STORAGE_KEY: JSON.stringify(process.env.LOCAL_STORAGE_KEY)
110 |     })
111 |   ]
112 | };
113 | 
114 | // Development client config
115 | const dev: webpack.Configuration = {
116 |   devtool: "inline-source-map",
117 | 
118 |   // Output
119 |   output: {
120 |     chunkFilename: "[name].js",
121 |     filename: "[name].js"
122 |   }
123 | };
124 | 
125 | // Production client config
126 | const prod: webpack.Configuration = {
127 |   // Output
128 |   output: {
129 |     chunkFilename: "assets/js/[name].[chunkhash].js",
130 |     filename: "assets/js/[name].[chunkhash].js"
131 |   },
132 | 
133 |   plugins: [
134 |     new CompressionPlugin({
135 |       cache: true,
136 |       minRatio: 0.99
137 |     }),
138 |     new BrotliCompression({
139 |       minRatio: 0.99
140 |     })
141 |   ]
142 | };
143 | 
144 | export default mergeWith(
145 |   {},
146 |   common(false),
147 |   base,
148 |   process.env.NODE_ENV === "production" ? prod : dev,
149 |   defaultMerger
150 | );
151 | 


--------------------------------------------------------------------------------
/src/entry/server.tsx:
--------------------------------------------------------------------------------
  1 | // Server entrypoint
  2 | 
  3 | // ----------------------------------------------------------------------------
  4 | // IMPORTS
  5 | 
  6 | /* NPM */
  7 | 
  8 | // Implement a global `fetch()` polyfill, for Apollo requests
  9 | import "cross-fetch/polyfill";
 10 | 
 11 | // React for UI
 12 | import React from "react";
 13 | 
 14 | // The `Context` type for the Koa HTTP server
 15 | import { Context } from "koa";
 16 | 
 17 | // Apollo GraphQL
 18 | import { ApolloProvider, getDataFromTree } from "react-apollo";
 19 | 
 20 | // MobX state management
 21 | import { useStaticRendering } from "mobx-react-lite";
 22 | 
 23 | // React utility to transform JSX to HTML (to send back to the client)
 24 | import ReactDOMServer from "react-dom/server";
 25 | 
 26 | // <Helmet> component for retrieving <head> section, so we can set page
 27 | // title, meta info, etc along with the initial HTML
 28 | import Helmet from "react-helmet";
 29 | 
 30 | // React SSR routers
 31 | import { StaticRouter } from "react-router";
 32 | 
 33 | /* Local */
 34 | 
 35 | // Root component
 36 | import Root from "@/components/root";
 37 | 
 38 | // Utility for creating a per-request Apollo client
 39 | import { createClient } from "@/lib/apollo";
 40 | 
 41 | // Class for handling Webpack stats output
 42 | import Output from "@/lib/output";
 43 | 
 44 | // Every byte sent back to the client is React; this is our main template
 45 | import Html from "@/views/ssr";
 46 | 
 47 | // ----------------------------------------------------------------------------
 48 | 
 49 | // Types
 50 | export interface IRouterContext {
 51 |   status?: number;
 52 |   url?: string;
 53 | }
 54 | 
 55 | // Enable SSR-mode with MobX to avoid memory leaks
 56 | useStaticRendering(true);
 57 | 
 58 | // Everything from this point will be Webpack'd and dumped in `dist/server.js`
 59 | // and then loaded into an active Koa server
 60 | export default function(output: Output) {
 61 |   // Create Koa middleware to handle React requests
 62 |   return async (ctx: Context) => {
 63 |     // Create a new Apollo client
 64 |     const client = createClient();
 65 | 
 66 |     // Create a fresh 'context' for React Router
 67 |     const routerContext: IRouterContext = {};
 68 | 
 69 |     // Render our components - passing down MobX state, a GraphQL client,
 70 |     // and a router for rendering based on our route config
 71 |     const components = (
 72 |       <ApolloProvider client={client}>
 73 |         <StaticRouter location={ctx.request.url} context={routerContext}>
 74 |           <Root />
 75 |         </StaticRouter>
 76 |       </ApolloProvider>
 77 |     );
 78 | 
 79 |     // Await GraphQL data coming from the API server
 80 |     await getDataFromTree(components);
 81 | 
 82 |     // Handle 301/302 redirects
 83 |     if ([301, 302].includes(routerContext.status!)) {
 84 |       // 301 = permanent redirect, 302 = temporary
 85 |       ctx.status = routerContext.status!;
 86 | 
 87 |       // Issue the new `Location:` header
 88 |       ctx.redirect(routerContext.url!);
 89 | 
 90 |       // Return early -- no need to set a response body
 91 |       return;
 92 |     }
 93 | 
 94 |     // Handle 404 `Not Found`
 95 |     if (routerContext.status === 404) {
 96 |       // By default, just set the status code to 404. You can
 97 |       // modify this section to do things like log errors to a
 98 |       // third-party, or redirect users to a dedicated 404 page
 99 | 
100 |       ctx.status = 404;
101 |       ctx.body = "Not found";
102 | 
103 |       return;
104 |     }
105 | 
106 |     // Create response HTML
107 |     const html = ReactDOMServer.renderToString(components);
108 | 
109 |     // Create the React render, and inject the `<head>` section
110 |     // courtesy of React Helmet.
111 |     const reactRender = ReactDOMServer.renderToString(
112 |       <Html
113 |         css={output.client.main("css")!}
114 |         helmet={Helmet.renderStatic()}
115 |         html={html}
116 |         scripts={output.client.scripts()}
117 |         window={{
118 |           __APOLLO__: client.extract() // <-- GraphQL store
119 |         }}
120 |       />
121 |     );
122 | 
123 |     // Set the return type to `text/html`, and dump the response back to
124 |     // the client
125 |     ctx.type = "text/html";
126 |     ctx.body = `<!DOCTYPE html>${reactRender}`;
127 |   };
128 | }
129 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "reactql",
  3 |   "version": "4.5.0",
  4 |   "description": "ReactQL - front-end React/GraphQL starter kit",
  5 |   "main": "index.js",
  6 |   "scripts": {
  7 |     "build:production": "cross-env RUNNER=build NODE_ENV=production ts-node index.ts",
  8 |     "build:static": "cross-env RUNNER=static NODE_ENV=production ts-node index.ts",
  9 |     "clean": "rimraf dist",
 10 |     "dev": "cross-env RUNNER=development NODE_ENV=development ts-node index.ts",
 11 |     "dev:static": "cross-env RUNNER=static NODE_ENV=development ts-node index.ts",
 12 |     "gen:graphql": "gql-gen --config codegen.yml",
 13 |     "lint": "prettier -c \"src/**\"",
 14 |     "lint:save": "prettier --write \"src/**\"",
 15 |     "precommit": "npm run lint:save && npm test",
 16 |     "production": "cross-env RUNNER=production NODE_ENV=production ts-node index.ts",
 17 |     "production:clean": "npm run clean && npm run production",
 18 |     "start": "npm run dev",
 19 |     "test": "echo \"Error: no test specified\" && exit 1"
 20 |   },
 21 |   "husky": {
 22 |     "hooks": {
 23 |       "pre-commit": "lint-staged"
 24 |     }
 25 |   },
 26 |   "lint-staged": {
 27 |     "*.{ts,tsx}": [
 28 |       "prettier --write \"src/**\"",
 29 |       "git add"
 30 |     ]
 31 |   },
 32 |   "author": "Lee Benson <lee@leebenson.com>",
 33 |   "license": "MIT",
 34 |   "devDependencies": {
 35 |     "@babel/core": "^7.4.4",
 36 |     "@babel/plugin-proposal-class-properties": "^7.4.4",
 37 |     "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
 38 |     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
 39 |     "@babel/preset-react": "^7.0.0",
 40 |     "@babel/preset-typescript": "^7.3.3",
 41 |     "@graphql-codegen/cli": "^1.1.3",
 42 |     "@graphql-codegen/fragment-matcher": "^1.1.3",
 43 |     "@graphql-codegen/typescript": "^1.1.3",
 44 |     "@graphql-codegen/typescript-operations": "^1.1.3",
 45 |     "@graphql-codegen/typescript-react-apollo": "^1.1.3",
 46 |     "@hot-loader/react-dom": "^16.8.6",
 47 |     "@types/compression-webpack-plugin": "^2.0.0",
 48 |     "@types/graphql": "^14.2.0",
 49 |     "@types/history": "^4.7.2",
 50 |     "@types/html-webpack-plugin": "^3.2.0",
 51 |     "@types/kcors": "^2.2.3",
 52 |     "@types/koa": "^2.0.48",
 53 |     "@types/koa-router": "^7.0.40",
 54 |     "@types/koa-send": "^4.1.2",
 55 |     "@types/koa-webpack": "^5.0.1",
 56 |     "@types/lodash": "^4.14.126",
 57 |     "@types/mini-css-extract-plugin": "^0.2.0",
 58 |     "@types/node": "^12.0.0",
 59 |     "@types/prop-types": "^15.7.1",
 60 |     "@types/react": "^16.8.17",
 61 |     "@types/react-dom": "^16.8.4",
 62 |     "@types/react-helmet": "^5.0.8",
 63 |     "@types/react-hot-loader": "^4.1.0",
 64 |     "@types/react-router-dom": "^4.3.3",
 65 |     "@types/require-from-string": "^1.2.0",
 66 |     "@types/source-map-support": "^0.5.0",
 67 |     "@types/webpack": "^4.4.31",
 68 |     "@types/webpack-dev-server": "^3.1.5",
 69 |     "@types/webpack-node-externals": "^1.6.3",
 70 |     "@types/ws": "^6.0.1",
 71 |     "babel-core": "^6.26.3",
 72 |     "babel-loader": "^8.0.6",
 73 |     "babel-plugin-emotion": "^10.0.9",
 74 |     "brotli-webpack-plugin": "^1.1.0",
 75 |     "compression-webpack-plugin": "^2.0.0",
 76 |     "css-hot-loader": "^1.4.4",
 77 |     "css-loader": "^2.1.1",
 78 |     "cssnano": "^4.1.10",
 79 |     "file-loader": "^3.0.1",
 80 |     "html-webpack-plugin": "^3.2.0",
 81 |     "husky": "^2.2.0",
 82 |     "koa-webpack": "^5.2.3",
 83 |     "less": "^3.9.0",
 84 |     "less-loader": "^5.0.0",
 85 |     "lint-staged": "^8.1.6",
 86 |     "mini-css-extract-plugin": "^0.6.0",
 87 |     "node-sass": "^4.12.0",
 88 |     "postcss-loader": "^3.0.0",
 89 |     "postcss-preset-env": "^6.6.0",
 90 |     "prettier": "^1.17.0",
 91 |     "require-from-string": "^2.0.2",
 92 |     "resolve-url-loader": "^3.1.0",
 93 |     "rimraf": "^2.6.3",
 94 |     "sass-loader": "^7.1.0",
 95 |     "source-map-support": "^0.5.12",
 96 |     "ts-node": "^8.1.0",
 97 |     "tslint": "^5.16.0",
 98 |     "typescript": "^3.4.5",
 99 |     "webpack": "^4.31.0"
100 |   },
101 |   "dependencies": {
102 |     "@emotion/core": "^10.0.10",
103 |     "@emotion/styled": "^10.0.11",
104 |     "apollo-cache-inmemory": "^1.5.1",
105 |     "apollo-client": "^2.5.1",
106 |     "apollo-link": "^1.2.11",
107 |     "apollo-link-error": "^1.1.10",
108 |     "apollo-link-http": "^1.5.14",
109 |     "apollo-link-state": "^0.4.2",
110 |     "apollo-link-ws": "^1.0.17",
111 |     "apollo-utilities": "^1.2.1",
112 |     "bufferutil": "^4.0.1",
113 |     "chalk": "^2.4.2",
114 |     "cross-env": "^5.2.0",
115 |     "cross-fetch": "^3.0.2",
116 |     "dotenv": "^8.0.0",
117 |     "emotion": "^10.0.9",
118 |     "graphql": "^14.3.0",
119 |     "graphql-tag": "^2.10.1",
120 |     "history": "^4.9.0",
121 |     "kcors": "^2.2.2",
122 |     "koa": "^2.7.0",
123 |     "koa-router": "^7.4.0",
124 |     "koa-send": "^5.0.0",
125 |     "lodash": "^4.17.11",
126 |     "microseconds": "^0.1.0",
127 |     "mobx": "^5.9.4",
128 |     "mobx-react-lite": "^1.3.2",
129 |     "ora": "^3.4.0",
130 |     "react": "^16.8.6",
131 |     "react-addons-css-transition-group": "^15.6.2",
132 |     "react-addons-transition-group": "^15.6.2",
133 |     "react-apollo": "^2.5.5",
134 |     "react-dom": "^16.8.6",
135 |     "react-helmet": "^5.2.1",
136 |     "react-hot-loader": "^4.8.4",
137 |     "react-router-dom": "^5.0.0",
138 |     "subscriptions-transport-ws": "^0.9.16",
139 |     "utf-8-validate": "^5.0.2"
140 |   }
141 | }
142 | 


--------------------------------------------------------------------------------
/src/runner/app.ts:
--------------------------------------------------------------------------------
  1 | // Runner (app)
  2 | 
  3 | // ----------------------------------------------------------------------------
  4 | // IMPORTS
  5 | 
  6 | /* Node */
  7 | import fs from "fs";
  8 | import path from "path";
  9 | 
 10 | /* NPM */
 11 | 
 12 | // Koa 2 web server.  Handles incoming HTTP requests, and will serve back
 13 | // the React render, or any of the static assets being compiled
 14 | import Koa from "koa";
 15 | 
 16 | // Static file handler
 17 | import koaSend from "koa-send";
 18 | 
 19 | // Enable cross-origin requests
 20 | import koaCors from "kcors";
 21 | 
 22 | // Koa Router, for handling URL requests
 23 | import KoaRouter from "koa-router";
 24 | 
 25 | // High-precision timing, so we can debug response time to serve a request
 26 | import ms from "microseconds";
 27 | 
 28 | // Webpack 4
 29 | import webpack from "webpack";
 30 | 
 31 | // Koa-specific Webpack handlers
 32 | import KoaWebpack from "koa-webpack";
 33 | 
 34 | /* Ora spinner */
 35 | import ora from "ora";
 36 | 
 37 | // Lodash utility for merging objects
 38 | import { mergeWith } from "lodash";
 39 | 
 40 | /* Local */
 41 | import clientConfig from "../webpack/client";
 42 | import serverConfig from "../webpack/server";
 43 | import staticConfig from "../webpack/static";
 44 | 
 45 | // ----------------------------------------------------------------------------
 46 | 
 47 | type PartialAll<T> = { [P in keyof T]?: PartialAll<T[P]> };
 48 | 
 49 | function staticMiddleware(root: string, immutable = true): Koa.Middleware {
 50 |   return async (ctx, next) => {
 51 |     try {
 52 |       if (ctx.path !== "/") {
 53 |         // If we're in production, try <dist>/public first
 54 |         return await koaSend(ctx, ctx.path, {
 55 |           immutable,
 56 |           root
 57 |         });
 58 |       }
 59 |     } catch (e) {
 60 |       /* Error? Go to next middleware... */
 61 |     }
 62 |     return next();
 63 |   };
 64 | }
 65 | 
 66 | // Distributio path
 67 | const dist = path.resolve(__dirname, "..", "..", "dist");
 68 | 
 69 | export const common = {
 70 |   // Compiled files
 71 |   compiled: {
 72 |     clientStats: path.resolve(dist, "client.stats.json"),
 73 |     server: path.resolve(dist, "server.js"),
 74 |     serverStats: path.resolve(dist, "server.stats.json")
 75 |   },
 76 | 
 77 |   // Distribution folder
 78 |   dist,
 79 | 
 80 |   // Are we in production?
 81 |   isProduction: process.env.NODE_ENV === "production",
 82 | 
 83 |   // Host to bind the server to
 84 |   host: process.env.HOST || "0.0.0.0",
 85 | 
 86 |   // Port to start web server on
 87 |   port: (process.env.PORT && parseInt(process.env.PORT)) || 3000,
 88 | 
 89 |   // WebSocket port (for dev)
 90 |   websocketPort:
 91 |     (process.env.WS_PORT && parseInt(process.env.WS_PORT)) || undefined,
 92 | 
 93 |   // Spinner
 94 |   spinner: ora()
 95 | };
 96 | 
 97 | // Webpack compiler
 98 | export const compiler = webpack([serverConfig, clientConfig]);
 99 | export const staticCompiler = webpack([staticConfig]);
100 | 
101 | // Build function
102 | export function build(buildStatic = false) {
103 |   // Determine which compiler to run
104 |   const buildCompiler = buildStatic ? staticCompiler : compiler;
105 | 
106 |   return new Promise(resolve => {
107 |     buildCompiler.run((e, fullStats) => {
108 |       // If there's an error, exit out to the console
109 |       if (e) {
110 |         common.spinner.fail(e.message);
111 |         process.exit(1);
112 |       }
113 | 
114 |       // Pull out the JSON stats
115 |       const stats = fullStats.toJson();
116 | 
117 |       // Report any build errors
118 |       if (stats.errors.length) {
119 |         common.spinner.fail(stats.errors.join("\n"));
120 |         process.exit(1);
121 |       }
122 | 
123 |       // All good - save the stats (if we're not building a static bundle)
124 |       if (!buildStatic) {
125 |         [common.compiled.serverStats, common.compiled.clientStats].forEach(
126 |           (file, i) => {
127 |             if (stats.children && stats.children[i]) {
128 |               fs.writeFileSync(file, JSON.stringify(stats.children[i]), {
129 |                 encoding: "utf8"
130 |               });
131 |             }
132 |           }
133 |         );
134 |       }
135 | 
136 |       resolve();
137 |     });
138 |   });
139 | }
140 | 
141 | // Dev server
142 | export async function devServer(
143 |   koaApp: Koa,
144 |   compiler: webpack.MultiCompiler,
145 |   opt: PartialAll<KoaWebpack.Options> = {}
146 | ) {
147 |   // Set hot client options
148 |   const hotClient: any = {
149 |     host: common.host
150 |   };
151 | 
152 |   // Is a custom WebSocket defined?
153 |   if (common.websocketPort) {
154 |     hotClient.port = common.websocketPort;
155 |   }
156 | 
157 |   // Set default options for KoaWebpack
158 |   const defaultOptions: KoaWebpack.Options = {
159 |     compiler: compiler as any,
160 |     devMiddleware: {
161 |       logLevel: "info",
162 |       publicPath: "/",
163 |       stats: false
164 |     },
165 |     hotClient
166 |   };
167 | 
168 |   // Create the middlware, by merging in any overrides
169 |   const koaWebpackMiddleware = await KoaWebpack(mergeWith(defaultOptions, opt));
170 | 
171 |   // Attach middleware to our passed Koa app
172 |   koaApp.use(koaWebpackMiddleware);
173 | 
174 |   // Emit the listener when Webpack has finished bundling
175 |   (compiler as any).hooks.done.tap("built", () => {
176 |     common.spinner.succeed(`Running on http://${common.host}:${common.port}`);
177 |   });
178 | 
179 |   // Return the middleware
180 |   return koaWebpackMiddleware;
181 | }
182 | 
183 | // Router
184 | const router = new KoaRouter()
185 |   .get("/ping", async ctx => {
186 |     ctx.body = "pong";
187 |   })
188 |   .get("/favicon.ico", async ctx => {
189 |     ctx.status = 204;
190 |   });
191 | 
192 | // Koa instance
193 | export const app = new Koa()
194 | 
195 |   // CORS
196 |   .use(koaCors())
197 | 
198 |   // Error catcher
199 |   .use(async (ctx, next) => {
200 |     try {
201 |       await next();
202 |     } catch (e) {
203 |       console.log("Error:", e);
204 |       ctx.status = 500;
205 |       ctx.body = "There was an error. Please try again later.";
206 |     }
207 |   })
208 | 
209 |   // Timing
210 |   .use(async (ctx, next) => {
211 |     const start = ms.now();
212 |     await next();
213 |     const end = ms.parse(ms.since(start));
214 |     const total = end.microseconds + end.milliseconds * 1e3 + end.seconds * 1e6;
215 |     ctx.set("Response-Time", `${total / 1e3}ms`);
216 |   });
217 | 
218 | // Static file serving
219 | 
220 | // In production, check <dist>/public first
221 | if (common.isProduction) {
222 |   app.use(staticMiddleware(path.resolve(common.dist, "public")));
223 | }
224 | 
225 | // ... and then fall-back to <root>/public
226 | app.use(staticMiddleware(path.resolve(common.dist, "..", "public"), false));
227 | 
228 | // Router
229 | app.use(router.allowedMethods()).use(router.routes());
230 | 


--------------------------------------------------------------------------------
/src/lib/hotServerMiddleware.ts:
--------------------------------------------------------------------------------
  1 | // Hot server middleware
  2 | 
  3 | /*
  4 |   Forked from https://github.com/60frames/webpack-hot-server-middleware
  5 |   and modified for Typescript and Launch.js
  6 | 
  7 |   MIT License
  8 | 
  9 |   Copyright (c) 2016 [note: no attribution given]
 10 | 
 11 |   Permission is hereby granted, free of charge, to any person obtaining a copy
 12 |   of this software and associated documentation files (the "Software"), to deal
 13 |   in the Software without restriction, including without limitation the rights
 14 |   to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 15 |   copies of the Software, and to permit persons to whom the Software is
 16 |   furnished to do so, subject to the following conditions:
 17 | 
 18 |   The above copyright notice and this permission notice shall be included in all
 19 |   copies or substantial portions of the Software.
 20 | 
 21 |   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 22 |   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 23 |   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 24 |   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 25 |   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 26 |   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 27 |   SOFTWARE.
 28 | */
 29 | 
 30 | // ----------------------------------------------------------------------------
 31 | // IMPORTS
 32 | 
 33 | /* Node */
 34 | import fs from "fs";
 35 | import path from "path";
 36 | 
 37 | /* NPM */
 38 | import Koa from "koa";
 39 | import requireFromString from "require-from-string";
 40 | import sourceMapSupport from "source-map-support";
 41 | import webpack from "webpack";
 42 | 
 43 | /* Launch.js */
 44 | import Output from "./output";
 45 | import Stats from "./stats";
 46 | 
 47 | // ----------------------------------------------------------------------------
 48 | 
 49 | // Types
 50 | export type ServerRenderer = (
 51 |   ctx: Koa.Context,
 52 |   next: () => Promise<any>
 53 | ) => void;
 54 | export type OutputRenderer = (output: Output) => ServerRenderer;
 55 | export type KoaHandler = (
 56 |   error: any,
 57 |   serverRenderer: ServerRenderer
 58 | ) => Koa.Middleware;
 59 | 
 60 | // Create a Koa handler
 61 | const createKoaHandler: KoaHandler = (error, serverRenderer) => (ctx, next) => {
 62 |   if (error) {
 63 |     ctx.throw(error);
 64 |   }
 65 |   return serverRenderer(ctx, next);
 66 | };
 67 | 
 68 | function isMultiCompiler(compiler?: webpack.MultiCompiler) {
 69 |   // Duck typing as `instanceof MultiCompiler` fails when npm decides to
 70 |   // install multiple instances of webpack.
 71 |   return compiler && compiler.compilers;
 72 | }
 73 | 
 74 | function findCompiler(multiCompiler: webpack.MultiCompiler, name: string) {
 75 |   return multiCompiler.compilers.filter(
 76 |     compiler => (compiler as any).name.indexOf(name) === 0
 77 |   );
 78 | }
 79 | 
 80 | function findStats(multiStats: any, name: string) {
 81 |   return multiStats.stats.filter(
 82 |     (stats: any) => stats.compilation.name.indexOf(name) === 0
 83 |   );
 84 | }
 85 | 
 86 | function getFilename(serverStats: webpack.Stats, outputPath: string) {
 87 |   const assetsByChunkName = serverStats.toJson().assetsByChunkName;
 88 |   const filename = (assetsByChunkName && assetsByChunkName.main) || "";
 89 |   // If source maps are generated `assetsByChunkName.main`
 90 |   // will be an array of filenames.
 91 |   return path.join(
 92 |     outputPath,
 93 |     Array.isArray(filename)
 94 |       ? filename.find(asset => /\.js$/.test(asset))
 95 |       : filename
 96 |   );
 97 | }
 98 | 
 99 | function getServerRenderer(filename: string, buffer: Buffer, output: Output) {
100 |   const errMessage = `The "server" compiler must export a function in the form of \`(output: Output) => (ctx: Koa.Context, next: () => Promise<any>) => void\``;
101 | 
102 |   const outputRenderer: OutputRenderer = requireFromString(
103 |     buffer.toString(),
104 |     filename
105 |   ).default;
106 |   if (typeof outputRenderer !== "function") {
107 |     throw new Error(errMessage);
108 |   }
109 | 
110 |   const serverRenderer = outputRenderer(output);
111 |   if (typeof serverRenderer !== "function") {
112 |     throw new Error(errMessage);
113 |   }
114 | 
115 |   return serverRenderer;
116 | }
117 | 
118 | function installSourceMapSupport(filesystem: typeof fs) {
119 |   sourceMapSupport.install({
120 |     // NOTE: If https://github.com/evanw/node-source-map-support/pull/149
121 |     // lands we can be less aggressive and explicitly invalidate the source
122 |     // map cache when Webpack recompiles.
123 |     emptyCacheBetweenOperations: true,
124 |     retrieveFile(source) {
125 |       try {
126 |         return filesystem.readFileSync(source, "utf8");
127 |       } catch (ex) {
128 |         // Doesn't exist
129 |         return "";
130 |       }
131 |     }
132 |   });
133 | }
134 | 
135 | /**
136 |  * Passes the request to the most up to date "server" bundle.
137 |  * NOTE: This must be mounted after webpackDevMiddleware to ensure this
138 |  * middleware doesn't get called until the compilation is complete.
139 |  */
140 | function webpackHotServerMiddleware(multiCompiler: webpack.MultiCompiler) {
141 |   if (!isMultiCompiler(multiCompiler)) {
142 |     throw new Error(
143 |       `Expected webpack compiler to contain both a "client" and/or "server" config`
144 |     );
145 |   }
146 | 
147 |   const serverCompiler = findCompiler(multiCompiler, "server")[0];
148 |   const clientCompilers = findCompiler(multiCompiler, "client");
149 | 
150 |   const outputFs = (serverCompiler as any).outputFileSystem;
151 |   const outputPath = (serverCompiler as any).outputPath;
152 | 
153 |   installSourceMapSupport(outputFs);
154 | 
155 |   let serverRenderer: ServerRenderer;
156 |   let error = false;
157 | 
158 |   const doneHandler = (multiStats: webpack.Stats) => {
159 |     error = false;
160 | 
161 |     const serverStats = findStats(multiStats, "server")[0];
162 |     // Server compilation errors need to be propagated to the client.
163 |     if (serverStats.compilation.errors.length) {
164 |       error = serverStats.compilation.errors[0];
165 |       return;
166 |     }
167 | 
168 |     let clientStatsJson = null;
169 | 
170 |     if (clientCompilers.length) {
171 |       const clientStats = findStats(multiStats, "client");
172 |       clientStatsJson = clientStats.map((obj: webpack.Stats) => obj.toJson());
173 | 
174 |       if (clientStatsJson.length === 1) {
175 |         clientStatsJson = clientStatsJson[0];
176 |       }
177 |     }
178 | 
179 |     const filename = getFilename(serverStats, outputPath);
180 |     const buffer = outputFs.readFileSync(filename);
181 | 
182 |     // Create an `Output` instance, containing our client/server stats
183 |     const output = new Output({
184 |       client: new Stats(clientStatsJson),
185 |       server: new Stats(serverStats.toJson())
186 |     });
187 | 
188 |     try {
189 |       serverRenderer = getServerRenderer(filename, buffer, output);
190 |     } catch (ex) {
191 |       error = ex;
192 |     }
193 |   };
194 | 
195 |   // Webpack 4
196 |   (multiCompiler as any).hooks.done.tap(
197 |     "WebpackHotServerMiddleware",
198 |     doneHandler
199 |   );
200 | 
201 |   return function createHandler() {
202 |     return createKoaHandler(error, serverRenderer).apply(
203 |       null,
204 |       arguments as any
205 |     );
206 |   };
207 | }
208 | 
209 | export default webpackHotServerMiddleware;
210 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # This is horribly outdated. Please don't use it. Consider [NextJS](https://nextjs.org/) instead.
  2 | 
  3 | 
  4 | <img src="https://reactql.org/reactql/logo.svg" alt="ReactQL v4.3.0" width="278" height="77" />
  5 | 
  6 | ![license](https://img.shields.io/github/license/leebenson/reactql.svg?style=flat-square) [![Twitter Follow](https://img.shields.io/twitter/follow/reactql.svg?style=social&label=Follow)](https://twitter.com/reactql)
  7 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/leebenson/reactql)
  8 | 
  9 | Universal front-end React + GraphQL starter kit, written in Typescript.
 10 | 
 11 | https://reactql.org
 12 | 
 13 | ## Features
 14 | 
 15 | ### Front-end stack
 16 | 
 17 | - [React v16.8](https://facebook.github.io/react/) (the one with [hooks](https://reactjs.org/docs/hooks-intro.html)!) for UI.
 18 | - [Apollo Client 2.5 (React)](http://dev.apollodata.com/react/) for connecting to GraphQL.
 19 | - [MobX-React-Lite](https://github.com/mobxjs/mobx-react-lite) for declarative, type-safe flux/store state management.
 20 | - [Emotion](https://emotion.sh/) CSS-in-JS, with inline `<style>` tag generation that contains only the CSS that needs to be rendered.
 21 | - [Sass](https://sass-lang.com/), [Less](http://lesscss.org/) and [PostCSS](https://postcss.org/) when importing `.css/.scss/.less` files.
 22 | - [React Router 4](https://reacttraining.com/react-router/) for declarative browser + server routes.
 23 | - [GraphQL Code Generator v1.1](https://graphql-code-generator.com/) for parsing remote GraphQL server schemas, for automatically building fully-typed Apollo React HOCs instead of writing `<Query>` / `<Mutation>` queries manually
 24 | - Declarative/dynamic `<head>` section, using [react-helmet](https://github.com/nfl/react-helmet).
 25 | 
 26 | ### Server-side rendering
 27 | 
 28 | - Built-in [Koa 2](http://koajs.com/) web server, with async/await routing.
 29 | - Full route-aware server-side rendering (SSR) of initial HTML.
 30 | - Universal building - both browser + Node.js web server compile down to static files, for fast server re-spawning.
 31 | - Per-request GraphQL store. Store state is dehydrated via SSR, and rehydrated automatically on the client.
 32 | - MobX for app-wide flux/store state, for automatically re-rendering any React component that 'listens' to state. Fully typed state!
 33 | - Full page React via built-in SSR component - every byte of your HTML is React.
 34 | - SSR in both development and production, even with hot-code reload.
 35 | 
 36 | ### Real-time
 37 | 
 38 | - Hot code reloading; zero refresh, real-time updates in development.
 39 | - Development web server that automatically sends patches on code changes, and restarts the built-in Web server for SSR renders that reflect what you'd see in production.
 40 | - WebSocket `subscription` query support for real-time data (just set `WS_SUBSCRIPTIONS=1` in [.env](.env))
 41 | 
 42 | ### Code optimisation
 43 | 
 44 | - [Webpack v4](https://webpack.js.org/), with [tree shaking](https://webpack.js.org/guides/tree-shaking/) -- dead code paths are automatically eliminated.
 45 | - Asynchronous code loading when `import()`'ing inside a function.
 46 | - Automatic per-vendor chunk splitting/hashing, for aggressive caching (especially good behind a HTTP/2 proxy!)
 47 | - Gzip/Brotli minification of static assets.
 48 | - CSS code is combined, minified and optimised automatically - even if you use SASS, LESS and CSS together!
 49 | 
 50 | ### Styles
 51 | 
 52 | - [Emotion](https://emotion.sh/), for writing CSS styles inline and generating the minimal CSS required to properly render your components.
 53 | - [PostCSS v7](http://postcss.org/) with [next-gen CSS](https://preset-env.cssdb.org/) and automatic vendor prefixing when importing `.css`, `.scss` or `.less` files.
 54 | - [SASS](http://sass-lang.com) and [LESS](http://lesscss.org/) support (also parsed through PostCSS.)
 55 | - Automatic vendor prefixing - write modern CSS, and let the compiler take care of browser compatibility.
 56 | - Mix and match SASS, LESS and regular CSS - without conflicts!
 57 | - CSS modules - your classes are hashed automatically, to avoid namespace conflicts.
 58 | - Compatible with Foundation, Bootstrap, Material UI and more. Simply configure via a `.global.(css|scss|less)` import to preserve class names.
 59 | 
 60 | ### Production-ready
 61 | 
 62 | - Production bundling via `npm run production`, that generates optimised server and client code.
 63 | - [Static compression](https://webpack.js.org/plugins/compression-webpack-plugin/) using the Gzip and [Brotli](https://opensource.googleblog.com/2015/09/introducing-brotli-new-compression.html) algorithms for the serving of static assets as pre-compressed `.gz` and `.br` files (your entire app's `main.js.bz` - including all dependencies - goes from 346kb -> 89kb!)
 64 | - Static bundling via `npm run build:static`. Don't need server-side rendering? No problem. Easily deploy a client-only SPA to any static web host (Netlify, etc.)
 65 | 
 66 | ### Developer support
 67 | 
 68 | - Written in [Typescript](https://www.typescriptlang.org/) with full type support, out the box (all external `@types/*` packages installed)
 69 | - Heavily documented code
 70 | 
 71 | ## Quick start
 72 | 
 73 | Grab and unpack the latest version, install all dependencies, and start a server:
 74 | 
 75 | ```
 76 | wget -qO- https://github.com/leebenson/reactql/archive/4.5.1.tar.gz | tar xvz
 77 | cd reactql-4.5.1
 78 | npm i
 79 | npm start
 80 | ```
 81 | 
 82 | Your development server is now running on [http://localhost:3000](http://localhost:3000)
 83 | 
 84 | ## Building GraphQL HOCs
 85 | 
 86 | By default, your GraphQL schema lives in [schema/schema.graphql](schema/schema.graphql)
 87 | 
 88 | To create fully Typescript-typed Apollo React HOCs based on your schema, simply put the query in a `.graphql` anywhere inside the source folder, and run:
 89 | 
 90 | ```
 91 | npm run gen:graphql
 92 | ```
 93 | 
 94 | You can then import the query like we do in the [HackerNews demo component](src/components/example/hackernews.tsx):
 95 | 
 96 | ```ts
 97 | // Query to get top stories from HackerNews
 98 | import { GetHackerNewsTopStoriesComponent } from "@/graphql";
 99 | ```
100 | 
101 | And use it as follows:
102 | 
103 | ```ts
104 | <GetHackerNewsTopStoriesComponent>
105 |     {({ data, loading, error }) => (...)}
106 | </GetHackerNewsTopStoriesComponent>
107 | ```
108 | 
109 | To get access to the underlying `gql`-templated query (in case you need it for refetching, etc), in this case it'd be `GetHackerNewsTopStoriesDocument`.
110 | 
111 | See [GraphQL Code Generator](https://graphql-code-generator.com/) for more details on how it works.
112 | 
113 | You can also edit [codegen.yml](codegen.yml) in the root to point to a remote schema, or change the file location.
114 | 
115 | ## Development mode
116 | 
117 | Development mode offers a few useful features:
118 | 
119 | - Hot code reloading. Make a change anywhere in your code base (outside of the Webpack config), and changes will be pushed down the browser automatically - without page reloads. This happens for React, Emotion, SASS - pretty much anything.
120 | 
121 | - Full source maps for Javascript and CSS.
122 | 
123 | - Full server-side rendering, with automatic Koa web server restarting on code changes. This ensures the initial HTML render will always reflect your latest code changes.
124 | 
125 | To get started, simply run:
126 | 
127 | ```
128 | npm start
129 | ```
130 | 
131 | A server will be started on [http://localhost:3000](http://localhost:3000)
132 | 
133 | ## Production mode
134 | 
135 | In production mode, the following happens:
136 | 
137 | - All assets are optimised and minified. Javascript, CSS, images, are all compiled down to static files that will appear in `dist`.
138 | 
139 | - Assets are also compressed into `.gz` (Gzip) and `.br` (Brotli) versions, which are served automatically to all capable browsers.
140 | 
141 | - If files have been generated in a previous run, they will be re-used on subsequent runs. This ensures really fast server start-up times after the initial build.
142 | 
143 | To build and run for production, use:
144 | 
145 | ```
146 | npm run production
147 | ```
148 | 
149 | Files will be generated in `./dist`, and a server will also be spawned at [http://localhost:3000](http://localhost:3000)
150 | 
151 | Clean the cached production build with `npm run clean`, or run `npm run clean-production` to both clean and re-run the production build, as needed.
152 | 
153 | # Build mode
154 | 
155 | If you only want to build assets and not actually run the server, use:
156 | 
157 | ```
158 | npm run build:production
159 | ```
160 | 
161 | This is used in the [Dockerfile](Dockerfile), for example, to pre-compile assets and ensure faster start-up times when spawning a new container.
162 | 
163 | # Static bundling for client-only SPAs
164 | 
165 | If you're targeting a client-only SPA and hosting statically, you probably don't want to run a Koa web server to handle HTTP requests and render React.
166 | 
167 | Instead, you can use _**static mode**_, which produces the client-side JS, CSS and assets files, along with an `index.html` for minimal bootstrapping, and dumps them in `dist/public`.
168 | 
169 | You can then upload the contents of that folder wherever you like - et voila, you'll have a working client-side Single Page App!
170 | 
171 | There are two static modes available -- for dev and production:
172 | 
173 | ### Development (hot-code reload)
174 | 
175 | Just like the full-stack version, dev mode gives you hot code reloading, so changes to your local files will be pushed to the browser.
176 | 
177 | To activate static dev mode, just run:
178 | 
179 | ```
180 | npm run dev:static
181 | ```
182 | 
183 | Your client-side SPA will be online at [http://localhost:3000](http://localhost:3000), just like normal.
184 | 
185 | ### Production (static deployment)
186 | 
187 | To build your client-side files ready for production deployment, run:
188 | 
189 | ```
190 | npm run build:static
191 | ```
192 | 
193 | You'll get everything in that 'regular' building provides you with plus a `index.html` to bootstrap your JS, just without the server parts.
194 | 
195 | ### Modifying the `index.html` template
196 | 
197 | If you want to make changes to the `index.html` file that's used for static bundling, edit [src/views/static.html](src/views/static.html)
198 | 
199 | ## NPM commands
200 | 
201 | Here's a list of all the NPM script commands available out-the-box:
202 | 
203 | | Command                    | What it does                                                                                                                                                 |
204 | | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
205 | | `npm run build:production` | Builds production-ready client/server bundles, but _doesn't_ start a server.                                                                                 |
206 | | `npm run build:static`     | Builds production-ready client bundle and `index.html`; ignores server bundling.                                                                             |
207 | | `npm run clean`            | Removes the `dist` folder, and any previously built client/server bundle.                                                                                    |
208 | | `npm run dev`              | Runs a univeral dev server in memory; auto restarts on code changes _and_ uses hot-code reload in the browser. Does _not_ output anything to `dist`.         |
209 | | `npm run dev:static`       | Runs a client-only dev server using [src/views/static.html] as the template; full hot-code reload. Also doesn't output anything to `dist`.                   |
210 | | `npm run production`       | Builds _and_ runs a production-ready client/server bundle. If previously built, will re-use cached files automatically (run `npm run clean` to clear cache.) |
211 | | `npm run production:clean` | Same as above, but cleans `dist` first to ensure a fresh re-build.                                                                                           |
212 | | `npm start`                | Shortcut for `npm run dev`.                                                                                                                                  |
213 | 
214 | ## Project layout
215 | 
216 | The important stuff is in [src](src).
217 | 
218 | Here's a quick run-through of each sub-folder and what you'll find in it:
219 | 
220 | - [src/components](src/components) - React components. Follow the import flow at [root.tsx](src/components/root.tsx) to figure out the component render chain and routing. I've included an [example](src/components/example) component that shows off some Apollo GraphQL and MobX features, including incrementing a local counter and pulling top news stories from Hacker News (a live GraphQL server endpoint.)
221 | 
222 | - [src/entry](src/entry) - The client and server entry points, which call on [src/components/root.tsx](src/components/root.tsx) to isomorphically render the React chain in both environments.
223 | 
224 | - [src/global](src/global) - A good place for anything that's used through your entire app, like global styles. I've started you off with a [styles.ts](src/global/styles.ts) that sets globally inlined Emotion CSS, as well as pulls in a global `.scss` file -- to show you how both types of CSS work.
225 | 
226 | - [src/lib](src/lib) - Internal libraries/helpers. There's an [apollo.ts](src/lib/apollo.ts) which builds a universal Apollo Client. Plus, Koa middleware to handle hot-code reloading in development and some other Webpack helpers.
227 | 
228 | - [src/queries](src/queries) - Your GraphQL queries. There's just one by default - for pulling the top stories from Hacker News to display in the example component.
229 | 
230 | - [src/runner](src/runner) - Development and production runners that spawn the Webpack build process in each environment.
231 | 
232 | - [src/views](src/views) - View components that fall outside of the usual React component chain, for use on the server. In here, [ssr.tsx](src/views/ssr.tsx) takes care of rendering the root HTML that's sent down the wire to the client. Note this is also a React component - your whole app will render as React! - and [static.html](src/views/static.html) serves as a template for rendering a client-side SPA. Update it as needed.
233 | 
234 | - [src/webpack](src/webpack) - The Webpack 4 configuration files that do the heavy lifting to transform our Typescript code, images and CSS into optimised and minified assets that wind up in the `dist` folder at the root. Handles both the client and server environments.
235 | 
236 | You'll also find some other useful goodies in the [root]()...
237 | 
238 | - [.env](.env) - Change your `GRAPHQL` server endpoint, `WS_SUBSCRIPTIONS=1` for built-in WebSocket support, `HOST` if you want to bind the server to something other than localhost, and `LOCAL_STORAGE_KEY` to set the root key for saving MobX state locally in the client for automatic re-loading in a later session.
239 | 
240 | - [.nvmrc](.nvmrc) - Specify your preferred Node.js version, for use with NVM and used by many continuous deployment tools. Defaults to v12.2.0
241 | 
242 | - [codegen.yml](codegen.yml) - Settings for [GraphQL Code Generator](https://graphql-code-generator.com/) (which you can run with `npm run gen:graphql` to generate types/HOCs based on your GraphQL queries/mutations.)
243 | 
244 | - [netlify.toml](netlify.toml) - Build instructions for fast [Netlify](https://www.netlify.com/) deployments. **Tip: To quickly deploy a demo ReactQL app, [click here](https://app.netlify.com/start/deploy?repository=https://github.com/leebenson/reactql).**
245 | 
246 | - [types](types) - Some basic types that allow you to import fonts, images, CSS/SASS/LESS files, and allow use of the global `SERVER` boolean and `GRAPHQL` endpoint data in your IDE.
247 | 
248 | - Typescript configuration via [tsconfig.json](tsconfig.json)
249 | 
250 | - A sample multi-build [Dockerfile](Dockerfile) based on Node 11.8 and Alpine, for quickly deploying your code base to production.
251 | 
252 | # Follow @reactql for updates
253 | 
254 | Get the latest updates by following us on Twitter: https://twitter.com/reactql
255 | 
256 | [![Twitter Follow](https://img.shields.io/twitter/follow/reactql.svg?style=social&label=Follow)](https://twitter.com/reactql)
257 | 
258 | # New to GraphQL? Need help?
259 | 
260 | <img src="https://reactql.org/assets/ext/slack_mark.png" alt="ReactQL" width="70" />
261 | 
262 | [Join the ReactQL slack channel here.](https://join.slack.com/t/reactql/shared_invite/enQtMjU0MjUzNDEzNzY0LWIyY2MzOGNlYmE1ZjI5ZDZhZTI2ODdiYzM2NjczYzJhZDgxYmJmYzE1NDYzZjRkYmVmNmQ3MzM0NzM3N2M5ODM)
263 | 
264 | Watch my free [45 minute YouTube video](https://www.youtube.com/watch?v=DNPVqK_woRQ), for a live coding walk-through of putting together a GraphQL server with a database. Learn how to write queries, mutations and handle nested/related data.
265 | 
266 | # Hire me
267 | 
268 | I'm a full-stack developer with 20+ years experience. As well as 9 years hands-on dev with Node.js, I'm fluent in Python, Go, SQL and NoSQL. I specialise in building robust, scalable products from scratch, and helping you deploy fast.
269 | 
270 | If you're looking for a senior developer who can help you get your product out the door quickly, reach me at [lee@leebenson.com](mailto:lee@leebenson.com). I'm occasionally available to take on remote contracts when I'm not working on my own projects.
271 | 


--------------------------------------------------------------------------------