https://github.com/github/webpack-config-github
An opinionated webpack config for GitHub apps.
https://github.com/github/webpack-config-github
Last synced: 5 months ago
JSON representation
An opinionated webpack config for GitHub apps.
- Host: GitHub
- URL: https://github.com/github/webpack-config-github
- Owner: github
- License: mit
- Archived: true
- Created: 2017-11-16T01:17:06.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2020-08-03T15:43:16.000Z (over 5 years ago)
- Last Synced: 2024-12-13T21:36:20.966Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 131 KB
- Stars: 47
- Watchers: 4
- Forks: 21
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# webpack-config-github
An opinionated [webpack](https://webpack.js.org/) 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
* HTML and JS minification (in production)
* Static gzip compression (in production)
* Docker nginx deployment
## Deployment
Currently targets the [Docker nginx](https://hub.docker.com/_/nginx/) deployment environment. Improved gh-pages
deployment is planned in the future.
## Basic Setup
```sh
$ npm install --save-dev webpack-dev-server
$ npm install --save-dev webpack-config-github
```
**webpack.config.js**
```js
module.exports = require('webpack-config-github')
```
**src/index.js**
```js
document.body.innerHTML = '
Hello, World!
'
```
**Start development server**
```sh
$ 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](https://hub.docker.com/_/nginx/).
See the [example `Dockerfile`](/examples/docker/Dockerfile).
**config/nginx.conf**
This [example `nginx.conf`](/examples/docker/config/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.
```json
{
"schemaPath": "data/schema.graphql",
"extensions": {
"endpoints": {
"production": {
"url": "https://api.github.com/graphql",
"headers": {
"Authorization": "Bearer ${env:API_TOKEN}"
}
}
}
}
}
```
See the [GraphQL Configuration Format](https://github.com/graphcool/graphql-config/blob/master/specification.md) 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.
```js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'
ReactDOM.render(, 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](https://github.com/facebookincubator/create-react-app).