# cosmo-ui-build

This project aims to standardize the LML web build across different repositories and domains.

A webpack configuration object has been provided for each of the following environments:

1. dev
- includes ts-loader plugin
- includes wepack dev server
- has hot module replacement

2. prod
- extracts and minifies styles
- uses aggressive merging to minify js

3. test
- is a minimal version of the build

### Install

```
npm install -D @lml/cosmo-ui-build
```

Create a webpack config file, `webpack.config.js`, in your project root and add the following:

```javascript
const build = require('@lml/cosmo-ui-build');
const webpackMerge = require('webpack-merge');

const config = {
    // your custom options go here
    entry: "./src/app.tsx",
}

const dev = webpackMerge(build.dev, config)
const test = webpackMerge(build.test, config)
const prod = webpackMerge(build.prod, config)

switch (process.env.NODE_ENV) {
    case 'prod':
    case 'production':
        module.exports = prod;
        break;
    case 'test':
    case 'testing':
    case 'staging':
        module.exports = test;
        break;
    case 'dev':
    case 'development':
    default:
        module.exports = dev;
}
```

### Create a .env file

You are expected to provide a `.env` file which will be used at compile time to configure your app. A `.env.example` file has been provided to demonstrate the format.

At the very beginning of the build process your .env file is loaded and parsed into json by the [dotenv](https://github.com/motdotla/dotenv) package. Webpack then uses the [Define Plugin](https://webpack.js.org/plugins/define-plugin) to make this object available inside your project as `process.env.CONFIG`.

If you are using typescript I highly recommend that you re-export this as a typed object:

```typescript
export interface ConfigModel {
    API_HOST: string
    APP_VERSION: string
    ENV: string
    GOOGLE_API_KEY: string
    SERVICE: string
    SUPPORT_EMAIL: string
}

export const config: ConfigModel = process.env.CONFIG
```

### Create a Handlebars template

If you are building for web, you must create an html file which represents the entry point of your app.

Webpack uses the [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) which expects to find a [handlebars](http://handlebarsjs.com/) template file, located at `src/index.hbs`.

The `HtmlWebpackPlugin` will add a bunch of stuff into your template, such as scripts, stylesheets, favicon, title etc... and then output your file as index.html.

Feel free to copy the demo provided in this repo.