I'm running my NodeJS server and testing it on localhost:3000. Everything is working fine, but the font-awesome icons are showing up as if the font files are missing. It does the same thing in Firefox and Chrome. (I even checked in firebug and verified in the Net tab that all expected libraries were coming to the web page.)
EDIT: Most of the details are irrelevant. Read the accepted answer before wasting time reading my detailed question.
Screenshot:
Software Versions:
Firefox 28.0
Chrome 34.0.1847.116
Express 3.2.6
Jade 1.3.1
Less 1.7.0
nodemon 1.0.17
Font-Awesome 4.0.3
Bootstrap 3.1.1
JQuery 1.11.0
Project Structure:
MyApp
+--node_modules
|--public
| +--stylesheets
| |--lib
| | +--bootstrap
| | +--font-awesome
| | +--jquery
|--routes
| |--index.js
|--views
| |--index.jade
|--app.js
|--package.json
NOTE: The font-awesome directory contains all contents extracted from the font awesome download link.
index.jade:
doctype html
html
head
title= title
meta(charset='utf-8')
link(rel='stylesheet', href='/lib/bootstrap/css/bootstrap.css')
// I tried font-awesome locally:
link(rel='stylesheet', href='/lib/font-awesome/css/font-awesome.css')
// And from the CDN:
//link(rel='stylesheet' href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css')
link(rel='stylesheet', href='/stylesheets/style.css')
body
span Text before icons:
i.fa-globe
i.fa-plus
script(type='text/javascript', src='/lib/jquery/js/jquery.js')
script(type='text/javascript', src='/lib/underscore/js/underscore.js')
script(type='text/javascript', src='/lib/bootstrap/js/bootstrap.js')
app.js:
var express = require('express');
var routes = require('./routes');
var http = require('http');
var path = require('path');
var app = express();
// all environments
app.set('env', 'development');
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
// development only
if('development' === app.get('env')){
app.use(express.logger('dev'));
app.use(express.errorHandler());
}
// routes
app.get('/', routes.index);
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
index.js:
exports.index = function(req, res){
res.render('index', { title : 'MyApp' });
};
You have to have class fa as well as fa-globe from this article
so in your code
span Text before icons:
i.fa.fa-globe
i.fa.fa-plus
Related
I have a part of my website (react-app) that wont render when pushed to heroku, but it runs fine locally.
The heroku domain is https://notmicahclark.herokuapp.com/
it uploads successfully to heroku no errors
my repo is https://github.com/Scharite13/NotMicahClark.
the page is the /art page.
the code related to it is the art.js file and the images are in the public, and the object is on art_database.js
You've generated your build folder once. You've since done changes to your code but haven't generated a new build.
const express = require("express");
const app = express();
const port = process.env.port || 5000
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', (req, res) => {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(port, () => console.log(`Server started on port: ${port}`));
here you can see that you are only serving the content which is in your build folder. It hasn't changed.
Go into your clients folder and execute npm build and move the generated build files into /build.
I need help. I looked up the solutions here but still couldn't find it. So I'm practicing something in Goorm ide and I have come to a dead-end. I am trying to link main.js(which is in js folder) file by putting the script in the footer. But I'm getting an error which says
Failed to load resource: the server responded with a status of 404 (Not Found)
I also uploaded some png files in lib folder and I'm getting the same error after trying to access those in an ejs template.
Root folder consists of js, lib and views folder and some others which are not relevant.
To link the main.js in footer.ejs(which is in partials folder inside views), I used
<script type="text/javascript" src="../../js/main.js"></script>.
The png images which are uploaded in lib/images folder, I tried to access those from an ejs template in views so I used
<img src="../lib/images/image1.png">.
I am getting that error in both the cases. It would be highly appreciated if someone could help. This is how my root folder looks like -
EDITED:
This is the app.js code:
require('dotenv').config();
var express = require("express");
var app = express();
var bodyParser = require("body-parser");
var indexRoute = require("./routes/index");
var flash = require("connect-flash-plus");
var session = require('express-session');
// APP CONFIG
app.use(express.static(__dirname + "/public"));
app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({extended:true}));
app.set('json spaces', 2);
app.use(session({
secret: 'boom',
cookie: { maxAge: 60000 },
saveUninitialized: true,
resave: true
}));
app.use(flash());
app.use(function(req, res, next) {
res.locals.error = req.flash("error");
next();
});
// routes
app.use(indexRoute);
app.listen(3000, function(){
console.log("Server has started");
})
Your Express configuration specifies that all of your static files will be accessed from the public directory:
app.use(express.static(__dirname + "/public"));
This means that any files you want to access in your web browser must be within this directory (or a subdirectory of it).
For instance, if you want to access main.js, and it's location in public/main.js, you would access it on the frontend like this:
<script type="text/javascript" src="/main.js"></script>
Note that on the frontend, you must not include the public/ prefix.
I am trying to run a angular app thru node-express.
1 File Structure
AngularNode
public
/core.js
/index.html
project.json
server.js
2 server.js
var express = require('express');
var app = express();
app.get('*', function(req, res) {
res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end)
});
// listen (start app with node server.js) ======================================
app.listen(8000);
console.log("App listening on port 8000");
3 index.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="./core.js"></script>
........
4 core.js
angular.module('MySystem',[])
.controller('AppController',['$scope',function($scope){
$scope.Name ="Testing Text";
}]);
When I tried to run this app using node server.js this, index.html file is getting loaded properly, however this is not detecting or loading core.js file. and I am getting following errors
Uncaught SyntaxError: Unexpected token < core.js:1
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.5/$injector/modulerr?p0=MySystem&p1=Error%3…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.5%2Fangular.min.js%3A19%3A381) angular.js:38
Now, when I open index.html file directly from explorer, this is working OR when same code I move from core.js to inline html, under <head> with <script> block it is working.
I am not sure, why core.js not detecting or loading when I run thru node.
Got the Solution with few modifications:
1 Added line in server.js
app.use(express.static(__dirname + '/public')); after line
var app = express();
2 Case correction(Capital 'f') for function from res.sendfile('./public/index.html'); to res.sendFile('./public/index.html');
Now I can see core.js is detected and working fine.
The app.get('*', function(req, res) { is a catch all rule for all get request and will also match the ./core.js request. So for the ./core.js your express app will also send the html file.
You should use express.static instead:
var express = require('express');
var app = express();
app.use(express.static('./public'));
I'm trying to link images to my .handlebars/html files in my views directory. I've created a public folder as I discovered was necessary, but still can't get the linked images to appear when I open my web page.
Here is my node.js code...
var express = require('express');
var session = require('express-session');
var request = require('request');
var app = express();
var handlebars = require('express-handlebars').create({defaultLayout: 'main'});
var bodyParser = require('body-parser');
app.use(session({secret:'secretSauce'}));
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.engine('handlebars', handlebars.engine);
app.set('view engine', 'handlebars');
app.set('port', 3021);
app.get('/', function (req, res, next) {
res.render('index');
});
app.get('/setup', function (req, res, next) {
res.render('setup')
});
app.use(function(req,res){
res.status(404);
res.render('404');
});
app.use(function(err, req, res, next){
console.error(err.stack);
res.type('plain/text');
res.status(500);
res.render('500');
});
app.listen(app.get('port'), function(){
console.log('Express started on http://localhost:' + app.get('port') + '; press Ctrl-C to terminate.');
});
And this is a page I've tried to load images on:
<h1>
Getting a Mailjet Account, an API, and Misc. Set Up
</h1><br>
<p>
This first part is going to their website and signing up to get an account. The sign up page looks like this. You can click on the image to take you there.
</p>
<img src="/public/images/mailjet signup.jpg" alt="sign up page">
<br>
<p>
Once you take care of business there, you can head to your account page and click on the link circled in the image below. That link will take you to where your private and public API keys are stored.
</p>
<img src="/public/images/mailjet APIKey.jpg" alt="account page">
<br>
<p>
Awesome, so the last major thing to think about is if you want to add a domain name to your account. Typically your emails that you use at sign up will be autamically set up as a sender, and it will make it look like emails are coming from that account. However, you may have multiple senders on a company domain. In that case you'll want to head over to the accuont settings and add that domain. This way in the future if employees send something it will automatically allow senders from the domain. This is really more of a logistical matter than anything, and it doesn't directly affect using this How to Guide.
</p>
<ul>
<li>Prev </li>
<li>Next</li>
</ul>
To get the images on the handlebars page or HTML we need to set the path on the index.js file or app.js file, it depends on you what is your starting page.
Index.js
app.use(express.static('views/images'));
promotionapplication\views\images - This is my folder structure, my index.js file is in promotionapplication, and i have kept my pics in the images folder. You can keep any of the structure of the folder but you should mention it in accordingly in app.use.
So now i can use any of the pics in the folder, by using the following code in handlebars page-
first.handlebars
<img src="bckground.jpg" alt="piooop" />
Remember to reload the page after the changes made.
It works perfectly fine. If any questions please comment, i will try to give an answer.
Use attachments in nodemailer options. LInk image src in your .hbs file to the unique cid in your attachment description like so:
src="cid:unique#unique"
const mailOptions = {
from: 'xxxxx',
to: x,
subject: `xxxx`,
template : 'xxx',
attachments: [
{
filename: 'xx.png',
path: __dirname +'/images/xx.png',
cid: 'unique#unique'
},]
I am trying to learn Express with NodeJS and would like to render my views with plain HTML. I hacked together a webserver based on the Express API documentation and several Stack questions, particularly the answer by Andrew Homeyer in this question which states
You can have jade include a plain HTML page:
in views/index.jade
include plain.html in views/plain.html
... and app.js can still just render jade:
res.render(index)
My directory structure looks like this
Project
*web.js
Public
img
js
lib
gallerific
*jquery.opacityrollover.js
*jquery.gallerific.js
angular
theme
views
partials
*index.html
*index.jade
and my server looks like this.
var express = require('express'),
jade = require('jade');
var app = module.exports = express();
app.configure(function(){
app.set('views', __dirname + '/public/views');
app.use("/public/lib", express.static(__dirname + "/public/lib"));
app.use(express.static(__dirname + '/public'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.set('view engine', 'jade')
app.use(express.bodyParser());
});
app.get('/', function(req, res) {
res.render('index');
});
app.get('/partials/:name', function(req, res){
var name = req.params.name;
res.render('/public/partials/' + name);
});
app.get('/public/data/:name', function(req, res){
var name = req.params.name;
res.json('/public/data/' + name)
});
app.listen(3000, function(){
console.log("Express app listening on port %d in %s mode", this.address().port, app.settings.env);
});
What I am seeing is that certain files fail to load from directories in which everything else loads just fine. For example, my Gallery page fails to load the jquery.gallerific.js javascript file from my lib/gallerific directory while it does load the jquery.opacityrollover.js. I have poked around with Chrome Developer Tools and see the following
I had this site working with the Angular Bootstrap webserver so it doesn't seem to be a javascript error with the client side code. Does anyone know what I might doing that would cause this problem?
The source is available at https://github.com/jamesamuir/express-simple-html.git
I figured it out. It turns out I had to resolve paths that I had forgotten about so that Express could render them correctly. It wasn't that the Gallerific javascript library didn't load, it was throwing an error on the image source of undefined for my gallery images (I am pulling them from a JSON file).
Once I put the appropriate paths in for the images and the data file, everything started working again. Thanks to everyone who provided a suggestion for me. It really helped me to work through the problem.