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.
Related
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">
I'm 100% new to MEAN stack and currently trying to self-study it with the help of this video by Michael Moser (If you're reading this, thank you for making such an easy-to-understand video! :) ). I'm trying to make a very basic program with CRUD functionalities, but I can't get past this particular error message when loading the Angular JS file. Can somebody point me in the right direction?
Here are my codes:
package.json
{
"name": "starter-node-angular",
"main": "server.js",
"dependencies": {
"body-parser": "~1.4.2",
"express": "^4.5.1",
"method-override": "~2.0.2",
"mongoose": "~3.8.0"
}
}
server.js
// modules needed
// express - middleware
var express = require('express');
var app = express();
// listens for request to server and throws main.html as response
app.get('/', function(req,res) {
res.sendfile(__dirname + '/client/views/main.html');
});
// listens for request to server with 'scripts' in it and returns the appropriate file declared
// in the script tag
app.use('/scripts', express.static(__dirname + '/client/scripts'));
app.listen(3000, function(){
console.log("Ready...");
});
HTML
<html ng-app="ProductApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js" type="text/javascript"></script>
<script type="text/javascript" src="/client/scripts/main.js"></script>
<!-- stylesheets -->
<link href="/styles/main.css" rel="stylesheet" type="text/css">
</head>
<body class="main-background" ng-controller="MainController">
<!-- Area for Logo and Search Bar -->
<div class="header">
<div class="main-logo">
STUFF - Product Inventory v1.0
</div>
<div class="main-search">
<input type="text" class="search-field" placeholder="What are you looking for?" />
<img src="images/search-icon.png" title="Search" class="search-ico" />
</div>
</div>
<!-- Area for Add Button -->
<div class="add-container">
<div class="add-button" ng-click="addProduct(test);">
<img src="images/add-icon.png" title="Add" class="add-ico" />
<span class="add-text">Add Product</span>
</div>
</div>
</body>
</html>
AngularJS
'use strict';
var app = angular.module('ProductApp', []);
// Main controller
app.controller('MainController', ['$scope', function ($scope) {
// Search Products
$scope.searchProduct = function (param) {
// Search fxn goes here...
}
// Add products
$scope.addProduct = function (param) {
alert('Add product');
}
// Edit Products
$scope.updateProduct = function (param) {
// Update fxn goes here...
}
// Delete Product
$scope.deleteProduct = function (param) {
// Delete fxn goes here
}
}]);
I came from a background where calling JS files was simply declaring the full path in the src. Tbh, I find the entire MEAN setup a bit complex, with the "middleware" concept and all. :( I appreciate MongoDB's role in it, though.
Anyways, any help and advice would be greatly appreciated. God knows I need a lot of it right now.
Thank you.
Update 1:
I tried changing how my <script> tag calls my angular like so, with no success:
<script type="text/javascript" src="C:/users/myusername/documents/practice/product db/client/scripts/main.js"></script>
Also, am I right in thinking that localhost:3000 refers to Product DB in the following directory structure? I'm aware that 3000 is the port number; after looking at my error logs, I was thinking that localhost is just an alias for the source folder of the app.
Complete path is C:\users\myusername\documents\Practice\Product DB...
Thank you, as always. :)
You have included ng-app in the HTML tag, try adding that in the body of the page.
Do this:
<body class="main-background" ng-app="ProductApp" ng-controller="MainController">
Update:
you have done few mistakes while fetching stylesheets and scripts both. You need to define a proper static route which will work for all the static files(stylesheets and scripts).
you had defined yous static routed like this:
app.use('/scripts', express.static(__dirname + '/client/scripts'));
This will tell the node app to look into client/scripts folder, if any static route starts with /scripts. But you are trying to fetch your script using src="/client/scripts/main.js" which will not get anything, as /client is not defined , nor default '/' route is defined. It should be src="/scripts/main.js" instead.
One more mistake is while fetching stylesheets. you are using href="/styles/main.css", where again neither /styles nor / is defined, thus it will not be able to get the css file.
Try this instead:
Server.js
//define static routes like this
app.use(express.static(__dirname + '/client'));
// this will tell node app to look into the client folder, for any static file
HTML:
Fetch all your files like below:
To get stylesheets :
use /styles/filename
<link href="/styles/main.css" rel="stylesheet" type="text/css">
This will look into styles folder inside client folder.
To get scripts :
use /scripts/filename
<script type="text/javascript" src="/scripts/main.js"></script>
This will look into scripts folder inside client folder.
I am new to php and i am working on a project i am facing some problems with linking css and js files.
Now when the project is executed,First index.php loads (located in root directory) which includes home.php and everything in it is executed correctly.
But as soon as you click on 'about' link on the 'home page' ,the page is redirected to about.php( which is located inside Presentation/about.php )here the css and js linking fails.......
On execution of index.php it takes css link successfully (the link is as follows)
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
but later when the page is redirected to about.php it expects the link to be
<link href="../css/bootstrap-theme.min.css" rel="stylesheet">
and i am using a common file for these links, i kept all links in header.php(located in Presentation/Template/header.php)
I have also defined all paths in config.php(located in inc/config.php)
i have defined the path in config.php as follows
// SITE_ROOT contains the full path to the RichTongue folder
define('SITE_ROOT', dirname(dirname(__FILE__)));
// Application directories
define('PRESENTATION_DIR', SITE_ROOT . '/Presentation/');
define('TEMPLATE_DIR', PRESENTATION_DIR.'Template/');
define('BUSINESS_DIR', SITE_ROOT . '/Business/');
define('CSS_DIR', SITE_ROOT. '/css/');
define('FONT_DIR', SITE_ROOT . '/fonts/');
define('IMAGE', SITE_ROOT . '/images/');
define('JS', SITE_ROOT . '/js/');
so i tried linking css in the following way
<link href="<?php echo CSS_DIR ?>bootstrap.min.css" rel="stylesheet" >
now the above code gives me an error in chrome which says
Not allowed to load local resource: file:///C:/xampp/htdocs/RichTongue/css/bootstrap.min.css
home.php:13
now the path in the error above(file:///C:/xampp/htdocs/RichTongue/css/bootstrap.min.css) is correct but it doesnt load the file and gives the error (error specified above)
Q)What should i do? what is the correct way of linking css and js files in php?
need help
set URl path for SITE_ROOT
if ur project path is C:/xampp/htdocs/RichTongue/css/bootstrap.min.css
so change with below line
define('SITE_ROOT', 'http://localhost/RichTongue');
Link your css and other ressources with an absolute path seems to be the easy solution for you.
Absolute path is from the root dir of your website : C:/xampp/htdocs/RichTongue
instead of file:///C:/xampp/htdocs/RichTongue/css/bootstrap.min.css you can use /css/bootstrap.min.css
so you have to modify
define('CSS_DIR', SITE_ROOT. '/css/');
to
define('CSS_DIR', '/css/');
same for other ressources (js, font, etc.)
Exemple result :
<link href="/css/bootstrap-theme.min.css" rel="stylesheet">
Say if you have a folder called css you can use real path like this:
define('CSS_DIR', realpath(dirname(__FILE__).'/css'));
Then you would use that constant path like this:
echo CSS_DIR."/style.css";
Try to use it like that way:
$SITE_FOLDER_NAME = "demo/";
define('SITEURL', 'http://'.$_SERVER['SERVER_NAME'].'/'.$SITE_FOLDER_NAME);
define('SITEURL_CSS', SITEURL.'css/');
./assets/CSS/filename.css
Did the job for me.
I'm trying to use an external js file to use in my pyramid project.
I found this solution but i can't seem to get it work.
The js files i want to include are in C:\env\uza\uza\static\js
project name = uza.
In my template i use this to call the script:
<script type="text/js" src="${request.static_url('uza:static/js/fabtabulous.js')}" />
<script type="text/js" src="${request.static_url('uza:static/js/tablekit.js')}" />
my init.py looks like this:
config.add_static_view('static', 'static', cache_max_age=3600)
When i navigate to the page in my browser it just gives me the pyramid sidebar in raw html code. I know it's a stupid mistake i made somewhere but i can't seem to find it. Is annyone able to help me with this.
EDIT:
I uploaded a pdf to give a better understanding of the problem i'm having.
ps: there are no errors in console.
https://dl.dropboxusercontent.com/u/6752022/problem.pdf
EDIT:
I made a new project using the sqlalchemy scaffold.
The changes I made are:
- include this line in the mytemplate.pt
<script type="text/js" src="${request.static_url('javascript:static/js/tette.js')}" />
<input type="button" onclick="popup()" value="Click Me!">
- i didn't change annything else because i don't think anny other changes need to be made in the scaffold.
my tette.js file looks like this:
function popup() {
alert("Hello World")
}
This is the output i have before including the js file. (deleted a few divs)
And this is after.
what am I doing wrong ? thanks in advance.
Can you back it out to a point to where the pyramid sidebar looks and works correctly, and isn't raw HTML?
Your init.py line looks correct. Then in your templates you can get at whatever is in the 'static' folder like so:
<link rel="stylesheet" href="${request.static_url('myproject:static/style.css')}">
<!--[if lte IE 6]>
<link rel="stylesheet" href="${request.static_url('myproject:static/ie6.css')}" type="text/css" media="screen"
charset="utf-8"/>
<![endif]-->
<script type="text/javascript"
src="${request.static_url('myproject:static/tinymce/jscripts/tiny_mce/tiny_mce.js')}"></script>
it's as Peter Tirrell says.
I didn't say the type was javascript.
I thought all I have to do (according to docs on git hub) is to put {{#def.loadfile('/snippet.txt')}} into my template so it would look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Data</title>
<link href="/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
{{#def.loadfile('/views/includes/header.txt')}}
<section>
{{~it.arrOut:value:index}}
{{=value}}!
{{~}}
</section>
</body>
</html>
but it does not seem to be working. I even tried to import withdoT.js, but still nothing.
All I get is "Internal Server Error", If you were able to make file includes work on dot.js can you please share your knowledge. I like this nifty engine, but docs for it are not as nifty.
I don't know if it apply to you, but on nodejs, using expressjs and express-dot.js,
what I did was to define loadfile:
in app.js
var doT = require('express-dot');
doT.setGlobals({
loadfile:function(path){return fs.readFileSync(__dirname + path, 'utf8');}
});
in index.dot:
{{#def.loadfile('/views/_submit_form.html')}}
basically it adds loadfile as a function that take a path and output a string in the "def" object of dotjs.
You could certainly adapt and enhance this to your specific needs
I'm pretty sure doT is looking for includes starting from the same directory as the current file is. Assuming that the current template is inside views, I think that just removing "/views" from the path should do the trick...