How to include JS libraries

mikedoubintchik commented 5 years ago

How would I include bootstrap for example?

slidenerd commented 5 years ago

Yup import 'bootstrap'; import 'jquery'; import Vue from 'vue' doesnt work

lifenautjoe commented 5 years ago

@slidenerd I've looked and found no error.

Install vue

npm install vue --save

Require it on index.js

import Vue from 'vue';

And as for @allurewebsolutions ...

How to install Bootstrap 4

Substitute PROJECT-NAME for your project name.

Clone the repository

 git clone https://github.com/lifenautjoe/webpack-starter-basic PROJECT-NAME
 cd PROJECT-NAME

Install npm dependencies

 npm install

Run the kickstart command

npm run kickstart

After the project has been kickstarted

Install bootstrap

npm install bootstrap@4 --save

Install bootstrap dependencies.

npm install popper.js --save
npm install jquery --save

Replace the project index.scss with

@import "~bootstrap/scss/bootstrap";

And replace the project index.js with

require('./styles/index.scss');

import PopperJs from 'popper.js';
import jquery from 'jquery';

jquery(()=>{
    console.log('Hello jQuery + bootstrap 4!');
});

To see it all come together, replace the index.html body tag with

<body>

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                <div class="dropdown-menu" aria-labelledby="dropdown01">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

<main role="main" class="container">

    <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
    </div>

</main><!-- /.container -->
</body>

Start the development server and voilà.

npm start

To build for production

npm run build

To preview the production build

npm run preview

lifenautjoe commented 5 years ago

I've added the previous also to the README. Closing issue for now.

mikedoubintchik commented 5 years ago

Does this method allow you to use the Bootstrap mixins?

I imported the compiled CSS into the index.js file and it wouldn't let me use the breakpoint mixins.

What about font-awesome inclusion? It's giving me an issue about the fonts not being available in the directory it's looking at.

And thank you very much for your thorough response! @lifenautjoe

lifenautjoe / webpack-starter-basic

How to include JS libraries #17

How to install Bootstrap 4