• ITEM 1
  • ITEM 2
  • ITEM 3

LEFT BOX

LEFT TEXT

CONTENTS

(none) :: Parcel – (none)

Reading time: 279 words, 1 minutes

<!-- composer >> box-begin 0 -->

#WORK

  • what notes go here?

<!-- composer >> box-end -->

Install Parcel

Install Parcel Bundler.

Install Bootstrap

Install bootstrap({{< docsref “/getting-started/download#npm” >}}) as a Node.js module using npm.

Bootstrap depends on Popper, which is specified in the peerDependencies property. This means that you will have to make sure to add both of them to your package.json using npm install @popperjs/core.

When all will be completed, your project will be structured like this:

project-name/
├── build/
├── node_modules/
│   └── bootstrap/
│   └── popper.js/
├── scss/
│   └── custom.scss
├── src/
│   └── index.html
│   └── index.js
└── package.json

Importing JavaScript

Import [Bootstrap’s JavaScript]({{< docsref “/getting-started/javascript” >}}) in your app’s entry point (usually src/index.js). You can import all our plugins in one file or separately if you require only a subset of them.

// Import all plugins
import * as bootstrap from 'bootstrap';

// Or import only needed plugins
import { Tooltip as Tooltip, Toast as Toast, Popover as Popover } from 'bootstrap';

// Or import just one
import Alert as Alert from '../node_modules/bootstrap/js/dist/alert';

Importing CSS

To utilize the full potential of Bootstrap and customize it to your needs, use the source files as a part of your project’s bundling process.

Create your own scss/custom.scss to [import Bootstrap’s Sass files]({{< docsref “/customize/sass#importing” >}}) and then override the [built-in custom variables]({{< docsref “/customize/sass#variable-defaults” >}}).

Build app

Include src/index.js before the closing </body> tag.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

Edit package.json

Add dev and build scripts in your package.json file.

"scripts": {
  "dev": "parcel ./src/index.html",
  "prebuild": "npx rimraf build",
  "build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
}

Run dev script

Your app will be accessible at http://127.0.0.1:1234.

npm run dev

Build app files

Built files are in the build/ folder.

npm run build
  • ITEM 1
  • ITEM 2
  • ITEM 3

RIGHT BOX

RIGHT TEXT