CODEWITHSUNDEEP
node.jsexpressbowerejs
texas697
texas697

Reputation: 6397

how to setup node project with the proper paths to bower component files

I am trying to run a sample app chat application from here.sample chat I have all the node modules and bower components installed. I have all 3 projects running in command prompts without errors. But I cannot figure out why the bower components are not being found? I have done some searching but some of the solutions I found have not worked. other than 404 errors there is no other error messages. relevant code(I believe). 3 projects total with all of them containing files that refer to paths I am also working on windows 10 app.js in chat-main-app

var express = require('express'),
 path = require('path'),
 cookieParser = require('cookie-parser'),
 bodyParser = require('body-parser');

var routes = require('./routes');

var app = express();

 // view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', routes.index);

app.set('port', process.env.PORT || 3000);

 var server = app.listen(app.get('port'), function() {
    // log a message to console!
 });

 module.exports = app;

index.ejs in same project

<head>
<title>scotch-chat</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="libs/angular-material/angular-material.css">

<script src="libs/angular/angular.js"></script>
<script src="http://localhost:2015/socket.io/socket.io.js"></script>
<script type="text/javascript" src="libs/angular-animate/angular-animate.js"></script>
<script type="text/javascript" src="libs/angular-aria/angular-aria.js"></script>
<script type="text/javascript" src="libs/angular-material/angular-material.js"></script>
<script type="text/javascript" src="libs/angular-socket-io/socket.js"></script>
<script type="text/javascript" src="libs/angular-material-icons/angular-material-icons.js"></script>

<script src="js/app.js"></script>

chat-server-project index.js

//Import all our dependencies
var express = require('express');
var mongoose = require('mongoose');
var app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server);

//Set our static file directory to public
app.use(express.static(__dirname + 'public'));

//Route for our index file
app.get('/', function(req, res) {
//send the index.html in our public directory
  res.sendfile('index.html');
});

chat-web-app server.js

 var express = require('express'),
 path = require('path'),
 cookieParser = require('cookie-parser'),
 bodyParser = require('body-parser');

 var routes = require('./routes');

 var app = express();

 // view engine setup
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'ejs');

 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: true }));
 app.use(cookieParser());
 app.use(express.static(path.join(__dirname, 'public')));

 app.get('/', routes.index);

 app.set('port', process.env.PORT || 4000);

 var server = app.listen(app.get('port'), function() {
    // log a message to console!
  console.error('Port at 4k');
 });

 module.exports = app;

index.ejs in same project

<head>
<title>scotch-chat</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="libs/angular-material/angular-material.css">
<link rel="stylesheet" href="libs/MaterialDesign/css/materialdesignicons.css">
<script src="libs/angular/angular.js"></script>
<script type="text/javascript" src="libs/jquery/dist/jquery.min.js"></script>
<script src="http://localhost:2015/socket.io/socket.io.js"></script>
<script type="text/javascript" src="libs/angular-animate/angular-animate.js"></script>
<script type="text/javascript" src="libs/angular-aria/angular-aria.js"></script>
<script type="text/javascript" src="libs/angular-material/angular-material.js"></script>
<script type="text/javascript" src="libs/angular-socket-io/socket.js"></script>
<script type="text/javascript" src="libs/angular-material-icons/angular-material-icons.js"></script>

<script src="js/app.js"></script>

Upvotes: 2

Views: 395

Answers (1)

rmjoia
rmjoia

Reputation: 980

By default, bower uses the directory bower_components, and this should be inside your solution root folder. The directory can be overridden on the bower config file .bowerrc (try to look for it on your solution root folder.

I assume you ran the command bower install within your solution root folder, so, it must be somewhere, otherwise, bower install, will close without changes. If you want to make it install again use the command:

bower install --force

Please make sure that you have git (some packages and dependencies may require) and node installed, access the solution root path and run the following commands:

npm install

(assuming that one of the packages will be bower) run:

bower install

if not run:

npm install bower -g (to install globally and so that you can run bower from any folder) then;
npm install bower (to install on your solution) then;
bower install

All packages and their dependencies should be installed. To more information about bower package manager, please refer to bower and about .bowerrc and other options refer to bower configuration.

on the repo you mentioned scotch.io, if you browse to the the scotch-chat-main-app you'll see that a file named .bowerrc is present, checking it you will see:

{
    "directory" : "app/public/libs",
    "proxy":"http://127.0.0.1:8080",
    "https-proxy":"http://127.0.0.1:8080",
    "strict-ssl"  : false
}

So, all bower packages will be installed on that directory. Note: since you're using windows 10, make sure you run all the installs mentioned above in a terminal windows with Administrator privileges.

If you're running node / express under iisnode, there are some catches.. you don't mention it, so I will assume that you're not, so, to run the solution, just run the command:

gulp run

Let me know how it went.

Upvotes: 2

Related Questions