I cant get my index.html in express to show the styles.
This is my folder structure:
And then on server js I have this:
app.use(express.static(path.join(__dirname, '/public')));
app.use(useragent.express());
app.get('/', function(req, res){
console.log('Listening on port ' + port)
let isMobile = req.useragent.isMobile ? 'mobile' : 'desktop';
console.log({isMobile})
res.sendFile(path.resolve(__dirname + `/${isMobile}/index.html`));
});
And I just add the link tag on my html inside the head on the index.html like this:
<link href="styles.css" rel="stylesheet" type="text/css">
The index I serve can be either inside the desktop or mobile folder
But it doesnt get the styles... any idea whats the issue?
Thanks.
server.js
app.use(express.static(path.join(__dirname, 'server/public')
index.html
<link href="/styles.css" rel="stylesheet" type="text/css">
Related
I try to made another route for my 'web-educational-only' it works when the route is '/' but when i try to linked in with 'about' page, it's show 'Cannot Get /about'
here's the code for app.js:
const express = require('express');
const app = express();
app.set('views','./view');
app.use(express.static('assets'));
app.get('/', (req, res) => {
res.render('index.ejs');
});
app.get('/about', (req, res) => {
res.render('about.ejs');
});
app.listen(3000);
and here's for about.ejs (the file is in view folder):
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<script src="/send_url.js"></script>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<h1>It's About the Page</h1>
<p class="alert">made for educational only</p>
</body>
</html>
can you see what's the problem there? thank you
if you make any change in any file of your project then restart your server every time
use nodemon package in your project so that after making any changes in file you won't have to manually restart the server, nodemon will detect changes and restart your server every time you make any change
I've been reading all over and I can't come to a conclusion of what's happening, I would appreciate some help. First than anything, this is my setup:
-
- views
- partials
header.ejs
app.js
...
app.use(express.static('public/css/'));
app.use(express.static('node_modules/bootstrap/dist/css/'));
that's feeding the header page in a ejs template:
<link rel="stylesheet" type="text/css" href="/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/YelpcampStyle.css">
Now... that above works like a champ, that's how I wrote it first, but I believe that's not a clean/best practice, so I'm trying to put it like this:
Express-js can't GET my static files, why?
app.use('/static', express.static(__dirname + '/public'));
and the code they gave does not work in my case, I tried and it can't find the bootstrap or the custom css. I tried:
app.use('public/css/', express.static(path.join(__dirname + 'node_modules/bootstrap/dist/css/')));
Now.. If I write this:
app.use('', express.static(path.join(__dirname + 'node_modules/bootstrap/dist/css/')));
It finds the bootstrap...
I also tried the above with the coma, instead of the + and still doesn't work.
Also tried this one:
How to include scripts located inside the node_modules folder?
var path = require('path');
app.use('/scripts', express.static(path.join(__dirname, 'node_modules/bootstrap/dist')));
With no good result. Could someone point me to what I'm missing/doing wrong please.
I am having trouble getting my routes to work in my Angular application. It is properly displaying the main template, but when I click on the link for the other template, nothing happens. Here's my code:
INDEX.HTML
<!DOCTYPE html>
<html>
<head>
<title>Node, NPM and Bower</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="style.css">
</head>
<body ng-app="app">
<nav>
<h3>Angular App</h3>
Home
About
</nav>
<div ng-view></div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="./app/app.js"></script>
</body>
</html>
APP.JS
angular.module("app", ["ngRoute"]).
config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Home</h1>"
})
.when("/about", {
template : "<h1>About</h1>"
});
});
Also, is there a reason that Bootstrap and Angular don't work at all when I try to use a localhost with Express and Node? for instance, if I pull up index.html in my browser the text is sans-serif, etc., but if I pull it up using localhost, it's still the default serif font.
SERVER.JS
var express = require('express');
var app = express();
var path = require('path');
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/index.html'));
});
app.listen(3000, function() {
console.log('app started');
});
Angular 1.5
So with basic 1.5 routing you need to use:
About
To hit the route. See Plunker for more info
Angular 1.6
If you are using angular 1.6 it's:
About
Look at AngularJS: ngRoute Not Working for other options.
Bootstrap problem
There shouldn't be any problem, it's properly caching.
I figured out the answer. You need to tell the server to route your static files from their directories like so:
app.use(express.static(__dirname + '/views'));
app.use('/bower_components', express.static(__dirname + '/bower_components'));
app.use('/public', express.static(__dirname + '/public'));
I created a simple Node JS program. I have index.html in the same folder that app.jsis located and external css and js files within public/stylesheets/style.css and /public/javascripts/script.js directories. When i open the index.html directly form the browser, css file is syccessfully linked to the html file. But when i run node app.js and navigate to http://localhost:3000, the index.html is displayed but any style didn't have effected to it. How can i solve it?
app.js file is this
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
server.listen(3000);
app.get('/', function(req, res){
res.sendfile(__dirname + '/index.html');
});
index.html file is this
<html>
<head>
<title>Sanitizor</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="public/javascripts/script.js"></script>
<link rel="stylesheet" type="text/css" href="public/stylesheets/style.css">
</head>
<body>
<h3>hello</h3>
<div id="chat"></div>
<form id="sent-message">
<input size="35" id="message"></input>
<input type="submit"></input>
</form>
</body>
</html>
You need to enable static serving :
app.use(express.static(path.join(__dirname, 'public'))); //this line enables the static serving in the public directory
your public directory could be the following :
public
|_css
|_js
|_images
|_logo.png
Then, if you want to get an image :
http://localhost:3000/images/logo.png
And if you want to show it in your html page :
<img id="logo" src="/images/logo.png"/>
In your case, replace the following line
<script src="public/javascripts/script.js"></script>
by
<script src="/javascripts/script.js"></script>
Same goes with the css
Like Cristy already stated in her comment, you need to enable static serving of your resource files. In order to do so you use express.static. Express has good documentation and guides about routing or middleware etc, so check it out.
Consider a file structure like:
/app
/public/index.html
/stylesheets/style.css
/javascripts/script.js
Your app folder contains the app.js and the rest is ordered like discribed.
Your app.js:
var express = require('express');
var app = express();
var server = require('http').createServer(app);
app.use(express.static(__dirname + '/public'));
var io = require('socket.io').listen(server);
server.listen(3000);
app.get('/', function(req, res){
res.sendfile(__dirname + '/public/index.html');
});
Most of the time the order is important so you need to be carefull. In order to configure express you can use app.configure(function() {...}); and put all you app.use(...) commands in there.
Your index.html now should look like:
<html>
<head>
<title>Sanitizor</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/javascripts/script.js"></script>
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css">
</head>
<body>
<h3>hello</h3>
<div id="chat"></div>
<form id="sent-message">
<input size="35" id="message"></input>
<input type="submit"></input>
</form>
</body>
</html>
EDIT: I modified my app.js part so that I can pass in files and just do something like what I did with the title, but it doesn't work for some reason.
I currently have my header.ejs page loading the index stylesheet on every page.
<head>
<title><%= title %></title>
<link rel='stylesheet' href='public/css/style.css'>
<link rel='stylesheet' href='public/bower_components/bootstrap/dist/css/bootstrap.min.css'>
<link rel='stylesheet' href='public/css/index.css'>
</head>
What I am hoping to do is set up a conditional loading system for all of my stylesheets. using parameters passed when I call res.render() on that page. possible to set up something like what I have tried to below?
<link rel="stylesheet" href="<%= cssFile1 %>">
app.js
app.get('/', function(req, res, index-styles, index-script) {
var pageTitle = getPageTitle('Home');
res.render('index', {
title: pageTitle,
cssFile1: index-styles,
script1: index-script
});
});
/routes/index.js
exports.index = function(req, res, index-styles, index-script) {
res.render('index', {
title: 'Home',
cssFile1: index-styles,
scriptFile1: index-script
});
};
I managed to set this up with the title of the page, but I'm new to Express and I'm not entirely sure what's wrong when I do `<%= cssFile1 %>. Any help would be greatly appreciated!
If you have separate CSS files for different pages, I would use a setup where each page-specific CSS file would be stored in a page-specific file (or directory):
public/css/index.css // the 'default' file
public/css/home.css // for the 'home' page
public/css/login.css // for the 'login' page
...
Then, in the render call I would pass the name of the CSS file that should be loaded:
res.render('index', { cssFile : 'login' });
And in your EJS template, use that or the default if the cssFile property wasn't passed:
<% var cssFile = cssFile || 'index'; %>
<link rel="stylesheet" href="public/css/<%= cssFile %>.css">
Any other CSS files that are specific to each page can be #import'ed from the page-specific CSS files.
you can just use javascript to output your conditional css
if(document.title.indexOf("YOUR TITLE STRING HERE") >= 0){
INSERT YOUR CSS LINK
}