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?
Related
Problem in the template engine in express validation
I m expecting to resolve my problem
app.js
const express=require('express')
const app= express;
const port = 5000;
//set template engine
app.set('view engine','ejs')
//navigation
app.get('',(req,res)=>{
res.render('index')
})
app.get('/resgiter',(req,res)=>{
res.render('resgiter')
})
app.listen(port,() =>
console.info(`App listening on port:${port}`)
)
error in the template engine
You missed to invoke express in second line of Your code:
Instead of:
const app = express;
You should provide:
const app = express();
and forward slash / in this snippet:
app.get("/", (req, res) => {
res.render("index");
});
app.js
const express = require("express");
const app = express();
const port = 5000;
//set template engine
app.set("view engine", "ejs");
//navigation
app.get("/", (req, res) => {
res.render("index");
});
app.get("/resgiter", (req, res) => {
res.render("resgiter");
});
app.listen(port, () => console.info(`App listening on port:${port}`));
index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>ejs it's Awesome! ;-)</h1>
</body>
</html>
folder&file structure and console output:
browser output:
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');
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'));
Good day Folks,
I included shim.min.js as per this link here. This was needed in order to be able to support IE 11. But now i am getting the strange error:
Can some one help me to understand this error please.
This is how I included as per below:
<head>
<meta charset="utf-8">
<title>At2</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script type="text/javascript" src="node_modules/core-
js/client/shim.min.js"></script>
<body>
<app-root>Loading...</app-root>
See my node server:
let express = require("express");
var path = require('path');
let app = require('express')();
let http = require('http').Server(app);
const bodyParser = require('body-parser');
// // Parsers for POST data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'dist')));
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'dist/index.html'));
});
const port = process.env.PORT || '3000';
app.set('port', port);
http.listen(port, function() {
console.log('listening on *:3000');
});
I have the following server.js file for my react application:
var express = require('express');
var path = require('path');
var port = process.env.PORT || 8080;
var app = express();
app.use(express.static('src/client/'));
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname + '/src/client/index.html'))
});
app.listen(port);
console.log('server started');
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/foundation.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
</head>
<body>
<div id="app" />
<script src="bundle.js" type="text/javascript"></script>
</body>
</html>
when I hit "http://localhost:8080/" the screen is blank and I have a console error (Uncaught SyntaxError: Unexpected token <) however I can easily access all of the css and js files.
If I hit "http://localhost:8080/css/style.css" I can see the stylesheet.
I have updated the following:
from
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname + '/src/client/index.html'))
});
to
app.get('/', (req, res) => {
res.sendFile(path.resolve(__dirname + '/src/client/index.html'))
});
if you want to redirect to other file then do like that and will render signup.html when u call like "http://localhost:8080/signup
var app = require('express')();
app.get('/signup',function(req,res){
res.sendFile(path.join(__dirname+'/src/client/signup.html'));});
if you want to home page mean get request from same directory do like that so this will render when request like this "http://localhost:8080/
var app = require('express')();
app.get('/',function(req,res){
res.sendFile(path.join(__dirname+'/src/client/index.html'));});