Installation

Installation with create-melody-app

The easiest way to get up and running is by using create-melody-app. It provides a basic setup, including a working Webpack and Babel configuration. To get started, just run the following command in your terminal:

$ npx create-melody-app myapp

Afterwards, a new directory called myapp has been created for you and you can use npm install and npm start or yarn and yarn start to get started with your application.

We recommend to also install the melody-hooks package for an improved developer experience when using Melody.

npx is a tool that comes bundled with npm since version 5.2.0. It offers a very fast way to temporarily install a command line tool through npm and run it directly.

Manual installation

Melody is made up of many different packages, which you'll need to install yourself if you intend to install it manually.

$ npm install --save melody-hooks@^1.2.0-0 \
                     melody-idom \
                     melody-loader \
                     melody-parser \
                     melody-plugin-idom \
                     melody-traverse \
                     melody-types

The above will install most of the required packages, except for the older melody-component, melody-hoc and melody-redux packages which you might not want to use.

Please note that you'll also need Babel and Webpack. We'll look at how to configure them in the next section.

Webpack configuration

The Melody compiler simply generates modern ES6 code which is likely not what you need. Therefore, it is most commonly bundled together with Babel to produce valid ES5 code.

Additionally, Melody requires you to declare which compilation target should be produced for the templates, either the idom or the jsx target are suitable options.

webpack.config.js

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: {
        'main': path.join(__dirname, 'src/index.js')
    },
    output: {
        path: path.join(__dirname, 'public'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        plugins: [require('babel-plugin-transform-object-rest-spread')]
                    }
                }
            },
            // this is where we define the melody loader
            {
                test: /\.twig$/,
                use: [
                    'babel-loader', 
                    {
                        loader: 'melody-loader',
                        options: {
                            // we'll use "idom" as the output target
                            plugins: ['idom']
                        }
                    }
                ]
            },
        ]
    },
    devServer: {
      contentBase: path.join(__dirname, 'public'),
      watchOptions: {
        ignored: /node_modules/,
      },
      overlay: false,
    }
};