Please help me as i am trying to add a css file all the day long and always fail
app.js code :
var express = require("express");
var app = express();
var path = require('path');
app.set('view engine', 'ejs');
app.set('views', '../node_modules/express/views/');
app.use(express.static('public'));
app.get("/",function(req,res){
console.log("welcome");
res.render("test");
});
app.listen(3000,function(){
console.log("connected")
});
test.ejs code :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!-- <link type="text/css" href="app.css">-->
<!-- <link href="/public/app.css" rel="stylesheet" type="text/html">-->
<!-- <link type="text/css" href="/public/app.css">-->
<!-- <link rel="stylesheet" type="text/css" href="/app.css" >-->
<link rel="Style" type="text/css" href="/app.css" >
</head>
<body>
<h1>here</h1>
</body>
css code :
body{
background-color: green;
}
server structure :
root-->public-->app.css
i also faced the error : was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff). but i solved it and and tried a lot of ways to change the path and keep it in the same folder with the ejs
thank you in advance
in your app.js
app.use(express.static(__dirname + '/public'));
app.use('/public', express.static(__dirname + '/public'));
In app.js:
app.use(express.static('public'))
In ejs/html:
<link rel="stylesheet" href="/css/index.css">
Serving static files in Express
Okay guys thank you all but the solution was just to add ../ before public
app.use(express.static('../public'));
as express was searching for public inside the server folder that has the app.js
Related
I'm using Supabase CDN's for a project. When I call the createClient() function this error comes up:
createClient is not defined
I tried it with an older version of the CDN, with another browser and using the old method of SupabaseClient.createClient, but I got:
SupabaseClient is not defined
Is the CDN not working correctly or something else?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML</title>
<!-- Custom Styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Nothing to see here...</p>
<!-- Project -->
<script src="https://cdn.jsdelivr.net/npm/#supabase/supabase-js#2"></script>
<script src="main.js"></script>
</body>
</html>
const SupabaseKey = // api here
const SupabaseUrl =// URL here
const options = {
db: {
schema: 'public',
},
auth: {
autoRefreshToken: true,
persistSession: true,
detectSessionInUrl: true
}
}
const supabase = createClient(SupabaseUrl, SupabaseKey, options)
I fixed it by adding an import statement in the JS file like this:
import createClient from 'https://cdn.jsdelivr.net/npm/#supabase/supabase-js/+esm'
The +esm at the end of the URL is from universal module and it now works.
This is the error I am getting.
Refused to apply style from 'http://localhost:3000/public/stylesheets/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
This is my index.js file
//Requiring Dependencies
const express = require('express');
const app = express();
const mongoose = require('mongoose');
const path = require('path');
//To run and parse EJS
const engine = require('ejs-mate');
//Using EJS-Mate
app.engine('ejs' , engine);
app.set('view engine' , 'ejs');
app.set('views' , path.join(__dirname, 'views'));
app.use(express.urlencoded({extended: true}));
//For use of files like js and css in public directory
app.use(express.static(path.join(__dirname, './public')))
app.get('/' , (req , res) => {
})
app.get('/home' , (req , res) => {
res.render('layouts/boilerplate')
})
This is the boilerplate.ejs where i want to add the stylesheet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="/">
<title>BoilerPlate</title>
<link rel="stylesheet" type="text/css" href="/public/stylesheets/style.css">
<!-- BOOTSTRAP CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<!-- NAVBAR -->
<%- include('../partials/navbar.ejs') %>
<!--BOOTSTRAP Javascript-->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"></script>
</body>
</html>
The bootstrap CSS however is working. So I tried removing the "rel" error goes but the stylesheet is not applied. I also tried to use the base method and still did not work, also added type=text/css, and still didn't work. Any idea why it is not working?
so, I'm trying to link a css file to an ejs file but it's not working, and I think I'm linking them correctly:
<head>
<title>Acres & Karats Calculator</title>
<base href="/">
<link type="text/css" href="css/Acres and Karats Calculator.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,700&display=swap" rel="stylesheet">
and i specified the public directory to be used in express:
let express = require("express"),
app = express();
app.use("/public", express.static(__dirname + "/public"));
app.get("/", (req, res) => {
res.render("Acres and Karats Calculator.ejs")
});
app.listen("3000", () => {
console.log("Server started!");
});
and there are no errors in the console at all and the css is not loaded
file structure:
app.js
views
pubilc
css
Acres and Karats Calculator.css
I solved it by adding rel="stylesheet" and adding a / before the file path
Taking into account the directory layout of your project:
app.js
views
-|_pubilc
---|_css
-----|_Acres and Karats Calculator.css
and the link to the css file in the ejs template:
<link type="text/css" href="css/Acres and Karats Calculator.css">
express static path in your app.js should be updated as follows:
app.use(express.static(__dirname + "/views/public"));
I'm creating an express app and my CSS code stops working whenever i add an ":ID" parameter to the URL. I know it's a filepath issue because bootstrap still comes in fine, but on the page with the ID parameter it shows this: "Refused to apply style from 'https://XXXXXX.c9users.io/unapproved/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."
main.css is in my /public folder, but it looks like it's looking in a folder titled "unapproved".
I've tried changing the routing order, i've tried changing my app.use(express.static(__dirname)) code.
here's my app.get:
app.get("/unapproved/:id/", function(req, res){
var invoiceID = mongoose.mongo.ObjectId(req.params.id);
InvoiceObj.findById(invoiceID,function(err,foundInvoice){
if(err){
console.log(err);
}else{
res.render("invoiceScreen",{invoice:foundInvoice});
}
});
here's my html:
<% include partials/header %>
<h1><image src="<%= invoice.imageUrl %>"</h1>
<% include partials/footer %>
here's my header:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Invoice system</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src='https://code.jquery.com/jquery-2.1.4.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
I think change to css path absolute path will solve your problem
<link rel="stylesheet" href="/main.css">
In this kind of situation, it's better to use virtual path for your static files because relative path doens't work very well; like:
Assuming folder structure:
app.js
public
| +-- main.css
app.use('/static', express.static(__dirname + "/public"))
And in you html, make path absolute
<link rel="stylesheet" href="/static/main.css">
instead of using ./ or ../ before your assest(images / css / js ) for example.
./css/style.css or css/bootstrap.css ../images/example.png
you can use / for example
/css/style.css or /css/bootraps.css /images/example.png
/ will tell your app to look from root dir.
I am making a CRUD app in Nodejs/Expressjs, templating engine is EJS.
The idea for the update is display user_id from a database and when admin clicks on user_id it should redirect to edit_team.ejs page.
It is working fine but when it is redirecting to edit_team.ejs page, the css files are not getting load. I am getting below error
For every other .ejs files, all css files are loaded.
I have included 'public' folder in app.js file.
Code:
Folder Directory:
app.js:
app.use(express.static('app/public'));
view_team.ejs
<a class="button" href='/edit_team/<%= team[i].team_id %>'>
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
</a>
edit_team.js:
var express = require('express');
var path = require('path');
const { Client } = require('pg')
const connectionString = 'postgresql://localhost:5432/idid';
//router object
var router = express.Router();
router.get('/edit_team/:id', function(req, res){
res.render('login/edit_team');
});
module.exports = router;
edit_team.ejs (pasting only head section):
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
can someone please help me trying to figure out what is wrong here?
A URL such as /edit_team/23 serves up edit_team.ejs, which contains the relative path css/bootstrap.min.css. This is relative to the /edit_team path, so it'll be edit_team/css/bootstrap.min.css, which probably isn't what you want.
You should be able to confirm this using your browser's dev tools. Look in the Network tab and check the paths for the files that aren't loading.
Try using paths that aren't relative to the current path, such as:
<link href="/css/bootstrap.min.css" rel="stylesheet">
Note the extra /.