Setting Up Parcel with Bootstrap

Learn how to start a Bootstrap project using Parcel in 10 easy steps.

YouTube Guide on Setup

Check out the video setup guide on our YouTube channel.

Written Step-by-Step Guide on Setup

Here’s a step-by-step process of setting up a Bootstrap project with Parcel. It’s a summary of the full length version found at Bootstrap’s documentation.

Step 1 – Open a terminal window in your code editor

We’re using VSCode as our code editor.

Step 2 – Make a new folder to hold your project files

I like to keep all my Bootstrap themes in a folder called “boostrap-themes”. It’s located on my computer under “Documents”. You can keep yours wherever you want. Just make sure your terminal is inside that folder when doing the next steps.

In your terminal write this code. Replace “my-project” with whatever name you want to call your project.

mkdir my-project && cd my-project
npm init -y

Step 3 – Install Parcel

npm i --save-dev parcel

Step 4 – Install Bootstrap

npm i --save bootstrap @popperjs/core

Step 5 – Create project folders and files

mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss

Step 6 – Open the “index.html” and add this markup

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Parcel</title>
    <link rel="stylesheet" href="scss/styles.scss">
    <script type="module" src="js/main.js"></script>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Parcel!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
  </body>
</html>

Step 6 – Open package.json and add this script

{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}

Step 7 – Run “start” script in your terminal

npm start

Step 8 – Open the “styles.scss” file and add this code

// Import all of Bootstrap's CSS
@import "bootstrap/scss/bootstrap";

Step 9 – Open the “main.js” file and add this code

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'

Step 10 – You’re Done!

After you’ve finished the last step you’ll have a functional Bootstrap project built with Parcel.