I've been trying to use express-ejs-layouts module.
My when I try second route, browser finds my JS and CSS resource file under my second EJS files -that was written by me into second route function.
What should I do?
My Layout appears properly with my first route process like the following.
my first route;
app.get('/', function(req, res) {
res.render('home/index');
});
my layout.ejs file;
<!DOCTYPE html>
<html lang="tr">
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<% include navbar %>
<%- body %>
<script src="js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
So far everything is good. My resource files (css and js) linked and I can see my home/index.ejs properly. And then I try my second route like the following;
my second route;
app.get('/user/:id', function(req, res) {
res.render('user/index');
});
My browser console gives the below errors;
Failed to load resource: the server responded with a status of 404
(Not Found) http://localhost:1337/user/bootstrap/css/bootstrap.css
Failed to load resource: the server responded with a status of 404
(Not Found) http://localhost:1337/user/css/styles.css
Failed to load resource: the server responded with a status of 404
(Not Found) http://localhost:1337/user/js/jquery.js
Failed to load resource: the server responded with a status of 404
(Not Found) http://localhost:1337/user/bootstrap/js/bootstrap.js
Express needs a 'public' named folder to check resources. So I've put my resources files into a ".../public/" folder, rewrote src link and I got succeed.
I've defined a new static path;
app.use(express.static(__dirname + '/public'));
An then I changed my new layout.ejs file like the below;
<!DOCTYPE html>
<html lang="tr">
<head>
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<% include navbar %>
<%- body %>
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
</body>
</html>
Related
I downloaded the latest copy of MathJax through Git, installed it somewhere, and wrote the following document:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Notes - Wenke's Patterns in Prehistory</title>
<script id="MathJax-script" async src="../../../../MathJax/e5/tex-chtml.js">
</script>
</head>
<body>
$ e^i $
</body>
</html>
When I try to run it in a browser the console prints the message Loading failed for the <script> with source “file:///home/username/underconstruction/MathJax/e5/tex-chtml.js”..
I believe the README.md file that comes with the download indicated that tex-chtml.js was supposed to be the file to link in the HTML document. I've seen elsewhere reference to a MathJax.js file but that was not included in my download.
You specify the location ("../..") of the file "tex-chtml.js" relative to the location of the HTML-page containing $e^i$. The file is likely not there as the warning message indicates. If you specify a path relative to the current HTML-page be also sure that the relative path is the same on your localhost and on the server.
A simple method for using MathJax is given on https://www.mathjax.org.
You do not need to download MathJax from anywhere. Just include the following lines in your HTML-file:
<head>
<script>
MathJax = {tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]}};
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-mml-chtml.js"></script>
</head>
I am trying to render the basic cesium viewer from a local development server using node.js with express (cesium 1.57 downloaded via npm). The page loads correctly when the CSS is loaded from cesium's servers, but not when I try to load it locally from my node_modules folder. I'd like to have the files server side so I can eventually change the display and certain sandbox settings for the infoboxes to suit the app I'd like to build.
This works:
index.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>mapsTest</title>
<script src="/scripts/Cesium.js"></script>
<link href="https://cesiumjs.org/releases/1.57/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
<!-- <link type=text/css href='/styles/widgets.css'></link> -->
</head>
<body>
<div id="cesiumContainer" style="width: 100%; height:100%"></div>
<script>
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhYzhjNjk0My04MzNjLTQyZTItOWRkOS1lZmQxYjE2YzM4NDYiLCJpZCI6MTAyMTYsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NTU5NjMzNjB9.DSk7rCttQeOvYyCnuesEtoiA8OUSGwitJaiBUUeqlxw';
var viewer = new Cesium.Viewer('cesiumContainer');
</script>
</body>
</html>
While this doesn't work:
index.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>mapsTest</title>
<script src="/scripts/Cesium.js"></script>
<!-- <link href="https://cesiumjs.org/releases/1.57/Build/Cesium/Widgets/widgets.css" rel="stylesheet" /> -->
<link type=text/css href='/styles/widgets.css'></link>
</head>
<body>
<div id="cesiumContainer" style="width: 100%; height:100%"></div>
<script>
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhYzhjNjk0My04MzNjLTQyZTItOWRkOS1lZmQxYjE2YzM4NDYiLCJpZCI6MTAyMTYsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NTU5NjMzNjB9.DSk7rCttQeOvYyCnuesEtoiA8OUSGwitJaiBUUeqlxw';
var viewer = new Cesium.Viewer('cesiumContainer');
</script>
</body>
</html>
app.js: setting up the routes for getting the local css file
app.use('/styles', express.static(__dirname + '/node_modules/cesium/Build/CesiumUnminified/Widgets'));
app.get('/styles/widgets.css', function(req, res) {
res.sendFile(__dirname + '/node_modules/cesium/Build/CesiumUnminified/Widgets/widgets.css');
});
I've tried copy and pasting the code that is pulled from the cesium css link into my local copy of widgets.css, though it still doesn't work, so I am wondering whether this has something to do with how node/express loads css files? There are no errors in the firefox or chrome consoles when I load the page.
I think you might just be missing rel="stylesheet" in the link there.
Also type="text/css" is missing the double-quotes.
I have a nodejs app (NodeJs+ React+ MongoDb) deployed on heroku . I am connecting to mongoDb database using mLab , when i run npm start from heroku console it says App listening on PORT: 47147 and mongoose connection successfull . But when i take the app (https://sheltered-spire-71661.herokuapp.com) It displays nothing . What may be the reason ? Any help is appreciated .
Adding the screenshot of the heroku console
and log
UPDATE
FYI i run the Heroku app in local , and it works perfect without any problem . I don't know the problem when deploying in Heroku . Screenshot below
UPDATE 2
index.html
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LMS</title>
<link rel="shortcut icon" href="/assets/images/favicon.ico" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="/assets/style.css">
<link rel="stylesheet" href="https://unpkg.com/react-tabs#2/style/react-tabs.css">
<link href="https://cdn.jsdelivr.net/npm/react-big-calendar#0.19.0/lib/css/react-big-calendar.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/8ff98e4aea.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<script src="/assets/javascript.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min.js"></script>
<script src="/bundle.js"></script>
</body>
</html>
When i have index.html like this in Heroku , its throwing me an error in console like
Uncaught SyntaxError: Unexpected token <
I thought its failing to understand the index.html file and i changed the bundle loader script like <script type="text/babel" src="/bundle.js"></script>
The error is gone but displaying blank page . Further i thought its not properly serving the static assets from this SO question Deploy to heroku : Uncaught SyntaxError: Unexpected token < . Then i taken view page source and checked files from the browser
and
<script src="/assets/javascript.js"></script>
and it was showing the code (https://my.herokuapp.com/assets/style.css and https://my.herokuapp.com/assets/javascript.js is working) . But when i access /bundle.js its redirecting back to the heroku app , unlike in local its showing the bundle js code . Express is serving static files like
//Landing
app.get("/", autoRedirect, function(req, res){
res.sendFile(path.resolve(__dirname, "public", "index.html"));
});
//Public files <this needs to stay right below app.get("/")!!!!
app.use(express.static(__dirname + "/public"))
Is it a problem of Heroku doesnt understand the bundle.js file ? I went to the Heroku app console and built the app once more with npm run build and the bundle.js is generated successfully , that also didn't made any changes to the app loader .
I have this project structure:
app
server.js
frontend
build
index.html
build directory is the result after npm run build in my React app (created with create-react-app). There are more files but I omit them for the example.
I want to serve the React app as static files, so in server.js, I have this:
app.use(express.static(path.resolve(__dirname, 'frontend/build')));
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'frontend/build', 'index.html'));
});
app.listen(9001);
I navigate to http://localhost:9001 in my browser and there are no errors but the screen is blank. React app is not shown.
If I run the React app (from inside frontend directory) with npm start, it works properly (in default webpack port 3000).
This is the build/index.html file (pretty printed):
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"/>
<title>React App</title><link href="/static/css/main.65027555.css" rel="stylesheet"></head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="/static/js/main.a4d4d402.js"></script>
</body>
</html>
If I navigate to http://localhost:9001/static/js/main.a4d4d402.js, I can see the javascript file.
I found the error. There was an error in the bootstrap imports in index.html. I was closing a tag twice. In my question looks well because I have pretty printed by hand and maybe I have corrected it somehow.
I use express on nodejs. The html-file I load doesn't get java-scripts and css-files.
index.html:
<!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">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
This is my express-part in nodejs:
app.get('/', function(req, res){
console.log(req.path);
fs.readFile('mongo_client/index.html',function (err, data){
if(!err)
{
res.writeHead(200, {'Content-Type': 'text/html','Content-Length':data.length});
res.write(data);
res.end();
}
else
{
res.writeHead(400, {'Content-Type': 'text/html'});
res.end("index.html not found");
}
});
});
The only console.log is "/" once. The css and js file isn't even requested.
Edit:
I used the static middleware but it doesn't work either:
app.use(express.static(__dirname + '/public'));
app.get('/', function(req, res){
fs.readFile('mongo_client/index.html',function (err, data){
if(!err)
{
res.send(data);;
}
else
{
res.send("index.html not found");
}
});
});
Therefore I put my js and css - data to the public - folder.
Everytime I try to connect I download the index.html file.
Does anyone have a working example for a simple webserver using express? Do I have to use the file-reader ... I think there's another way using express-middleware.
I just need a simple example of an express web-server that is supporting css and js ... I can't find anything that's just that basic.
app.get('/') will only respond to requests at the root, not anything beyond that. Your css and other assets are at /css/bootstrap.min.css which your route doesn't handle.
But for express, use the static middleware to do all that for you. http://expressjs.com/api.html#middleware
This article also explains the setup http://blog.modulus.io/nodejs-and-express-static-content
Update: a sample app
Express is capable of generating a sample app that supports static, with optional support for CSS pre-processors. Read their guide: http://expressjs.com/guide.html but the basic steps are to install express globally
npm install -g express
Then use the command line to generate the skeleton of your app
express --css stylus myapp
The above provides support for Stylus. You can specify less if you prefer. Or to generate it with support for basic css files
express myapp
Then cd into myapp, or whatever name you provided, and you can see how it's done.