CODEWITHSUNDEEP
htmlnode.jsserverlocalhost
Cybernetiquettes
Cybernetiquettes

Reputation: 69

Node Server Does not Load HTML Page

I am having an issue here in my code... I have a server on NodeJS, which compiles very well without errors. But when I try to compile HTML files on the same root, localhost returns page not found.

Please check my codes below and the file tree. Correct me where I am wrong.

[SERVER.JS]

var express     = require('express');
var app         = express();
var bodyParser  = require('body-parser');
var morgan      = require('morgan');
var mongoose    = require('mongoose');
var path = require("path");
var passport    = require('passport');
var config      = require('./config/database'); // get db config file
var User        = require('./app/models/user'); // get the mongoose model
var port        = process.env.PORT || 3000;
dbName          = 'my_db_name';
dbHost          = 'localhost';
var jwt         = require('jwt-simple');

// get our request parameters
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// log to console
app.use(morgan('combined'));

// Use the passport package in our application
app.use(passport.initialize());

// demo Route (GET http://localhost:3000)
app.get('/', function(req, res) {
  res.send('Hello! The Application is running @ http://localhost:' + port + '/api');
});

// connect to database
//mongoose.connect(config.database);
mongoose.connect('mongodb://'+dbHost+'/'+dbName);//try this if the the first does not work

// serve client side code.
app.use('/',express.static('/'));

// pass passport for configuration
require('./config/passport')(passport);

// bundle our routes
var apiRoutes = express.Router();


// connect the api routes under /api/*
app.use('/api', apiRoutes);

// Start the server
app.listen(port);
console.log('Server running @: http://localhost:' + port);

[HOME.HTML]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Easytime Page</title>


<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="css/w3.css" />

</head>

<body ng-app="starter" ng-controller="AppCtrl">
  <ui-view></ui-view>  


<div class="w3-container w3-border" style="height:auto;" ng-app = "loginForm">
    <!--- header --->
    <div class="w3-container w3-teal">
        <header>
            <h2>Easytime Home</h2>
        </header>
    </div>

    <div ng-view></div>
    <div class="myContainer w3-left w3-content">
        <h3 style="text-align:center">Welcome</h3>       
    </div>

    <!--footer -->
    <footer>
        <div class="w3-container w3-teal others" style="margin-top:70px;"><h3>Copyright &copy; 2016, Eyo Eyo. All Rights Reserved!</h3></div>
    </footer>
</div>
</body>
</html>

<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="js/constants.js"></script>

FILE TREE ARRANGEMENT

Upvotes: 0

Views: 1277

Answers (1)

Cybernetiquettes
Cybernetiquettes

Reputation: 69

I have solved the problem by following each line of code one after another. I tried to compare the entire code with another server sample. I noticed that I did not include app.use('/client',express.static('client')); in order to serve client files.

Upvotes: 1

Related Questions