Nodejs Index.html Loads but Links & Scripts 404 - html

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.

Related

Why does my website download instead of open?

So I just started a new project and the file keeps downloading when I try to open localhost. There is barely anything in this project this is my whole server:
// initialize server
const express = require("express");
const app = express();
app.engine(".ejs", require("ejs").__express);
app.set("view engine", "ejs");
app.use(express.static(__dirname+"views"));
app.use(express.static(__dirname+"public"));
// start server
app.listen(3000, function(){
console.log("listening on port 3000")
});
// get html
app.get("/start", function(req, res){
res.sendFile(__dirname+"/views/homepage.ejs")
});
I also have the homepage.ejs with only a text "hello" and empty folders views and public>css. When I set it up I could open the homepage after I wrote the server code and created the folders (it showed the text, everything worked) but when I tried to create a stylesheet and color the background of my homepage it downloaded. I then deleted the css sheet and restarted the server, it keeps downloading. I'm working on bigger projects via github and I never had that problem it just happens when I'm on my own projects. I tried copying some older small projects of mine which always worked but as soon as I change a few things (doesn't matter what) it downloads again. I have the folders in my OneDrive so I opened them on my laptop, same problem. I opened them in other browsers (Chrome, Explorer, Firefox) same problem. Does anyone know how to fix it pls?
Edit: javascript project in vs code if that helps

href attribute in stylesheet link does not work in node

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">

Github Pages React App index.html file not in root

I have researched extensively and have not been able to find an answer to this issue. I’m thinking it might still not be solved! Is there any way to change the path of a React app (in webpack) so that the index.html file can be in the root, and not in a public folder? This would be so I can host my portfolio on github pages, which requires the index.html file to be in the root.
You can assign the publicPath as root in output in webpack config file
like
output: {
filename: '[name].js',
publicPath: '/',
},

How do I display an HTML file using Websphere Liberty?

I have static HTML pages. Using the Apache server (through XAMPP) I used to put my HTML files in the htdocs folder and they would be accessible through the localhost URL.
I'm not sure how to do this with Websphere Liberty server. let's say I have the following HellWorld HTML example in index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HellWorld</title>
</head>
<body>
<p>HellWorld</p>
</body>
</html>
How can I get this HTML page to show in the browser through Liberty?
The minimum folder structure needed is the following
+ SampleHTMLSite.war
- index.html
To create the .war file just zip your index.html file and then change the extention of the zipped folder from .zip to .war
If you are running Liberty sever in foreground through server run command, as soon as you put this website in Liberty's dropins folder (usually located here: ...\wlp\usr\servers\YourServerName\dropins) you will get something like the following update:
[AUDIT ] CWWKT0016I: Web application available (default_host):
http://localhost:9080/SampleHTMLSite/
[AUDIT ] CWWKZ0001I: Application SampleHTMLSite started in 0.317 seconds.
If you go to http://localhost:9080/SampleHTMLSite/index.html you should be able to see your HelloWorld HTML page.
If you get the following error:
Error 404: java.io.FileNotFoundException: SRVE0190E: File not found: /index.html
Open your SampleHTMLSite.war with any unzipping program (example: 7-Zip) and be sure that the index.html is showing directly inside the .war file and not inside another folder. There is a chance that you have the following structure:
+ SampleHTMLSite.war
+ SampleHTMLSite
- index.html
This would mean to access the index.html you need the following URL:
http://localhost:9080/SampleHTMLSite/SampleHTMLSite/index.html
In bigger project and where you need to use Java apps your folder structure might need to include other folders and files. If you are intrested to know more about this, check the following article:
Handling Static Content in WebSphere Application Server
The simplest:
In dropins folder (\wlp\usr\servers\serverName\dropins), create folder myApp.war
put your index.html in the myApp.war
If your server is configured for polled monitoring you are done. Otherwise restart the server (if was started).
It will be available via http://host:port/myApp/index.html.

viewing site on http://localhost instead of file://, using node.js

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