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
moduleexports =
src/index.js
documentbodyinnerHTML = '<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.
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.
ReactDOM
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.