BalmJS

️🎉Features

Naturally: Make web development simple, natural and pleasant.
Structure-Based: One configuration file can manage webapp projects with at least 90% use cases.
Learn Once, Run Any Webapps: Any front-end technology stack will be developed and built in the same way.

️📦Installation


npm install --global balm-core balm-cli

# See all available official templates
balm list

balm init <template-name> <project-name>
cd <project-name>
npm install # OR `yarn`

# For development
npm run dev

# For production
npm run prod


npm install --global balm-core balm-cli

# /path/to/YOUR_WORKSPACE
mkdir -p my-project/src/{styles,scripts}
echo "Hello World" > my-project/src/index.html

# Installing `balm`
cd my-project
npm install --save-dev balm # OR `yarn add --dev balm`

# Config balm
touch balm.config.js

# For development
balm go

# For production
balm go --production

Automatic
Manual

⚙Configuration

balm.config.js


module.exports = {
  roots: {
    source: 'src' // Source code root (Create a directory in project)
  },
  styles: {
    extname: 'css' // Main style extension: css,scss,less
  },
  scripts: {
    entry: './src/scripts/index.js' // The entry script (Create a javascript file)
  }
};


const config = {
  server: {
    open: true,
    proxyOptions: {
      target: 'http://your.project.dev', // Target host
      changeOrigin: true, // Needed for virtual hosted sites
      pathFilter: '/api'
    }
  },
  roots: {
    source: 'src' // Source code root (Create a directory in project)
  },
  paths: {
    source: {
      css: 'styles', //   CSS dir: ./src/styles
      js: 'scripts', //    JS dir: ./src/scripts
      img: 'images', // Image dir: ./src/images
      font: 'fonts'  //  Font dir: ./src/fonts
    }
  },
  styles: {
    extname: 'css', // Main style extension: css,scss,less
    sprites: ['icons'] // Icons path: './src/images/icons'
  },
  scripts: {
    entry: {
      // Custom vendors
      // HTML: <script src="%PUBLIC_URL%/scripts/vendor/mylib.js"></script>
      mylib: ['your-project-vendors', 'your-project-plugins'],
      // The entry script (Create a javascript file)
      main: './src/scripts/index.js'
    }
  },
  assets: {
    root: '/path/to/your_remote_project', // Remote project root path
    mainDir: 'public', // Remote assets dir: '/path/to/your_remote_project/public'
    subDir: '', // Remote assets subdir: `/path/to/your_remote_project/public/${subDir}`
    cache: true
  }
};

const api = (mix) => {
  if (mix.env.isProd) {
    // Publish assets(styles,scripts,images,fonts,media)
    // from local `${roots.target}/{css,js,img,font,media}`
    // to `${assets.root}/${assets.mainDir}/${assets.subDir}`
    mix.publish();

    // Publish html templates
    // from local `${roots.target}/index.html`
    // to remote `${assets.root}/views/new-filename.blade.php`
    mix.publish([
      {
        input: 'index.html',
        output: 'views',
        renameOptions: {
          basename: 'new-filename',
          suffix: '.blade',
          extname: '.php'
        }
      }
    ]);
  }
};

module.exports = (balm) => {
  return {
    config,
    api
  };
};

Basic
Advanced