This is my server
const path = require('path');
const express = require('express');
const exphbs = require('express-handlebars');
const bodyParser = require('body-parser');
const handlebars = exphbs.create({
defaultLayout: 'index',
extname: 'hbs'
});
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
require('./Server/Routes/questionnaire')(app);
app.engine('hbs', handlebars.engine);
app.set('view engine', 'hbs');
app.use(express.static(path.join(__dirname, 'Public')));
app.listen(8888, function () {
console.log('Server running on port 8888');
});
and I use this route
module.exports = function (app) {
app.get('/questionnaire', function (req, res) {
res.render('questionnaire', {
eventInfo: {
description: "TEST",
imgHost: "Resources/img_logo.png"
}
});
});
};
the code works fine. When adding a parameter to the route /questionnaire/:id no css files or client code is found.
What am I missing? Using a parameter in my route should have the correct syntax. This error just appears, when using parameters in the routes.
EDIT:
The whole directory
First I use my default HTML index.hbs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<link href="Style/base.css" rel="stylesheet">
<link href="Style/header.css" rel="stylesheet">
<link href="Style/button.css" rel="stylesheet">
<link href="Style/input.css" rel="stylesheet">
<link href="Style/link.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="Client/header.js"></script>
<body>
<div id="header">
</div>
{{{body}}}
</body>
</html>
and I render my questionnaire.hbs template
<link href="Style/Templates/questionnaire.css" rel="stylesheet">
<script src="Client/Templates/questionnaire.js"></script>
<div id="content">
</div>
As mentioned in the comments, I have to write /....
When using a parameter, it seems I have to write full paths like
"/Resources/img_logo.png"
instead of
"Resources/img_logo.png"
Try this in your app.js
//comment this line
//app.use(express.static(path.join(__dirname, 'Public')));
//add this middleware
app.use(express.static('./Public'));
app.use('/Style',express.static('./Public/Style'));
app.use('/Client',express.static('./Public/Client'));
Related
I am getting this error "Error: C:\Users\Don-Alex Antoine\Desktop\Daily-Scripture\templates\views\home.hbs: The partial headers could not be found" when I run my node app.
This is the code inside my app.js file
const express = require('express');
const path = require('path');
const hbs = require('hbs');
const body = require('body-parser');
const request = require('request');
const app = express();
app.listen(process.env.PORT|| 3000,()=>{
console.log('server is listening on port 3000');
});
//Defined path for express config
const publicDirectoryPath = path.join(__dirname, "../public");
const viewsPath = path.join(__dirname, '../templates/views');
const partialsPath = path.join(__dirname, '../templates/partials');
app.use(express.static(publicDirectoryPath));
app.set('views', viewsPath);
app.set('view engine', 'hbs');
hbs.registerPartials(partialsPath);
app.use(body.urlencoded({extended: true}));
app.get('/', (req, res)=>{
res.render('home');
});
Everything works perfectly until I change my header.hbs into this:
<!DOCTYPE html>
<html>
<head>
<meta>
<title>Daily-Scripture</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
my home.hbs file into this:
{{>headers}}
<h1>PlEASE WORK!!</h1>
{{>footer}}
and my footer.hbs file into this
<footer></footer>
</body>
</html>
Now when I add everything into the home.hbs file like this:
<!DOCTYPE html>
<html>
<head>
<title>Daily-Scripture</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>PLEASE WORK</h1>
</body>
</html>
Everything works perfectly. I wanted to have a separate hbs file that contains the necessary headers such as the title, and the link to the stylesheet and use that in other hbs files if that's even possible. If you guys know what I'm doing wrong here I would appreciate the help.
This is my index.js file
const express = require('express')
const bodyParser = require('body-parser')
const getRouter = require('./routes/getRoute')
const path = require('path');
const expressHbs = require('express-handlebars');
const app = express();
app.engine('hbs', expressHbs({
defaultLayout: false
}));
app.set('view engine', 'hbs');
// app.set('views', 'views');
app.use(bodyParser.urlencoded({extended: false}));
app.use(express.static(path.join(__dirname, 'public')));
app.use('/get',getRouter.router);
app.listen(3000, ()=>{
console.log('server has started on port: 3000')
})
And this is my getRouter.js file
const express = require('express')
const router = express.Router();
const path = require('path');
const data = require('./data');
let message = `It's Working`;
router.get('/', (req,res,next)=>{
res.render(path.join(__dirname, '..', 'views/index'), {msg: data.data.codename});
});
exports.router = router;
exports.message = message;
And finally, this is my index.hbs file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<h1>{{msg}}</h1>
</body>
</html>
Now whenever i change the route from / to basically anything like /codename inside getRouter.js , the styles inside index.hbs gets turned off somehow and only pain html is rendered.
Can someone help me figure this out as which part of the code is causing this? Thank you
I am not getting the external path while using node.js with the front end. My code is below:
app.js:
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, '/public')));
app.use('/', indexRouter);
routes/index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.sendFile(__dirname + '/index.html');
});
module.exports = router;
public/index.html:
<!DOCTYPE html>
<html lang="en" ng-app="SSMS">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Chinmaya Sahu">
<title>...:::WELCOME:::...</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="/javascript/angularjslatest.js" type="text/javascript"></script>
<script src="/javascript/angularuirouterlatest.js" type="text/javascript"></script>
<script src="/javascript/route.js" type="text/javascript"></script>
<link href="icons/font-awesome/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div ui-view>
</div>
<script src="/javascript/bootstrap.min.js"></script>
<script src="/controller/dashboardController.js"></script>
<!--<base href="/cab/admin/"> -->
</body>
</html>
Here my issue is in index.html the external files are not coming. Here I need to access those files present inside public/javascript path.
you are setting app.use(express.static(path.join(__dirname, '/public'))); and i think your index.html is in the public folder, so in the route you dont need to use __dirname like this res.sendFile(__dirname + '/index.html'); . I think the right way is res.sendFile('index.html');
I have developed a simple MEAN stack app (with Angular 4 for UI).
It works fine in my local Node, but when I deploy the same on Ubuntu it gives
Uncaught SyntaxError: Unexpected token < : in browser console
Here is my app.js content
const app = express();
const users = require('./routes/users');
const client = require('./routes/client');
// Port Number
//const port = 3000;
// Port Number
const port = process.env.PORT || 3001;
// CORS Middleware
app.use(cors());
// Set Static Folder
app.use(express.static(path.join(__dirname, 'public')));
// Body Parser Middleware
app.use(bodyParser.json());
// Passport Middleware
app.use(passport.initialize());
app.use(passport.session());
require('./config/passport')(passport);
app.use('/users', users);
app.use('/client', client);
// Index Route
app.get('/', (req, res) => {
res.send('Invalid Endpoint');
});
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'public/index.html'));
});
// Start Server
app.listen(port, () => {
console.log('Server started on port '+port);
});
My index.html under public folder
<html lang="en">
<head>
<meta charset="utf-8">
<title>MEAN</title>
<base href=".">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!--Bootstrap and jQuery online links-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- For login Html -->
<link rel="stylesheet" href="assets/icons/simple-line-icons.css">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>
Try changing: 'public' to: '/public', maybe the relative path helps?
I am trying to make a page which just receives a get request from my index.js file and just displays "hello user". I have created a 'users.ejs' file in my express app which just renders a string from a 'users.js' file. There is a form in my index.ejs file which redirects to my users directory. The index file works well when I type the '/' directory in the url box but for some reason, the file throws a 404 not found error in the browser when I hit the submit on the form in the first page instead of showing the 'users.ejs' page, can anyone tell me why it does this?
index.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p><br>
<form action='/users' method='get'>
Enter Name: <input type='text' name='thetext'></input><br><br>
<input type='submit' id='checkresponse'>enter</button>
</form>
<script type = 'text/javascript' src = '/dist/jquery.js'></script>
<script type = 'text/javascript' src = '/js/response.js'></script>
</body>
</html>
index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Expr-Ass' });
});
module.exports = router;
users.js
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/users', function(req, res, next) {
res.render('users', {star:'Sparksiano'});
});
module.exports = router;
users.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= star %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1>Welcome user!</h1>
</body>
</html>
Based off of comments below you may want to try something like this:
users.js
var express = require('express');
var router = express.Router();
/* Notice the path change */
router.get('/', function(req, res, next) {
res.render('users', {star:'Sparksiano'});
});
module.exports = router;
It sounds like you may be mounting your path to include a /users and then having a route that has a path of /users. Would be easier to troubleshoot if you posted the rest of the server side code.
I place the various ejs files in a folder and then point the express router to use that folder as a path:
var app = express();
app.set('port', 6000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
Then I route them to those pages:
app.get('/', function (req, res) {
res.render('index', {title: 'Express'});
});
app.get('/users', function (req, res) {
res.render('users', {star:'Sparksiano'});
});
Make sure the users.ejs page is in the same folder.