Adding Bootstrap to index.js

Question

I'm stuck trying to add Bootstrap to my index.js file as per instructions on Bootstrap's site. Their suggestion errors out when I try it. I'm pretty sure there's something I'm missing, but I don't know what.

index.js is:

const express = require('express');
const hbs = require('hbs');
import 'bootstrap';

const app = express();

hbs.registerPartials(__dirname + '/views/partials');
app.set('view engine', 'hbs');

app.get('/', (req, res) => res.render('index'));

app.listen(3000, () => {
  console.log('App listening at port 3000!')
});

Error out is:

import 'bootstrap';
^^^^^^

SyntaxError: Unexpected token import

My package.json is:

"dependencies": {
    "bootstrap": "^4.0.0",
    "express": "^4.16.2",
    "hbs": "^4.0.1",
    "jquery": "^3.3.1",
    "popper.js": "^1.12.9"
  },

Hmm! When I added the following to the head of my index.hbs file it seems that bootstrap works for rendering the navbar properly now, but I'd like to achieve the same by using bootstrap installed through node npm.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

What version of node do you use? or What do you use to transpile your code? import is es6 feature so probably your environment doesn't support it — Mario Nikolaus, Feb 03 '18 at 10:06
You can't use `import` keyword but you can use `require` check this [answer](https://stackoverflow.com/questions/26773767/purpose-of-installing-twitter-bootstrap-through-npm) — Amr Aly, Feb 03 '18 at 10:34

Michal · Accepted Answer · 2018-02-03T10:44:40.857

You can't use imports in nodejs environment if you don't use babel. You should use require.

Also, you are trying to import bootstrap in your server.js file.

I believe you want to import bootstrap in your app.js file. Your entry javascript file.

In your case I would just use CDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Feel free to accept the answer if it helped. :) I don't how does your stack look like but in general the problem was that you were trying to use frontend library in backend environment. — Michal, Feb 05 '18 at 18:24

score 1 · Answer 2 · answered Feb 03 '18 at 11:06

If you want to use the import keyword, you either have to use babel to transpile the code, OR use the .mjs file format. But this is not the main issue in your code.

You are trying to import bootstrap to NodeJs, which doesn't make much sense. NodeJs is server side javascript, bootstrap is for the frontend.

You should be using some kind of view engine in your application for handling frontend components. Checkout embedded javascript or pug for example.

However, nowadays people tend to use a frontend framework instead. Checkout popular choices like React, Vue, or Angular. React has a tool called create-react-app which makes it really easy to get started with.

Lastly, if you can give some insight on what you are trying to do with bootstrap, we may be able to give some more help.

Yes, I'm using handlebars (hbs) for the view engine. And, I'm just using Bootstrap for adding the navbar, footer and grid components to parts of the page(s). — Ron Allen Smith, Feb 05 '18 at 18:16

Adding Bootstrap to index.js

2 Answers2