started coding a couple of months ago and run into a problem I didn't find anything online. I have the following http requests
app.get("/courses", async (req, res) => {
const courses = await Course.find({});
res.render("courses/index", { courses, topic: "Μαθήματα" });
});
app.get("/about", (req, res) => {
res.render("courses/about", { topic: "Πληροφορίες" });
});
app.get("/courses/:id", async (req, res) => {
const { id } = req.params;
const course = await Course.findById(id);
return res.render("courses/show", { course, topic: course.title });
});
All of the rendered templates are in the same folder but when I try to render something from /courses/:id it can't find the appropriate css and js files. The problem appears only when I use /courses/something else. If I try the same thing with just /:id it loads fine, else I get these errors.
The paths I have in my include files are:
<link rel="stylesheet" href="static/stylesheets/footer.css" />
<link rel="stylesheet" href="static/stylesheets/navbar.css" />
<link rel="stylesheet" href="static/stylesheets/coursesIndex.css" />
I tried a ton of different possible paths by didn't have any luck. Thank you for your time
Try prefixing a / before the static paths, as follows:
<link rel="stylesheet" href="/static/stylesheets/footer.css" />
<link rel="stylesheet" href="/static/stylesheets/navbar.css" />
<link rel="stylesheet" href="/static/stylesheets/coursesIndex.css" />
It might work, because, the other 2 routes are root level routes. So, when rendered, browser would look for static/stylesheets/... in the root directory. So, it worked.
But, when you rendered the same on /courses/:id path, the browser would look for static/stylesheets/... inside /courses/:id(actual would be like /courses/1, for example). That directory(1 in the example) does not exists in your root directory.
So, if you use absolute paths(these are the paths that starts with /), browser would look for them from the root of your website always. So, this would work.
In asp.net core, I can conditionally include css/js in my layout html page using <environment> tags:
<environment names="Development,Staging">
<script type="text/javascript" href="js/debug.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</environment>
<environment names="Production">
<link rel="stylesheet" type="text/css" href="css/style.min.css" />
</environment>
How can I achieve this in angular 2? The css/js files that I'm talking about are site-wide, not component-specific
(PS. I'm new to angular 2)
If you are using angular2 CLI then you could use enironment.ts.
Properties specified in this file will be available throughout entire application.
You can create multiple environments like this-
In components import default environment file like this-
import { environment } from '../../environments/environment';
Import DOCUMENT from platform-browser like this-
import { DOCUMENT } from '#angular/platform-browser';
Inject into component (e.g. main AppComponent),
constructor (#Inject(DOCUMENT) private document) { }
Use environment condition and apply dynamic style-sheet like this-
if(environment.EnvName === 'prod') {
this.document.getElementById('theme').setAttribute('href', 'prod.css');
}
else {
this.document.getElementById('theme').setAttribute('href', 'dev.css');
}
Angular CLI takes care of which file to use for each environment during build process.
This is how you can specify environment at a time build-
ng build --env=prod
Hope this helps in your use case.
I am using Spring MVC with AngularJS as the frontend.
Unfortunately, I can't see the static files when deploying in Tomcat.
My aim is to deploy the AngularJS frontend files and the Spring backend stuff all together as a single WAR file for deployment in Tomcat.
I don't want to use JSP nor Spring XML files.
This is the structure of my Eclipse Maven folder :
Structure of webapp folder
My index.html file contains the following entries :
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-xeditable/dist/js/xeditable.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<link href="bower_components/angular-xeditable/dist/css/xeditable.css"
rel="stylesheet">
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css"
rel="stylesheet">
My SpringConfig.java looks like this :
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/bower_components/**").addResourceLocations("/bower_components").setCachePeriod(3600);
registry.addResourceHandler("/js/**").addResourceLocations("/js");
}
#Override
public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
configurer.enable();
}
I hope someone can help me out !
I think it is just an issue with your slashes. Try this:
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("bower_components/**").addResourceLocations("/bower_components/").setCachePeriod(3600);
registry.addResourceHandler("js/**").addResourceLocations("/js/");
}
If that doesn't work, you may have to fiddle with it. No one knows why it is like that, but unfortunately URL path pattern matching has been one of the most inconsistent and buggiest aspects of Spring MVC for years.
I'm trying to follow the instructions to https://stackoverflow.com/a/18633827/2063561, but I still can't get my styles.css to load.
From app.js
app.use(express.static(path.join(__dirname, 'public')));
In my .ejs, I have tried both of these lines
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="/public/css/style.css" />
Neither loads the css. I've gone into the developer's console noticed the type is set to 'text/html' instead of 'text/css'.
My path looks like
.
./app.js
./public
/css
/style.css
Use this in your server.js file
app.use(express.static(__dirname + '/public'));
and add css like
<link rel="stylesheet" type="text/css" href="css/style.css" />
dont need / before css like
<link rel="stylesheet" type="text/css" href="/css/style.css" />
1.Create a new folder named 'public' if none exists.
2.Create a new folder named 'css' under the newly created 'public' folder
3.create your css file under the public/css path
4.On your html link css i.e
<link rel="stylesheet" type="text/css" href="/css/style.css">
// note the href uses a slash(/) before and you do not need to include the 'public'
5.On your app.js include :
app.use(express.static('public'));
Boom.It works!!
The custom style sheets that we have are static pages in our local file system. In order for server to serve static files, we have to use,
app.use(express.static("public"));
where,
public is a folder we have to create inside our root directory and it must have other folders like css, images.. etc
The directory structure would look like :
Then in your html file, refer to the style.css as
<link type="text/css" href="css/styles.css" rel="stylesheet">
For NodeJS I would get the file name from the res.url, write the header for the file by getting the extension of the file with path.extname, create a read stream for the file, and pipe the response.
const http = require('http');
const fs = require('fs');
const path = require('path');
const port = process.env.PORT || 3000;
const server = http.createServer((req, res) => {
let filePath = path.join(
__dirname,
"public",
req.url === "/" ? "index.html" : req.url
);
let extName = path.extname(filePath);
let contentType = 'text/html';
switch (extName) {
case '.css':
contentType = 'text/css';
break;
case '.js':
contentType = 'text/javascript';
break;
case '.json':
contentType = 'application/json';
break;
case '.png':
contentType = 'image/png';
break;
case '.jpg':
contentType = 'image/jpg';
break;
}
console.log(`File path: ${filePath}`);
console.log(`Content-Type: ${contentType}`)
res.writeHead(200, {'Content-Type': contentType});
const readStream = fs.createReadStream(filePath);
readStream.pipe(res);
});
server.listen(port, (err) => {
if (err) {
console.log(`Error: ${err}`)
} else {
console.log(`Server listening at port ${port}...`);
}
});
Use in your main .js file:
app.use('/css',express.static(__dirname +'/css'));
use in you main .html file:
<link rel="stylesheet" type="text/css" href="css/style.css" />
The reason you getting an error because you are using a comma instead of a concat + after __dirname.
In your app or server.js file include this line:
app.use(express.static('public'));
In your index.ejs, following line will help you:
<link rel="stylesheet" type="text/css" href="/css/style.css" />
I hope this helps, it did for me!
IMHO answering this question with the use of ExpressJS is to give a superficial answer. I am going to answer the best I can with out the use of any frameworks or modules. The reason this question is often answerd with the use of a framework is becuase it takes away the requirment of understanding 'Hypertext-Transfer-Protocall'.
The first thing that should be pointed out is that this is more a problem surrounding "Hypertext-Transfer-Protocol" than it is Javascript. When request are made the url is sent, aswell as the content-type that is expected.
The second thing to understand is where request come from. Iitialy a person will request a HTML document, but depending on what is written inside the document, the document itsself might make requests of the server, such as: Images, stylesheets and more. This question refers to CSS so we will keep our focus there. In a tag that links a CSS file to an HTML file there are 3 properties. rel="stylesheet" type="text/css" and href="http://localhost/..." for this example we are going to focus on type and href. Type sends a request to the server that lets the server know it is requesting 'text/css', and 'href' is telling it where the request is being made too.
so with that pointed out we now know what information is being sent to the server now we can now seperate css request from html request on our serverside using a bit of javascript.
var http = require('http');
var url = require('url');
var fs = require('fs');
function onRequest(request, response){
if(request.headers.accept.split(',')[0] == 'text/css') {
console.log('TRUE');
fs.readFile('index.css', (err, data)=>{
response.writeHeader(200, {'Content-Type': 'text/css'});
response.write(data);
response.end();
});
}
else {
console.log('FALSE');
fs.readFile('index.html', function(err, data){
response.writeHead(200, {'Content_type': 'text/html'});
response.write(data);
response.end();
});
};
};
http.createServer(onRequest).listen(8888);
console.log('[SERVER] - Started!');
Here is a quick sample of one way I might seperate request. Now remember this is a quick example that would typically be split accross severfiles, some of which would have functions as dependancys to others, but for the sack of 'all in a nutshell' this is the best I could do. I tested it and it worked. Remember that index.css and index.html can be swapped with any html/css files you want.
I have used the following steps to resolve this problem
create new folder (static) and move all js and css file into this folder.
then add app.use('/static', express.static('static'))
add css like <link rel="stylesheet" type="text/css" href="/static/style.css"/>
restart server to view impact after changes.
Use this in your server.js file
app.use(express.static('public'));
without the directory ( __dirname ) and then within your project folder create a new file and name it public then put all your static files inside it
Its simple if you are using express.static(__dirname + 'public') then don't forget to put a forward slash before public that is express.static(__dirname + '/public') or use express.static('public') its also going to work;
and don't change anything in CSS linking.
the order of registering routes is important . register 404 routes after static files.
correct order:
app.use("/admin", admin);
...
app.use(express.static(join(__dirname, "public")));
app.use((req, res) => {
res.status(404);
res.send("404");
});
otherwise everything which is not in routes , like css files etc.. , will become 404 .
The above responses half worked and I'm not why they didn't on my machine but I had to do the following for it work.
Created a directory at the root
/public/js/
Paste this into your server.js file with name matching the name of directory created above. Note adding /public as the first param
app.use('/public',express.static('public'));
Finally in the HTML page to which to import the javascript file into,
<script src="public/js/bundle.js"></script>
I am using asp.net bundling / minification and putting everything in bundle.config like this:
<styleBundle path="~/css/css">
<include path="~/css/bootstrap.css" />
<include path="~/css/flexslider.css" />
<include path="~/css/font-awesome.css" />
<include path="~/css/Site.css" />
<include path="~/css/orange.css" />
</styleBundle>
But I would like to use bootstrap.css from a CDN:
//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css
So how can we do this in the bundle.config?
Currently you cannot mix and match and pull some of the files in your bundle from an external source like a cdn. You could upload the entire bundle to a CDN and configure the helpers to render a reference to the bundle in a CDN, but you cannot include files from external sources, the files must live somewhere that your app can find.
You could work around this by implementing a VirtualPathProvider that was able to fetch files from your CDN at runtime, but you would have to build that yourself.
The ASP.NET documentation may be able to help you out - http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification, there is a section called Using a CDN.
You cannot mix bundles, but you can include an outside source in your boundle config.
Here es an example picked from here as randomidea pointed out.
public static void RegisterBundles(BundleCollection bundles)
{
//bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
// "~/Scripts/jquery-{version}.js"));
bundles.UseCdn = true; //enable CDN support
//add link to jquery on the CDN
var jqueryCdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";
bundles.Add(new ScriptBundle("~/bundles/jquery",
jqueryCdnPath).Include(
"~/Scripts/jquery-{version}.js"));
// Code removed for clarity.
}
We need to enable CDN, to do so we set UseCdn to true and we add the url in the ScriptBundle constructor. The include file is going to be used in debug mode.
As the article suggest, we need to have a fallback mechanism in case our CDN fail:
#Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
var e = document.createElement('script');
e.src = '#Url.Content("~/Scripts/jquery-1.7.1.js")';
e.type = 'text/javascript';
document.getElementsByTagName("head")[0].appendChild(e);
}
</script>
Hope this helps.