I have written a simple express script to serve a webpage with embedded javascript. However, the server can't seem to find any of the files that I am giving to it. What's more frustrating, sometimes it seems to work, only for it to break again when I change an irrelevant bit of code.
All of the files are where I am telling the script, but I constantly get the following kind of error:
GET http://localhost:55154/jsPsych/jspsych.js net::ERR_ABORTED 404 (Not Found)
Here is the express code:
// --- LOADING MODULES
var express = require('express');
// --- INSTANTIATE THE APP
var app = express();
// --- STATIC MIDDLEWARE
app.use(express.static(__dirname + '/public'));
app.use('jsPsych', express.static(__dirname + "/jsPsych"));
// --- VIEW LOCATION, SET UP SERVING STATIC HTML
app.set('views', __dirname + '/public/views');
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
// --- ROUTING
app.get('/', function(request, response) {
response.render('index.html');
});
app.get('/experiment', function(request, response) {
response.render('go_no_go.html');
});
// --- START THE SERVER
var server = app.listen(process.env.PORT, function(){
console.log("Listening on port %d", server.address().port);
});
And here is the relevant bit of javascript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../jsPsych/jspsych.js"></script>
<link type= "text/html" href="jsPsych/css/jspsych.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jsPsych/plugins/jspsych-html-keyboard-response.js"></script>
<script type="text/javascript" src="jsPsych/plugins/jspsych-image-keyboard-response.js"></script>
<script type="text/javascript" src="jsPsych/plugins/jspsych-survey-text.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
do you have to move up a directory to access jspsych.js? if not remove the ".." in your relative path to make sure that the relative path lines up with your files.
Related
I started using phaser and typescript for a school project, but when i start the local server made with node.js the browser is not able to load 3 typescript files and sends this error message:
"mismatch ("text/html") of the MIME type (X-Content-Type-Options: nosniff)"
for the moment i did a simple local server with node.js:
const express = require('express');
const app = express();
app.use(express.static(__dirname + 'public'));
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
});
app.listen(8888, () => {
console.log('Server listening on http://localhost:8888');
});
i have also an index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
<script type="text/javascript" src="/Game.ts"></script>
<script type="text/javascript" src="/scene/Boot.ts"></script>
<script type="text/javascript" src="/scene/GameScene.ts"></script>
</head>
</html>
I thought that the problem was the missing "type="text/javascript" but nothing has changed since i added it. I don't know what to do.I found many possible solutions but no one worked.
For my web app I am using ejs with express and parse.com on the backend.
I am having an issue with adding stylesheet and all the answers to this question I was able to find are not solving my problem. I thought maybe showing my code would help to solve it.
My stylesheet directory is public/css/style.css
See below the code from cloud/app.js
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
app.set('views', 'cloud/views'); // Specify the folder to find templates
app.set('view engine', 'ejs'); // Set the template engine
app.use(express.bodyParser()); // Middleware for reading request body
var Movies = Parse.Object.extend('Movies');
app.get('/', function(req, res) {
var query = new Parse.Query(Movies);
query.find({
success: function(results) {
res.render('movie-list', { movies: results });
},
error: function(results, error) {
}
});
});
app.listen();
And here is my template, located in the views:
<html>
<head>
<title>Movies</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" type="text/css">
</head>
<body>
<h1>Movies</h1>
<ul id="categoryList" class="list-group">
<%
for (var i = 0; i < movies.length; i++)
{
var movie = movies[i];
%>
<li class="list-group-item"><%= movie.get('Movie')%></li>
<%
}
%>
</ul>
</body>
</html>
Any help would be greatly appreciated! Thank you!
Let me answer my own question. I deleted the line
app.use(express.static(__dirname + '/public'));
and left link to stylesheet in the head of my template as it is:
<link href="/css/style.css" type="text/css">
Now my stylesheet is working.
I haven't tested your code, but looking at my Parse web apps, my links to stylesheets start with /
Try changing
<link href="css/style.css" type="text/css">
to
<link href="/css/style.css" type="text/css">
Good luck!
Please include following in your app.js:
var path = require('path');
app.use('/css',express.static(path.join(__dirname, 'public/css')));
Now reference your css as : <link href="css/style.css" rel="stylesheet">
It should work for you.
But i think it's important to understand about express static middleware and why i am telling you to include those lines.
express.static middleware is responsible for serving the static assets of an Express application. How it works:
Serve static content for the app from the "public" directory in the
application directory
// GET /style.css etc
app.use(express.static(__dirname + '/public'));
Mount the middleware at "/static" to serve static content only when
their request path is prefixed with "/static"
// GET /static/style.css etc.
app.use('/static', express.static(__dirname + '/public'));
Serve static files from multiple directories, but give precedence to
"./public" over the others
app.use(express.static(__dirname + '/public'));
app.use(express.static(__dirname + '/files'));
app.use(express.static(__dirname + '/uploads'));
So these are three different ways you can use express static middleware.
Assuming that you use the express generator (npm install express-generator -g), any style have to be added to the /public/stylesheets/style.scss files
I am learning Node.js and Express (version 4.11). Currently, I am trying to create a basic web app that uses a stylesheet. In an attempt to do this, I have the following HTML:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Description">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="/public/fonts/icomoon.css" />
<link rel="stylesheet" type="text/css" href="/public/css/style.css" />
</head>
<body>
<h1 class="title">Test</h1>
</body>
</html>
When this HTML is loaded, I get 404 errors for my icomoon.css file and my style.css file. I'm confused, because I've followed the other similar post on SO. My server.js file looks like the following:
var express = require('express'); // routing-engne
var expressHbs = require('express-handlebars'); // view-engine
// Setup the app to use Handlebars as the view engine
var app = express();
app.engine('hbs', expressHbs({extname:'hbs', defaultLayout:'layout.hbs'}));
app.set('view engine', 'hbs');
// Add support for static files (css, fonts, images, etc.)
app.use(express.static(__dirname + '/public'));
app.get('/', function(req, res) {
var viewModel = {};
res.render('/index', viewModel);
});
// Start the app on port 3000
app.listen(3000);
console.log('Ready!');
I thought the line written as app.use(express.static ... would serve up my static files. However, it is not. How do I serve up my .css files?
Thank you!
Use this:
app.use('/public', express.static(__dirname + '/public'));
I'm taking a course (on MEAN) and it starts by trying to get something running end-to-end. The point now is to add in the Javascript necessary to make Angular work. I'm having some kind of simple problem including the scripts.
The error I'm getting is (firebug), which appears to complain about the entire index.html file, is:
The Jade code is short. It is an index.jade file which extends a layout.jade file which includes in all the js files:
extends ../includes/layout
block main-content
section.content
div(ng-view)
h2 some regular text 5
This produces the following index.html file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/vendor/toastr/toastr.css">
<link rel="stylesheet" href="/css/site.css">
</head>
<body ng-app="app">
<script type="text/javascript" src="/vendor/jquery/jquery.js"></script>
<script type="text/javascript" src="/vendor/angular/angular.js"></script>
<script type="text/javascript" src="/vendor/angular-resource/angular-resource.js"></script>
<script type="text/javascript" src="/vendor/angular-route/angular-route.js"></script>
<script type="text/javascript" src="/app/app.js"></script>
<section class="content">
<div ng-view></div>
<h2>some regular text 5</h2>
</section>
</body>
</html>
================ UPDATE ========
It appears Node is substituting the index.html file for the assets. The project directory structure is:
The server.js file which node runs is:
var express = require('express');
var stylus = require('stylus');
// set env variable to determine if in production or development mode; this contains environment if set my MODE
var env = process.env.NODE_ENV = process.env.NODE_ENV || 'development';
// create express application
var app = express();
function compile(str, path) {
return sytle(str).set('filename', path);
}
// configure express
//app.set('views', __dirname + '/server/views');
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(stylus.middleware({
src: __dirname + '/public',
compile: compile
}));
console.log("dirname:" + __dirname);
app.use(express.static(__dirname + '/public'));
//app.use(express.static(path.join(__dirname, '/public')));
app.get('/partials/:partialPath', function(req, res) {
res.render('partials/' + req.params.partialPath);
});
app.use(express.logger('dev')); //- logger no longer bundled with Express
app.use(express.bodyParser());
// add routes:
// We won't tell the server specifically what routes to handle. We'll have the client-side be
// responsible to server up and 404 notices. Client-side will have to specify all routes.
// Other solution is to coordinate your routes, so that every client route is also listed on the server.
// Far more customary to have a server side have a catch all that lists up a 404 page.
app.get('*', function(req, res) {
res.render('index');
})
var port = 3030;
app.listen(port);
console.log("listening on port: " + port + " ...");
This looks like a path issue as the page is not able to access your assets directory. Make sure your public folder is set right in your node server code. It should be along the lines of app.use(express.static(path.join(__dirname, 'public_folder_name')));. Looking at your folder structure, your server.js is nested in server folder and not at the same level as your public folder. Try app.use(express.static(__dirname + '/../public'));
I'm having a small problem with my project.
I'm using node and express for a little webpage .. it is rendering the html page, but the javascript file (test.js) is not sent to the user ..
<!doctype html>
<html>
<head>
<title>Spektrum</title>
<script src="test.js"></script>
<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
<style>
canvas{
}
</style>
</head>
<body>
<!-- some stuff -->
</body>
</html>
Node.js file:
var http = require('http'),
fs = require('fs'),
express = require('express'),
app = express();
app.use(express.bodyParser());
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
// .....
app.listen(8080, function() {
console.log('Server running at http://127.0.0.1:8080/');
});
Any idea how to send the javascript file with the html file to the user?
Greetings,
JS
you need to use static middleware to serve file (test.js needs to exist)
example:
// GET /javascripts/jquery.js
// GET /style.css
// GET /favicon.ico
app.use(express.static(__dirname + '/public'));