I am just starting with Express and express-ejs-layouts. I have a layout.ejs file that has the common parts of my web app. This works great for pages that are at http://localhost/path1/path2, but I would also like to use this for the root index page of my app (i.e.: http://localhost/
The problem is the links for the CSS and JS files:
<link href="../../stylesheets/main.css" rel="stylesheet" type="text/css">
This doesn't work for http://localhost/
Should I break this out and add it to each view template with the correct pathing? How have people done this in the past?
You can use absolute URLs for static files (eg. href="/public/css/" ) to avoid this issue.
For Node.js/Express.js web applications, it's convenient to create a public folder at the root, where you put all your static files.
Related
I have a website I built inside atom text editor. I am trying to build the website again in an ASP.NET environment. I am using the MODEL VIEW CONTROLLER design pattern. I have placed some simple styling inside my css file but I don't think my path is correct. I am including a screenshot of my link tag and my codebase/directory. Any help is much appreciated
Static files, such as HTML, CSS, images, and JavaScript, are assets an ASP.NET Core app serves directly to clients. Some configuration is required to enable serving of these files. The default directory for these files is wwwroot.You should put the css file under this directory. You can also take a look at the Static files Docs if you want to change the default directory for your static files.
Once you put the content folder inside the wwwroot directory. You can use the following code in your view to refer it.
<link rel="stylesheet" href="~/Content/StyleSheet.css" />
Hope it helps.
I'm building a website locally using Apache, MySQL and PHP. I have different subfolders and I'm trying to give one absolute reference to my css file from my main header.php includes file.
Inside of header.php I have:
<link href="/Users/nicolauria/Sites/sd/css/style.css" type="text/css" rel="stylesheet" />
The css file does not load correctly. Developer tools gives me this message "The requested URL /sd/css/style.css was not found on this server."
Any help is greatly appreciated!
Nico
You're loading this via HTTP? Then you're bound to use only "http-space" paths, which means you can NOT include the site's document root in urls. e.g.
your site's files are physically on the server in /home/sites/example.com/html, which is defined as the document root of the site. When you visit the site and request a file, e.g. http://example.com/foo/bar.html, the web browser will send over:
GET /foo/bar.html
and the webserver will tack on the document root, producing
/home/sites/example.com/html/foo.bar.html
But note that this path applies ONLY within the webserver itself. It will never be accesssible to you in this form. You can only specify directories/files within the site's document root. That means if you requested something like example.com/home/sites/example.com/other/file.html, you'd force the server to produce /home/sites/example.com/html/home/sites/example.com/other/file.html, etc...
If you want to provide an absolute URI then you must:
Include the scheme (file://)
Accept that many browsers will refuse to load file: data onto a page loaded via http:/https: for security reasons
Accept that users on other computers won't have access to your filesystem
It is far, far better to host all the resources you need on the webserver.
In Which location your header.php file is located? I mean If you have your header.php file in sd folder than use your code like this <link type="text/css" rel="stylesheet" href="css/style.css" />
Maybe this link will help you alot
http://www.htmlhelp.com/reference/css/style-html.html
I have Rails application with documentation which is static html pages in the /public folder.
The tree of my public folder:
-public
-docs
-intro
introduction.html
-css
some.css
index.html
Index.html file is:
<link rel="stylesheet" href="css/some.css" type="text/css" />
Some of the text
<li>href="intro/introduction.html"><em>Introduction</em></a></li>
When I open index page css isn't loaded, and when I try to click on link it says routing error. As I understood static pages don't know where to look for css and other html pages.
I just want static pages without any routes and controllers, nginx.
Any ideas?
All the public folder content is accessible via "/"
<link rel="stylesheet" href="/docs/css/some.css" type="text/css" />
You can use high_voltage gem to generate static_pages
Its perfectly valid to serve static files (pages or not) via the public directory. As Kirka121 said rails is not really built for this purpose but can still work with it.
In development environment it should just work to serve whatever files you have in public, for production environment you might need to configure whatever server you use to serve them - but this should be covered by its normal setup anyway, if not its set up wrong.
So by default the rails public folder can directly by accessed at the root of the project.
As far as your code goes the relative links/urls seem to be the issue. Its generally better to use absolute paths for everything not to confuse anything, which leads to very hard to find bugs.
With your folder structure and example this would be:
<link rel="stylesheet" href="/docs/css/some.css" type="text/css" />
Some of the text
<li><em>Introduction</em></li>
I am a beginner with node.js and am using express with the ejs layout, and I want to know how to get rid of the .html extension when putting up a page. For example if I go to my localhost:3000/about.html - that works but I want it to show up as just /about. Also, having trouble figuring out how to change the favicon if anyone knows how to quickly change that from the express default.
Any help would be great thanks.
(I realise this question is old, but it appears high in Google search results, and the accepted answer isn't the best solution.)
The best solution for serving up static content in express.js is express.static. To avoid having to specify file extensions in URLs you can configure it with a list of default file extensions that it will use when searching for static files:
app.use(express.static(pathToBaseFolderOfStaticContent, {
extensions: ['html', 'htm'],
... // Other options here
}));
This will serve up pathToBaseFolderOfStaticContent/somePage.html or pathToBaseFolderOfStaticContent/somePage.htm in response to a GET request to http://www.example.com/somePage, which is what you want. For example, if you visit https://arcade.ly/star-castle, the file it serves up is just a static file called star-castle.html. I haven't had to add any special routing for this, or any other static file - it's all just handled by express.static.
I only need to add specific routes for content that requires active work on the server to return. A big advantage here is that I can use a CDN to cache more of my content (or nginx if I were running an internal line of business app), thus reducing load on my server.
You can obviously configure as many default file extensions as you like, although I'd tend to keep the list short. I only use it for resources where the URL is likely to appear in the address bar, which generally means HTML files, although not always.
Have a look at the following documentation on serving static content with express.js:
http://expressjs.com/en/starter/static-files.html
http://expressjs.com/en/4x/api.html (the express.static documentation is at the top)
This is also answered at In express what is the common way to associate a default file extension with static content requests?.
The favicon.ico issue can be solved by dropping your favicon into the root folder from which you serve static content, as well as implementing +Costa's solution where you reference it using a <link> in the <head> of your documents.
In theory you shouldn't need to do put the favicon in the root folder but, in practice, some browsers will still ask for it from the site root even though it's referenced in the <head> of your document. This leads to a spurious 404 error that you'll be able to see in client side debugging tools (e.g., Chrome dev tools).
The Favicon issue is usually a caching problem. As long as you have this code in your base html layout:
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">
Then just navigate to wherever that image is with your browser, and that should force your cache to update.
I figured it out. I looked at this post Render basic HTML view? which solved the problem I was having.
app.engine('html', require('ejs').renderFile);
app.get('/', function(req, res){
res.render("index.html");
});
And this all goes in the app.js or whatever file you are running.
We are using static HTML files as theme for our Plone 4 site with collective.xdv.
The static HTML files themselves are openable in a web browser making the theming process easy for the theme authors.
However, theme files use a file system resource directores which are referred in HTML like
<link rel="stylesheet" type="text/css" href="../css/jquery/accordion.css"/>
How it could be possible to rewrite these to be absolute URL when served through Plone, with a custom prefix? (Can it be done in rules.xml??
E.g. translate
../images/logo.gif
To
http://portal_url/images/logo.gif
If you use the "absolute_prefix" setting
<registry>
<record interface="collective.xdv.interfaces.ITransformSettings" field="absolute_prefix">
<value>/++resource++example.sitetheme</value>
</record>
</registry>
and manage your static files via the resource registries with the "applyPrefix=True" option you can use both relative and absolute urls inside your theme html file (preserving the possibility for theme authors to simply use the static directory independent from Plone) and use
<drop theme="/html/head/style" />
<append theme="/html/head" content="/html/head/style " />
to remove them from the theme template and pull all static resources back in from the resource registries (with the additional benefit of having them merged for production use). See collective.xdv for details.
Note: though Nginx is very fast at serving static files we got better overall performance from utilizing the resource registries for our theme`s static files in combination with the usual caching proxy (Varnish) in front.
Register the static directory as a resource. Keep the directories containing the rules and the media files separate.
To register a resource directory inside your package, named 'my.package', use the following in your configure.zcml
<browser:resourceDirectory
name="my.package.media"
directory="static"
/>
In your template, you will now be able to access a resource using '++resource++my.package.media/name-of-resource', i.e.
<link rel="stylesheet" type="text/css" href="++resource++my.package.media/css/jquery/accordion.css"/>
This should now work as intended even after a url rewrite.
Avoid using absolute paths when defining the locations of your XDV rules and templates. Instead, simply use Python :) For example, we have placed our template files (.html) and our rules files (.xml) in a directory called xdvstuff, inside our package:
python://my.package/xdvstuff/theme.html
python://my.package/xdvstuff/theme.xml