Getting Started

The simplest structure for webapp (Full version)

project
├─┬ app
│ ├─┬ styles
│ │ └── main.css
│ ├─┬ scripts
│ │ └── main.js
│ └── index.html
├── .babelrc  (for [email protected])
├── babel.config.js (for [email protected])
├── gulpfile.js
└── package.json

And you can also download the example.

Webapp directory

1. HTML template (/path/to/project/app/index.html)

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Your Webapp</title>
  <link rel="stylesheet" href="%PUBLIC_URL%/styles/main.css">
</head>

<body>
  <div id="app"><!-- Your Template --></div>
  <!-- <script src="%PUBLIC_URL%/scripts/vendor/mylib.js"></script> -->
  <script src="%PUBLIC_URL%/scripts/main.js"></script>
</body>

</html>

2. A CSS entry file (/path/to/project/app/styles/main.scss)

* {
  margin: 0;
  padding: 0;
}

3. A JS entry file (/path/to/project/app/scripts/main.js)

document.getElementById('app').innerHTML = '<h1>Hello BalmJS</h1>';

Project settings

1. Configure babel

enable ES2015 features by using Babel

1.1 babel.config.js (/path/to/project/babel.config.js)

In your project directory, create a file named babel.config.js in your project root with these contents:

  • For balm version >= 0.24.0
module.exports = {
  presets: ['@babel/preset-env'],
  plugins: ['@babel/plugin-transform-runtime']
};

1.2 .babelrc (/path/to/project/.babelrc)

In your project directory, create a file named .babelrc in your project root with these contents:

  • For balm version >= 0.7.0
{
  "presets": ["env"],
  "plugins": ["transform-runtime"]
}
  • For balm version < 0.7.0

First, run this command in your project directory:

# For ES6 compilation ability
$ npm install --save-dev babel-preset-es2015

# For ES7 compilation ability
$ npm install --save-dev babel-preset-stage-0

Then, edit .babelrc:

{
  "presets": ["es2015", "stage-0"]
}

2. Configure balm by gulpfile.js (/path/to/project/gulpfile.js)

results matching ""

    No results matching ""