Include css to html using express - javascript

I am trying to include a css sheet to my simple html page.
I am using parse.com hosting to host a dynamic webpages that uses express.
There is a ton of answers on this questions, but none of them seemed to work for me.
I am trying to include my css file from my .ejs page with this line of code
<link rel="stylesheet" type="text/css" href="css/content.css" />
I copyed my css folder inside the public floder
The most suggested answer is to add this line of code:
app.use(express.static(__dirname + '/public'));
but it did not work.
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
// Global app configuration section
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
// This is an example of hooking up a request handler with a specific request
// path and HTTP verb using the Express routing API.
app.get('/content/:id', function(req, res) {
res.render('content', {message: "hi"});
});
I am following this guide to set up express:
https://www.parse.com/docs/hosting_guide#webapp-started
when I try to deploy my code, I get this error "Update failed with Could not load triggers. The error was ReferenceError: __dirname is not defined"
What am I doing wrong here?

After looking into this problem for some more time, I read this on parse.com website.
"our Express app can sit side-by-side with any static content you deployed from your public folder. When a request goes to a URL of your subdomain, Parse will first look for a matching file in the public directory. If there is no match, then Parse will invoke any Express request handlers that you have registered in Cloud Code. If there is still no match, Parse will render a "404 Not Found" page."

Related

javascript src file 404 (Not Found)

I am facing error "file not found" in an angular javascript. I am using Nodejs and express for server and angularjs in html5. AngularChart.html is in "public" folder in which I am trying to refer one javascript in one level up.
script type="text/javascript" src="../check.js"
It is giving me the error in console.
GET http://localhost:3000/check.js 404 (Not Found)
Here is my folder structure.
\myapp\public\AngularChart.html
\myapp\check.js
it works when in refer files folder down but nothing working in folder up. I suspect it may be because of the __dirname in app.js which is as below.
var express = require('express');
var app = express();
app.use(express.static(path.join(__dirname, 'public')));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');
Please help.
Thanks
Your chart.js should be public so add it inside the public directory otherwise it gives a 404 error (Not found) since it is not visible to the client.(browser)

Having all website paths load the same static website in express

In my express server, I want to have all paths load the same static website, which I tried doing with the following code:
const express = require('express');
const app = express();
app.use('*', express.static('build'));
app.listen(3000);
Unfortunately I am presented with the following console errors when I navigate to any path on localhost:
:3000/main.js/:1 Uncaught SyntaxError: Unexpected token <
When attempting to view the JS file with the error, it seems to be serving index.html in its place.
I know this is due to the wildcard, but I can't think of a way to cleanly exclude all file names and paths from the static server.
I think you're looking for something a little more like this..app.use(express.static('public')
if your tree looks like
ProjectName
| server.js
| public
| index.html
you don't need the * as a parameter since setting the express.static sets the folder open to public view. This is how you separate your server code and client code. Be careful not to expose your entire project directory as people will then have access to your server code. This is why you're client files should be kept in a public folder or a www folder (common practices)
--EDIT
//this will server css, and js files so they can be linked into the html
app.use(express.static(__dirname + '/public'));
//this will force all url's except the public files to be given the index.html file.
app.use('*', function(req, res) {
res.sendFile(__dirname + '/public/index.html');
});

How to render HTML view with parameters using ExpressJS (on the home/root view)?

I'd like send a parameter and render a html file when the user go to the home page of my app.
Here is what I did so far:
app.set('view engine', 'ejs');
app.use(express.static(__dirname + '/public'));
app.get('/', function (req, res) {
console.log('Hi !'); // never displayed
res.render('index', { foobar: 'foobar'});
});
The HTML is properly rendered (probably due to express.static) but app.get('/') seems to be never called so I can't return the variable.
How can I return a variable from a call to '/' with the static HTML page public/index.html?
My ultimate goal is to be able to use foobar in my JS without any additional call to the server. Could you help me to achieve this?
If you have a file named index.html in your public/ directory, express.static() will return that file if the url / is requested, so your route handler will never get passed the request.
Generally, templates are stored in a separate directory than static (public) resources. Express, by default, will look for templates in the ./views directory (unless you tell it otherwise) so if you move your index.html to there it will get rendered by EJS (but see below), and you can use your parameters in it.
Since EJS will by default look for files ending with a .ejs extension, if you want to keep on using .html, you need to set up Express as follows:
var ejs = require('ejs');
...
app.set('view engine', 'html');
app.engine('html', ejs.renderFile);
This tells Express to look for files with extension .html in the ./views directory, and to render those files using EJS.
var express = require('express');
var router = express.Router();
router.get('/index',function(req,res){
res.sendFile(path.resolve('./public/index.html'));
});
module.exports = router;

Webpage cannot find certain files

I am building a simple sandbox/practice style website on heroku I am trying to learn nodejs and I am learning Angular. After much hit and miss I got the server to load my home.html page, however it cannot seem to find my vendor scripts. Such as my angular, contollers, and some images/css.
The path I have setup for angular is: <script src="/vendor/angular.min.js"></script>
<script src="/controller.js"></script>
This is coming from a localhostconnection by the way, so http://localhost Here is an example of what my simple index.js in node looks like:
var express = require("express");
var app = express();
app.set("port", (process.env.PORT || 5000));
app.engine('html', require('ejs').renderFile);
app.set('views engine', 'html');
app.use(express.static(__dirname + "/public"));
app.get("/", function(request, response) {
response.render("home.html");
});
app.listen(app.get("port"), function() {
console.log("Node app is running at localhost:" + app.get("port"));
});
this is located in the root of the webfiles and it points to a views folder which includes my home.html (how I got my home page to finally load) However it still says it cannot find my vendor scripts.
These are located inside their own vendor folder that is in the root folder, and the views folder is also its own folder in the root folder the setup is like so:
-views
---home.html
-vendor
--some vendor folders(bootstrap etc)
---angularjs.js and other vendor scripts
I am sure I am missing something simple here, but I am a beginner with nodejs and still learning at this point. Thank you ahead of time for the help, and let me know if I can offer anymore information.

In express router method is not working if i serve static files

In my node application first i want to serve my static files and then using router method depending upon the incoming request i will query the DB and get the body of the html page then i will send this body content to the client side and finally using Backbone.js i will render this body in my html page.Now what is my problem means express router method is not working if i serve static files.But if i remove the below line means my router is working.
app.use(express.static(__dirname + '/public'));
app.js
var express=require('express');
var app=express();
app.use(express.static(__dirname + '/public'));
app.get('/',function(req,res){
console.log('router called successfully...');
res.send('body of the page');
res.end();
});
app.listen(8011);
app.use(express.static(__dirname + '/public'));
Your unnecessary anonymous function is screwing up how the middleware is supposed to work. The above line is in 95% or more of all express sample apps. Not sure why you decided to deviate from that, but your version is a useless middleware that creates a static middleware and immediately discards it.

Categories

Resources