webpack-config-github

An opinionated webpack config for GitHub apps.

Features

• Single and multiple HTML entry points
• Common chunks bundle when using multiple entry points
• ES6 transpilation via Babel
• Source Maps
• PostCSS
• HTML5 History routing (in development)
• GraphQL proxy (in development)
• Content Security Policy
• HTML and JS minification (in production)
• Static gzip compression (in production)
• Docker nginx deployment

Deployment

Currently targets the Docker nginx deployment environment. Improved gh-pages deployment is planned in the future.

Basic Setup

$ npm install --save-dev webpack-dev-server
$ npm install --save-dev webpack-config-github

webpack.config.js

module.exports = require('webpack-config-github')

src/index.js

document.body.innerHTML = '<h1>Hello, World!</h1>'

Start development server

$ webpack-dev-server --open

Directory Structure

my-app
├── package.json
├── Dockerfile
├── config
│   └── nginx.conf
├── .graphqlconfig
├── data
│   └── schema.graphql
├── node_modules
├── public
│   └── favicon.ico
│   └── robots.txt
└── src
    └── index.js
    └── components
        └── App.js
        └── Layout.js
        └── Sidebar.js

Dockerfile

The currently suggested deployment target is the Docker nginx image.

See the example Dockerfile.

config/nginx.conf

This example nginx.conf aligns the static serving with the webpack-dev-server.

.graphqlconfig

Specifies the location of the GraphQL schema and target endpoints.

Here is an example configuration file when targeting the GitHub GraphQL API.

{
  "schemaPath": "data/schema.graphql",
  "extensions": {
    "endpoints": {
      "production": {
        "url": "https://api.github.com/graphql",
        "headers": {
          "Authorization": "Bearer ${env:API_TOKEN}"
        }
      }
    }
  }
}

See the GraphQL Configuration Format for more information.

data/schema.graphql

When using Relay, a copy of the GraphQL schema should be checked in at this location. Checking the schema in ensures linting and build tools can be consistently ran offline and in CI.

public/

The public/ directory contains static assets that will be exposed as is. This is useful for well known static assets that need to be served at a specific root path like favicon.ico and robots.txt.

src/

Contains source JavaScript, CSS and other assets that will be compiled via webpack.

src/index.js

Is the main entry point for bootstrapping the application.

When using React, this file should render the root application component.

import React from 'react'
import ReactDOM from 'react-dom'

import App from './components/App'

ReactDOM.render(<App />, document.getElementById('root'))

Roadmap

• Add Subresource Integrity support
• Support CSS Modules
• Support hot reloading
• Add gh-pages deployment pattern

See Also

Many of the directory conventions used here are inspired from create-react-app.