I am going through the Manning Getting MEAN book. I want to use bootstrap sass and have loaded bootstrap-loader. When I run nodemon I get the following error:
/Users/mglaz/Projects/mean/theCMF/node_modules/bootstrap/dist/js/bootstrap.js:8
throw new Error('Bootstrap\'s JavaScript requires jQuery')
here's my app.js
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
require('jquery');
require('bootstrap');
require('bootstrap-loader');
var routes = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
and my package.json
{
"name": "loc8r",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.8.1",
"cookie-parser": "~1.3.3",
"debug": "~2.0.0",
"express": "~4.9.0",
"jquery": "^3.1.1",
"morgan": "~1.3.0",
"pug": "^2.0.0-beta6",
"serve-favicon": "~2.1.3"
},
"devDependencies": {
"bootstrap": "^4.0.0-alpha.4",
"css-loader": "^0.26.1",
"exports-loader": "^0.6.3",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"imports-loader": "^0.7.0",
"node-sass": "^3.13.1",
"postcss-loader": "^1.2.0",
"resolve-url-loader": "^1.6.1",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.14.0"
}
}
Have a look at jQuery not define in bootstrap module and http://blog.npmjs.org/post/112064849860/using-jquery-plugins-with-npm
You need to set the global jQuery variable
global.jQuery = require('jquery');
require('bootstrap');
Related
The homepage loads ok in my ReactJSAPP, but when I click on any link it throws the following error. Since I am new to ReactJS, I am not sure which file I should check and fix this issue. Nodejs is working on port 4407
Folder Structure
Not Found
404
Error: Not Found
at /home/abc/public_html/ReactNode/app.js:46:13
at Layer.handle [as handle_request] (/home/abc/public_html/ReactNodeNew/node_modules/express/lib/router/layer.js:95:5)
Index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
My package.json is
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^4.3.1",
"fixed-data-table": "^0.6.4",
"font-awesome": "^4.7.0",
"mysql": "^2.14.1",
"react": "^16.8.6",
"react-bootstrap": "^0.31.5",
"react-dom": "^16.8.6",
"react-redux": "^5.0.6",
"react-router": "^3.0.0",
"react-scripts": "3.0.0",
"redux": "^3.7.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:4007",
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
And app.js
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var index = require('./routes/index');
var users = require('./routes/users');
var app = express();
const port = process.env.PORT || 4007;
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
var mysql = require("mysql");
//Database connection
app.use(function(req, res, next){
res.locals.connection = mysql.createConnection({
host : '127.0.0.1',
user : 'nodejs',
password : '333365,',
database : 'nodejs',
port : '3306'
});
res.locals.connection.connect();
next();
});
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'frontend/build')));
app.use('/api', index);
app.use('/api/users', users);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname + '/frontend/build/index.html'))
})
var http = require('http');
module.exports = app;
var server = http.createServer(app);
server.listen(port);
I created a express app and having some big issues:
My routing is horrendous and can't get my 'Signin' and 'Signup' pages connecting to my home page. Some advice would be really helpful. (I've attached an image of my tree structure)
I'm also getting a error - throw new TypeError('Router.use() requires a middleware function but got a ' + gettype(fn))
My app.js
// define dependencies
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var session = require('express-session');
var passport = require('passport');
var ejs = require('ejs');
var ExpressValidator = require('express-validator');
var LocalStrategy = require('passport-local').Strategy;
var multer = require('multer');
//handle file uploads
var upload = multer({des: './uploads'});
var flash = require('connect-flash');
var mongo = require('mongodb');
var mongoose = require('mongoose');
var db = mongoose.connection;
// const PORT = 5500; // you can change this if this port number is not available
const router = express.Router();
var routes = require('./routes/index');
var users = require('./routes/users');
// app.use('/', routes);
// app.use('/users', users);
var app = express();
//view engine setup
app.use('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(express.static(path.join(__dirname, 'public')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use(cookieParser());
// Handle Sessions
app.use(session({
secret: 'secret',
saveUninitialized: true,
resave: true
}));
//passport middleware
app.use(passport.initialize());
app.use(passport.session());
//Express Validator middleware
app.use(ExpressValidator({
errorFormatter: function(param, msg, value){
var namespace = param.split('.'),
root = namespace.shift(),
formParam = root;
while(namespace.length){
formParam += '[' + namespace.shift() + ']';
}
return {
param : formParam,
msg : msg,
value : value
};
}
}));
//express messages middleware
app.use(require('connect-flash')());
app.use(function (req, res, next) {
res.locals.messages = require('express-messages')(req, res);
next();
});
//catch 404 and forward to error handler
app.use(function(req, res, next){
var err = new Error('Not Found');
err.status = 404;
next(err);
});
//error handlers
//development error handler
//will print stacktrace
if (app.get('env') === 'development'){
app.use(function(err, req, res, next){
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
//production erro handler
//no stacktraces leaked to user
app.use(function(err, req, res, next){
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
// //connect to database
// mongoose.connect('mongodb://localhost:27017/auth_tuts', { //replace this with you
// // useMongoClient: true
// }, (err, db) => {
// if (err) {
// console.log("Couldn't connect to database");
// } else {
// console.log(`Connected To Database`);
// }
// }
// );
module.exports = app;
My user.js
var express = require('express');
const router = express.Router();
// GET home page.
router.get('/', function (req, res, next) {
res.send('respond with a resource');
});
router.get('/signup', function (req, res, next) {
res.render('signup');
});
module.exports = router;
My index.js
var express = require('express');[enter image description here][1]
var router = express.Router();
// GET home page.
router.get('/', function(req, res, next){
res.render('index', { title: 'Express' });
});
module.exports = router;
my package.json file
{
"name": "project",
"version": "1.0.0",
"description": "College Project",
"main": "app.js",
"scripts": {
"start": "node ./bin/www"
},
"repository": {
"type": "git",
"url": "git+https://github.com/KevinKerin/kjs-webdesign.git"
},
"author": "Johnathan Munster",
"license": "ISC",
"bugs": {
"url": "https://github.com/KevinKerin/kjs-webdesign/issues"
},
"homepage": "https://github.com/KevinKerin/kjs-webdesign#readme",
"dependencies": {
"bcrypt": "^3.0.2",
"body-parser": "^1.18.3",
"connect-flash": "*",
"cookie-parser": "*",
"debug": "*",
"ejs": "^2.6.1",
"express": "^4.16.4",
"express-messages": "*",
"express-session": "^1.15.6",
"express-validator": "*",
"jsonwebtoken": "^8.4.0",
"mongodb": "*",
"mongoose": "^5.3.12",
"morgan": "*",
"multer": "*",
"nodemailer": "^4.6.8",
"nodemailer-smtp-transport": "^2.7.4",
"passport": "*",
"passport-http": "*",
"passport-local": "*",
"serve-favicon": "*",
"shortid": "^2.2.14"
}
}
File Structure
Issue fixed. I had .use instead of .set(‘views’, path...)
Working on my routing now.
I just started learning node.js and following the webscraper example in this. After I typed "npm start" in the terminal and visited localhost:8081/scrape. I got this error message. I'm sure this file directory is correct.
Error: Not Found
at C:\Users\user\Desktop\Node.JS\webscraper\app.js:35:13
File tree:
here
Package.json
{
"name": "webscraper",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.17.1",
"cookie-parser": "~1.4.3",
"debug": "~2.6.3",
"express": "~4.15.2",
"jade": "~1.11.0",
"morgan": "~1.8.1",
"serve-favicon": "~2.4.2",
"request": "latest",
"cheerio": "latest"
}
}
After I deleted the following code generated by express in app.js, it works! May I ask why?
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', index);
app.use('/users', users);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
I'm having issues deploying my app on Heroku. I keep getting a screen in my browser saying Application Error. From what i've read this is something with MongoLab.
I have set my PROCESS.ENV.MONGOLAB_URI correctly on heroku and I can't get it to work. I have also tried adding a new user to MongoLAB for this DB and even that user won't work as well.
I am Process.env.PORT because I am using Socket.io. Is it something in my app.js?
var express = require('express');
var http = require('http')
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
mongoose.connect(process.env.MONGOLAB_URI || 'mongodb://localhost/queueThat');
var db = mongoose.connection;
var routes = require('./routes/index');
var app = express();
var server = http.createServer(app);
//Stuff for Sockets
var io = require('socket.io').listen(server);
//sockets
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');
app.engine('html', require('ejs').renderFile);
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
//Connect to the Socket
io.on('connection', function(socket){
socket.on('song send', function(song){
io.emit('song send', song)
console.log('artist on')
})
socket.on('artist send', function(artist){
console.log('artist on')
io.emit('artist send', artist)
})
//Disconnect
socket.on('disconnect', function(){
console.log('user disconnected');
});
});
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
var port = (process.env.PORT || 8000);
server.listen(port, function() {
console.log("Listening on " + port);
});
module.exports = app;
I have also tried adding my node and NPM versions to no avail. Any ideas? Package.json looks like this.
{
"name": "queueThat",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.13.2",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"ejs": "^2.3.4",
"express": "~4.13.1",
"mongoose": "*",
"morgan": "~1.6.1",
"serve-favicon": "~2.3.0",
"socket.io": "*"
},
"engines": {
"node": "5.4.0",
"npm": "3.3.12"
}
}
Application Error doesn't mean that there is something wrong with MongoLAB, not necessarily.
To be clear you need to double check few places:
You need to have proper Procfile in the root folder of your project
Be aware of postinstall npm script.
Also you could check your logs on heroku heroku logs -n 200 (200 or more lines if needed) to be sure what's the problem you have.
My package.json
{
"name": "lays-vroubek",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "supervisor ./bin/www"
},
"dependencies": {
"body-parser": "~1.13.2",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"express": "~4.13.1",
"jade": "~1.11.0",
"less-middleware": "^2.0.1",
"morgan": "~1.6.1",
"reload": "^0.7.0",
"serve-favicon": "~2.3.0",
"supervisor": "^0.9.1"
}
}
My app.js
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var lessMiddleware = require('less-middleware');
var routes = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(lessMiddleware(path.join(__dirname, 'public'), {
force: true,
debug: true,
once: false
}));
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
I run my app with comand: "$ DEBUG=lays-vroubek:* npm start" but auto-reload does not work without any error msg (app runs)
lays-vroubek#0.0.0 start /Users/jan.michalik/Workspace/Sites/lays-vroubek
supervisor ./bin/www
Running node-supervisor with
program './bin/www'
--watch '.'
--extensions 'node,js,/bin/www'
--exec 'node'
Starting child process with 'node ./bin/www'
Watching directory '/Users/jan.michalik/Workspace/Sites/lays-vroubek' for changes.
Press rs for restarting the process.
lays-vroubek:server Listening on port 3000 +0ms
Any help?
For example, you have an express app named backend. Than you can use
DEBUG=backend:* supervisor -w server -e ejs,js,json bin/www
to autorestart express app if any of ejs, js or json files is changed inside server dir (usual, i place my express app into server dir)