# @coffeekraken/pre-view
> Simple command line interface that let you preview your blade or twig views in your favorite browser
Latest version **0.0.6** (published 2020-01-09) · MIT license · 0 weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install @coffeekraken/pre-view
pnpm add @coffeekraken/pre-view
yarn add @coffeekraken/pre-view
bun add @coffeekraken/pre-view
```
Provides the commands `ck-pre-view`, `coffeekraken-pre-view`.
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 0.0.6 |
| Published | 2020-01-09 |
| First published | 2019-12-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 1.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Coffeekraken |
| Maintainers | olivierbossel |
| Keywords | coffee, kraken, coffeekraken, preview, view, blade, twig, php |
## Links
- npm: https://www.npmjs.com/package/@coffeekraken/pre-view
- Homepage: https://coffeekraken.io
- npm.io page: https://npm.io/package/@coffeekraken/pre-view
## Dependencies (10)
- [commander](https://npm.io/package/commander.md) ^4.0.1
- [npm-which](https://npm.io/package/npm-which.md) ^3.0.1
- [livereload](https://npm.io/package/livereload.md) ^0.8.2
- [php-server](https://npm.io/package/php-server.md) ^0.2.1
- [get-bin-path](https://npm.io/package/get-bin-path.md) ^4.0.0
- [@coffeekraken/sugar](https://npm.io/package/@coffeekraken/sugar.md) ^1.0.4
- [@coffeekraken/form-style](https://npm.io/package/@coffeekraken/form-style.md) 0.0.2
- [@coffeekraken/text-intro](https://npm.io/package/@coffeekraken/text-intro.md) ^1.0.1
- [@coffeekraken/typography-style](https://npm.io/package/@coffeekraken/typography-style.md) 0.0.1
- [@coffeekraken/select-webcomponent](https://npm.io/package/@coffeekraken/select-webcomponent.md) 0.0.3
## Recent versions
- 0.0.6 (latest) — 2020-01-09
- 0.0.5 — 2019-12-17
- 0.0.4 — 2019-12-17
- 0.0.3 — 2019-12-17
- 0.0.2 — 2019-12-14
- 0.0.1 — 2019-12-14
## README
# Coffeekraken pre-view 
Simple command line interface that let you preview your `blade` or `twig` views in your favourite browser
## Table of content
1. [Features](#readme-features)
2. [Install](#readme-install)
3. [Get Started](#readme-get-started)
4. [CLI config](#readme-cli-config)
5. [Coffeekraken](#readme-coffeekraken)
## Features
1. Support `blade` and `twig` views
2. Automatically starts a PHP server
3. Hotkey to quickly change between views
4. Hotkey to switch between registered states (mobile, tablet, etc...)
## Install
```
npm install @coffeekraken/pre-view --save
```
## Get Started
First, create a file named `pre-view.config.js` at the root of your project. Here's a config sample
```js
module.exports = {
folder: `${process.cwd()}/views`,
watch: `${process.cwd()}/dist`,
hostname: '127.0.0.1',
open: true,
hotkey_selector: 'command+enter',
hotkey_states: 'ctrl+enter',
js: 'dist/js/app.bundle.js',
css: 'dist/css/style.css',
states: '100%,768px,480px'
}
```
Then create a `views` folder also at the root of your project. You can then create the folder structure you want in this folder. The only rule that you have to follow is to name your views `[name].blade.php` or `[name].twig.php`.
The last installation process is to add a script in your `package.json` like so:
```json
{
...
scripts: {
"pre-view": "ck-pre-view [...config]"
},
...
}
```
You can then launch your pre-view instance by typing: `npm run pre-view`
# CLI config
Here's the list of command line config that you can pass:
- `-c | --config`: Specify the config file path to load
- `-f | --folder`: Specify the folder to serve with the php server
- `-w | --watch`: Specify some folders to watch in order to refresh the browser automatically
- `-p | --port`: Specify the port to use for the php server
- `-h | --hostname`: Specify the hostname to use for the php server
- `-o | --open`: Open the browser at the server url
- `-b | --binary`: Specify the path the the php binary
- `-i | --ini`: Specify a path to a custom php.ini file
- `--hotkey_selector`: Specify a hotkey that will display the view select module
- `--hotkey_states`: Specify a hotkey that will switch between the preview states
- `--js`: Specify a javascript file path to load in the preview
- `--css`: Specify a css file path to load in the preview
# Coffeekraken
We are a young collective of front-end creative developers with one goal in mind. Build tools to make every team working day life better. This is our first and only concern. All our tools are build around that purpose.
All what we provide are some cool tools that you can use the way you want. These tools features cover a large scope of the front-end workflow (styleguide generation, colors/fonts management, etc...). You can use only the parts that you need and let the rest aside...
[](https://coffeekraken.io)
---
_Source: https://npm.io/package/@coffeekraken/pre-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._