# Getting Started

# Kdu CLI

If you are not interested in manually setting up webpack, it is recommended to scaffold a project with Kdu CLI (opens new window) instead. Projects created by Kdu CLI are pre-configured with most of the common development needs working out of the box.

Follow this guide if the built-in configuration of Kdu CLI does not suit your needs, or you'd rather create your own webpack config from scratch.

# Manual Setup

# Installation

Unless you are an advanced user using your own forked version of Kdu's template compiler, you should install kdu-loader and kdu-template-compiler together:

npm install -D kdu-loader kdu-template-compiler

The reason kdu-template-compiler has to be installed separately is so that you can individually specify its version.

Every time a new version of kdu is released, a corresponding version of kdu-template-compiler is released together. The compiler's version must be in sync with the base kdu package so that kdu-loader produces code that is compatible with the runtime. This means every time you upgrade kdu in your project, you should upgrade kdu-template-compiler to match it as well.

# webpack Configuration

Kdu Loader's configuration is a bit different from other loaders. In addition to a rule that applies kdu-loader to any files with extension .kdu, make sure to add Kdu Loader's plugin to your webpack config:

// webpack.config.js
const { KduLoaderPlugin } = require('kdu-loader')

module.exports = {
  module: {
    rules: [
      // ... other rules
      {
        test: /\.kdu$/,
        loader: 'kdu-loader'
      }
    ]
  },
  plugins: [
    // make sure to include the plugin!
    new KduLoaderPlugin()
  ]
}

The plugin is required! It is responsible for cloning any other rules you have defined and applying them to the corresponding language blocks in .kdu files. For example, if you have a rule matching /\.js$/, it will be applied to <script> blocks in .kdu files.

A more complete example webpack config will look like this:

// webpack.config.js
const { KduLoaderPlugin } = require('kdu-loader')

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.kdu$/,
        loader: 'kdu-loader'
      },
      // this will apply to both plain `.js` files
      // AND `<script>` blocks in `.kdu` files
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      // this will apply to both plain `.css` files
      // AND `<style>` blocks in `.kdu` files
      {
        test: /\.css$/,
        use: [
          'kdu-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    // make sure to include the plugin for the magic
    new KduLoaderPlugin()
  ]
}

Also see Options Reference for all available loader options.