# Plugin – lektor-npm-support 0.1.4

Adds support for using npm/yarn to build assets in Lektor using tools such as Parcel, webpack, etc.

#### Project links

#### GitHub Statistics

#### Meta

Version: 0.1.4

Author: Baruch Sterin

#### Tags

Babel, before-build-all, Browserify, Node, npm, Parcel, Sass, server-spawn, server-stop, webpack, and Yarn

View all tags.

## Project Description

# lektor-npm-support

`lektor-npm-support` makes it easy to use Parcel, webpack, browserify, or any other tool to build assets for Lektor projects.

## Enabling the Plugin

To enable the plugin, run this command while inside your Lektor project directory:

    lektor plugins add lektor-npm-support

## Example: Creating a Parcel Project

Create a `parcel/` folder and inside that folder create the following files:

### `configs/npm-support.ini`

This file instructs the plugin how to generate the assets:

    [parcel]
    npm = yarn
    watch_script = watch
    build_script = build

- The section name `[parcel]` is the name of the folder where the Parcel project is located.
- `npm` is the package manager command used to build the project. This example will use Yarn.
- `watch_script` is the npm script used in `lektor server -f npm`,
- `build_script` is the npm script used in `lektor build -f npm`.

This plugin supports more than one such entry.

### `parcel/package.json`

This is a standard `package.json` file. It should contain two entries in the `scripts` section. The `build` script is used during `lektor build -f npm`, and the `watch` script is used during `lektor server -f npm`.

    {
      "name": "my-parcel-project",
      "version": "1.0.0",
      "scripts": {
        "watch": "NODE_ENV=development parcel --out-dir=../assets/static/gen --out-file=main.js --public-url=./assets/ main.js",
        "build": "NODE_ENV=production parcel build --out-dir=../assets/static/gen --out-file=main.js --public-url=./assets/ main.js"
      },
      "private": true
    }

Now we can use `yarn add` to add Parcel, Babel and Sass:

    $ cd </path/to/your/lektor/project>/parcel
    $ yarn add parcel-bundler babel-preset-env node-sass

### `parcel/babelr.rc`

Next up is a simple Babel config file, using the recommended `env` preset.

    {
      "presets": ["env"]
    }

### `parcel/main.scss`

A simple SCSS file.

    body {
      border: 10px solid red;
    }

### `parcel/main.js`

A simple Javascript file that imports the SCSS file so that Parcel will know to include it as well.

    import './main.scss';

## Running the Server

Now you're ready to go. When you run `lektor server` nothing wil happen, instead you need to now run it as `lektor server -f npm` which will enable the Parcel build. Parcel will automatically build your files into `assets/static/gen` and this is where Lektor will then pick up the files. This is done so that you can ship the generated assets to others that might not have these tools, which simplifies using a Lektor website that use this plugin.

## Manual Builds

To manually trigger a build that also invokes webpack you can use `lektor build -f npm`.

## Including The Files

Now you need to include the files in your template. This will do it:

    <link rel="stylesheet" href="{{ '/static/gen/main.css'| asseturl }}">
    <script type=text/javascript src="{{ '/static/gen/main.js'| asseturl }}" charset="utf-8"></script>

## Complete Working Example

The `examples` folder of this repository contains working projects.

## Credits

This plugin is based on the official lektor-webpack-support Lektor plugin by Armin Ronacher.

## Comments