| 1 | # Vitalizer [](https://buildkite.com/vital/vitalizer) [](https://badge.fury.io/js/vitalizer)
|
| 2 |
|
| 3 | Webpack development and bundling tool for Vital Software.
|
| 4 |
|
| 5 | ### Features
|
| 6 |
|
| 7 | - Hot reloading
|
| 8 | - Injected JS/CSS assets
|
| 9 | - Tree-shaking optimization
|
| 10 | - Cache busted production assets
|
| 11 | - Source map support
|
| 12 | - PostCSS (Autoprefixer, SCSS style syntax)
|
| 13 | - CSS Module support
|
| 14 | - cssnano minification
|
| 15 | - rem() function support
|
| 16 |
|
| 17 | ### Installing
|
| 18 |
|
| 19 | To install, run the following commands:
|
| 20 |
|
| 21 | ```
|
| 22 | yarn add vitalizer -D
|
| 23 | ```
|
| 24 |
|
| 25 | ### Usage
|
| 26 |
|
| 27 | **Development**
|
| 28 |
|
| 29 | To run Vitalizer in development mode (using webpack-serve), run the following command:
|
| 30 |
|
| 31 | ```sh
|
| 32 | vitalizer start
|
| 33 | ```
|
| 34 |
|
| 35 | To build your project files for production, run the following command:
|
| 36 |
|
| 37 | ```sh
|
| 38 | vitalizer build
|
| 39 | ```
|
| 40 |
|
| 41 | ### Configuration
|
| 42 |
|
| 43 | To configure Vitalizer, create a file called `.vitalizer` in the root of your project:
|
| 44 |
|
| 45 | ```
|
| 46 | VARIABLE=name
|
| 47 | ```
|
| 48 |
|
| 49 | And set any of the following variables:
|
| 50 |
|
| 51 | | Variable | Development | Production | Usage |
|
| 52 | | :---------------- | :--------------------- | :----------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| 53 | | `CDN_URL` | :x: | :white_check_mark: | When set, production assets are output as `[CDN_URL][asset]` rather than `[asset]`. Used to support an external CDN for assets. |
|
| 54 | | `CI` | :large_orange_diamond: | :white_check_mark: | When set to `true`, Vitalizer treats warnings as failures in the build. Most CIs set this flag by default. |
|
| 55 | | `DISABLE_HASH`. | :x: | :white_check_mark: | When set to `true`, production assets are output as `[name].[ext]` rather than `[name][hash].[ext]`. Useful for debugging and test purposes. |
|
| 56 | | `HOST` | :white_check_mark: | :x: | By default, the development web server binds to `localhost`. You may use this variable to specify a different host. |
|
| 57 | | `INDEX_FILES` | :white_check_mark: | :white_check_mark: | Comma seperated list of HTML files to use. Defaults to `static/index.html`. |
|
| 58 | | `PORT` | :white_check_mark: | :x: | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port. |
|
| 59 | | `RESOLVE_MODULES` | :white_check_mark: | :white_check_mark: | Comma seperated list of module roots to use other than `node_modules`. i.e. `app, static` |
|
| 60 |
|
| 61 | #### Expanding Environment Variables In .env
|
| 62 |
|
| 63 | Expand variables already on your machine for use in your `.env` file (using [dotenv-expand](https://github.com/motdotla/dotenv-expand)).
|
| 64 |
|
| 65 | For example, to use the `DOMAIN` variable:
|
| 66 |
|
| 67 | ```
|
| 68 | DOMAIN=www.example.com
|
| 69 | FOO=$DOMAIN/foo
|
| 70 | BAR=$DOMAIN/bar
|
| 71 | ```
|