I'd admit I am relatively new to node in general, and I am stuck on this issue in regards to being able to use a style sheet within a partial.
This is my file structure
app.js
public
images
javascripts
stylesheets
style.css
views
layouts
main.hbs
partials
head.hbs
navbar.hbs
error.hbs
index.hbs
I made sure to include this within my app.js and also required the path module.
app.use(express.static(path.join(__dirname + 'public')));
This my link to my stylesheet within my head.hbs partial.
<link rel="stylesheet" type="text/css" href="/public/stylesheets/style.css">
Any suggestions?
Instead of doing:
<link rel="stylesheet" type="text/css" href="/public/stylesheets/style.css">
try:
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css">
(without /public/)
Currently you are telling express.static to look for a file in: /public/public/stylesheets/style.css.
Related
My application is on the server, and I have tried all the solutions. But my Laravel app is still not loading CSS and JS files in main.blade.php when my CSS files are in public/assets_setup/css/style.css.` I even made file changes, but page changes are not showing in inspect, and it's the same.
Below is my main.blade.php file which all links are included.
Try this code
<link rel="stylesheet" type="text/css" href="/assets_setup/css/style.css">
or
<link rel="stylesheet" type="text/css" href="{{ asset('/assets_setup/css/style.css') }}">
We don't write public in laravel
I am trying to load my stylesheets and js files in Meteor. I have an index.html file. This is what I was doing at first:
<link href="assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/animate.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css"/>
There were lots of stylesheet files and script files. This was working fine but if i wrote a url like: 'localhost:3000/manage-user/add', everything stopped working. I have read loads of answers where they have mentioned that I need to make a lib folder and in that folder, I need to make a css and a js folder, but it's not picking up my files, especially my 'style.css' file which overrides styles of bootstrap and all.
assets folder should be inside the /public folder, then try add the / to the begining of the href value.
<link href="/assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="/assets/css/animate.min.css" rel="stylesheet" type="text/css"/>
<link href="/assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css"/>
URL can be absolute and relative.
Absolute should starts from protocol value(http://, https://, ftp:// etc) and then domain name, port, path and query part.
Relative can be started either from slash or any other character.
If URL is started from slash it's assumed its value is relative to domain's root.
If URL is started from any other character it's assumed it's value is relative to current URL(or value in tag).
Anyway value localhost:3000/manage-user/add means for browser:
"take current page's URL and append this value to its end".
So your files are tried to be fetched from something like http://localhost:3000/localhost:3000/manage-user/add
To properly add your styles.css and/or your templates/components to your app, you must register/add them as an import path to the body.js.
CSS
Go to your body.js.
Add import '/imports/ui/stylesheets/styles.css' (copy/paste this line)
JS - Templates/pages
Go to your body.js in your layouts folder.
Add import '/imports/ui/pages/[yourDirName]/[yourFileName].js'; (copy/paste this line)
BONUS Content!
JS - Components to import into your html templates (optional)
Go to your pages folder.
Select the proper directory.
Select the js file that is importing your html template file.
Import the component to the js file.
import '../../components/[yourDirName]/[yourFileName].js;
Example import '../../components/hello/hello.js';
The problem here is that some views (not all of them) can't access to some css&js files(not all of them) ("404 Not found" error).
For exemple View of .../Details/Index/1 can't access to 1file css and 1file js (it can access all other files), but the View of .../Recherche/result can access to all files.
This problem happens when the user is connected and when not connected.
I didn't modifie the web.config file.
All View are related to one Layout, in there I inluded the css files:
<link href="Content/file.css" media="all" rel="stylesheet" type="text/css" />
And one last thing, all css files are in 1 folder and all js files are in 1 folder.
Start the path to the file with the tilde (~) character. Razor will converts a virtual (relative) path to an application absolute path.
<link href="~/Content/file.css" media="all" rel="stylesheet" type="text/css" />
If you are using an MVC version prior to MVC 4, you should use Url.Content helper method.
<link href="#Url.Content("~/Content/file.css")" rel="stylesheet" type="text/css" />
I'm trying to link manually my CSS and Javascript files to my HTML scripts, but I've never really done it with files from a different folder/directory. This is what I have so far:
<link rel="stylesheet" type="text/css" href="/Desktop/Script/CSS/tempeststyle.css"/>
<link rel=script" type="text/javascript" href="/Desktop/Script/Javascript/tempestscript.js"/>
I've read from a few sources that you don't have to start all the way at C:/Users or whatever the case may be for different systems, but I'm not sure if these links are acceptable the way they are (i.e., them starting at "/Desktop"). The files are in separate folders within the same folder on the desktop. So how to include them the best way? Thanks.
If you want to add scripts from local path you can use a relative path:
<link rel="stylesheet" type="text/css" href="../CSS/tempeststyle.css"/>
or relative path from your web root folder:
<link rel="stylesheet" type="text/css" href="/styles/CSS/tempeststyle.css"/>
or filesystem absolute path:
<link rel="stylesheet" type="text/css" href="file:///C:/Path/To/Scripts/styles/CSS/tempeststyle.css"/>
It is rather better if you use an absolute path from your web server:
<link rel="stylesheet" type="text/css" href="http://www.example.com/styles/CSS/tempeststyle.css"/>
I'm using OpenShift free to make my term paper. My issue is that, in my root folder, I have the files: rankAplus.html, todo.js and dashboard.css. When I call todo.js and dashboard.css in my file rankAplus HTML, I get this error (not found 404 - browser error). When I look inside of my element dashboard at browser, the file type was changed, from text/css to text/html. The same thing occurs with my JavaScript file. The files are the same folder. What I need to do? Does someone know how to solve this?
I'm using Node JS to create server at openshift.
And im using references like AngularJS and Bootstrap.
My folders structure at server openshift:
../repo/
. . . rankAplus.html
. . . todo.js
. . . dashboard.css
.
Server.js Routing for rankAplus on callback:
function showRank(req,res)
{
res.sendfile('rankAplus.html');
}
app.get('/showRank',showRank);
On rankAplus.html header, i call to todo.js and dashboard.css this way
<script type="text/javascript" src="todo.js"/>
<link href="dashboard.css" type="text/css" rel="stylesheet">
I've been tried:
<script type="text/javascript" src="../todo.js"/>
<link href="../dashboard.css" type="text/css" rel="stylesheet">
and...
<script type="text/javascript" src="/todo.js"/>
<link href="/dashboard.css" type="text/css" rel="stylesheet">
but, nothing works.
Anyone?
try to put complete URI like,
<link href="http://localhost/repo/dashboard.css" type="text/css" rel="stylesheet">
path is case sensitive
Dashboard.css is different then dashboard.css on linux and unix based systems.