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
– Mario Nikolaus, Commented Feb 3, 2018 at 10:06
You can't use import keyword but you can use require check this answer — Amr Aly
– Amr Aly, Commented Feb 3, 2018 at 10:34

Michal · Accepted Answer · 2018-02-03 10:44:40Z

3

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>

edited Feb 3, 2018 at 10:44

answered Feb 3, 2018 at 10:38

Michal

5,2738 gold badges35 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ron Allen Smith Over a year ago

Yes, that's what I ended up doing.

Michal Over a year ago

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.

Pubudu Dodangoda · Accepted Answer · 2018-02-03 11:06:32Z

1

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.

answered Feb 3, 2018 at 11:06

Pubudu Dodangoda

2,8942 gold badges26 silver badges46 bronze badges

1 Comment

Ron Allen Smith Over a year ago

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).

Collectives™ on Stack Overflow

Adding Bootstrap to index.js

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related