I tried running my website 2 methods.
1) By using node
2) Without using node(just index.html on my computer)
However, the outcomes are different in terms of linking stylesheet. Without node, the stylesheet in style tag could be linked as usual. However, when using node as a server, the stylesheet cannot be linked.
Here is the structure of my code.
/app
/server.js
/views
/statics
/index.html
/partials
/public
/javascript
/css
/main.css
/images
here is the index.html head tag
<link rel="stylesheet" type="text/css" media="screen" href="../../public/css/main.css">
server.js
const express = require('express')
const app = express()
const path = require('path')
// no need to use app.use(app.router) because of that update
// function signature express.static(root, [options])
app.use(express.static('public'));
// mount root to views/statics
app.use('/', express.static('views/statics'));
const PORT = process.env.PORT || 3000;
app.listen(PORT,() => {
console.log(`Server is listening on port ${PORT}`)
});
It seems that you did not provide the path under which your assets should be available under with
app.use(express.static('public'));
According to the docs in such case subfolders from the public folder will get served from root path.
In general you should avoid serving assets by relative path. In your case href="/css/main.css" should work. Node acts as a server and you define the paths under which given resources are available in server.js. You can't access them under the directory structure path of your filesystem
Make Public directory accessible by stating it as assets directory. In your server, add the code below:
app.use('/assets', express.static(__dirname+'/views/public'));
Then static files can be accessed as:
<link rel="stylesheet" type="text/css" media="screen" href="/assets/css/main.css">
Related
I can deploy to the root of a server (e.g. http://localhost:8008) but I can't deploy to a subfolder (e.g. http://edkolis.com/pwaexperiment/wwwroot/index.html); I get errors loading various files when I try that. Files that are missing include app.css and blazor.webassembly.js:
<link href="css/app.css" rel="stylesheet" />
<script src="_framework/blazor.webassembly.js"></script>
I see there is a <base> tag in the index.html that specifies that all relative URLs should point to the server root:
<base href="/" />
however if I remove this tag I still get the same errors. How can I deploy my Blazor PWA to a subfolder and have it work, and yet also have it work at the root for local testing (i.e. I don't want to hardcode a server URL into the <base> tag)?
The base href must match the actual path you deploy to.
To avoid changing it build-time, update the launchsettings JSON with that folder name so local (dev) runs also use the"production" base path
Somehow i got trouble figuring out the correct path. See below for the hierarchy:
Found out that the browser sends a request to http://localhost:8080/assets/vendor/bootstrap/css/bootstrap.min.css, which does not work. Are the packages located correctly?
It also works fine if the index.html is located in the assets folder as well.
git repo: https://github.com/elps/elpsstackoverflowrepo
try these:
<link href="../static/assets/vendor/font-awsome/css/font-awsome.min.css" th:href="#{/assets/vendor/font-awsome/css/font-awsome.min.css}" rel="stylesheet" />
<link href="../static/assets/vendor/font-awsome/css/font-awsome.min.css" th:href="#{/assets/vendor/simple-line-icon/css/simple-line-icon.css}" rel="stylesheet" />
I assume that you are trying to deploy to a server.
For example, if you deploy a myapp.war file into a Tomcat server, your
application will probably be accessible as
http://localhost:8080/myapp, and myapp will be the context name.
Context-relative URLs start with /:
<a th:href="#{/order/list}">
If your app is installed at http://localhost:8080/myapp, this URL will output:
<a href="/myapp/order/list">
Therefore, you are missing static folder in your url. Pay attention to the deployment process of your application.
I am learning to use node.js.
The site looks fine when run from file:///C:/.../myfolder/index.html
I have my jquery and bootstrap files in the directories myfolder/css/ and myfolder/js.
but when I run node index.js and go to localhost:3000, these css and js files cannot be found.
This is what is in my index.html file:
<link href="/css/bootstrap.min.css" rel="stylesheet">
<script src="/js/bootstrap.min.js"></script>
<script src="/js/jquery.js"></script>
<script src="/socket.io/socket.io.js"></script>
Is there some folder in nodejs that I'm supposed to store these files? Or do I have to put some code in index.js that imports all the css and js files?
You can simply follow the quick start instructions for Express.js here:
https://www.npmjs.org/package/express
Then browse to http://localhost:3000 to test
You can use the Atom text editor or Brackets and place your files under the public folder and reference them.
http://atom.io
http://brackets.io
By default Express uses a template engine called Jade. You can look here to work with that:
http://jade-lang.com/
Using HTML in Express instead of Jade
Node.js + Express without using Jade
Good luck!
Your localhost begins in a specific directory on you machine. If you use Xampp, you must put all your server files in C:\xampp\htdocs\ in order to acces these via your localhost URL. Some other servers use a folder called 'www'.
Find your server root path en put your files there. Or create a symlink from your server root to your files.
Did you require the path module?
var path = require('path');
It's best to create a public directory to store your files in.
public/index.html
public/css/style.css
public/js/scripts.js
The reason that you couldn't get access to localhost:3000/folder/file is that localhost:port is just a virtual port. There is no such directory called localhost:3000/css/ or localhost:3000/js.
To fix this, you need to use express module to configure the root directory from which to serve static assets.
Basically, you need to add the following code:
var express=require('express');
var app=express();
var path=require('path');
app.use(express.static(path.join(__dirname,'public')));
and your static files directory will be currentWorkingDirectory/public/, which contains all of your assets.
In your code, to link any source file,
href='/fileName.extention'
Here is the documentation link express-static-files
I have a nodejs server running with the client side encapsulated in a client folder to make managing the folder structure for index.html easy. Then the links and scripts should load no problem.
client folder
/index.html
/style.css
/script.js
closer folder
/closure
/etc.
app.js
package.json
utility.js
In my app.js file I have a normal
app.get ('/', function (req,res) {
res.render('index.html');
});
and when I run and go to the local host port the file loads, but when I open the chrome console, I see that the index.html file failed to load any of the scripts with a 404 error not found. I notice that in a lot of express apps there seems to be a common pattern of something along the lines of
this app.set('views', __dirname + '/client');
this app.use(express.static(__dirname + "./client"));
this app.use('client', express.directory('client'));
but I don't see an explanation on the difference between app.use and app.set, nor a good explanation, the best the I could find was
app.set('views', __dirname + '/views'): Use ./views as the default
path for the client-side templates
from Alex Young's article but even this was a little sparse and dry for me, I'm hoping for a bit deeper of an explanation as to why the index file might be unable to load a link on the same directory level as it.
<link rel="stylesheet" type="text/css" href="style.css" />
I look at this and I can't find the problem.
From the answer Express-js can't GET my static files, why? I'd suggest:
app.use("/client", express.static(__dirname + '/client'));
This is needed because your:
app.get ('/', function (req,res) {
res.render('index.html');
});
is only addressing what happens when someone goes to / and saying that index.html should be served. That alone doesn't serve anything else.
just run your server from root directory of your project.
that will fix the problem because you used relative addressing.
I have inherited a site which the css links on all of the 100+ pages are relative to the root. For example they are
<link type="text/css" rel="stylesheet" href="/css/main.css">
Locally this is fine locally but remotely the .html file is looking at the root folder when actually the files are in
http://myserver.com/thesitefolder
is there a way to do this via .htaccess or another way? I think a sub directory would work but is there a qucik way to fix this?
Set up a DNS A-Record for thesite.myserver.com pointing to IP of myserver.com
Set up Apache virtualhost for thesite.myserver.com pointing to the root directory
Now your site folder (for the new virtual host) is the root folder