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
Related
I have a developed gulp file with both browser-sync and live reload. this gulp file works perfectly for my requirements. for the base idea, I have a root folder in my Apache server and inside it I have my project folders.
--public
---proj1
---proj2
I'm using my gulp file to watch and build project folder and live reload.
currently I'm using browser-sync:
browserSync.init({
proxy: {
target: "localhost/newTest/public", // can be [virtual host, sub-directory, localhost with port]
ws: true // enables websockets
}
});
every changes done inside the 'public' folder, will affect the live reload. if I have opened both projects in two separate windows and do some changes on one project both windows are refreshing(live-reloading). I do not need that to happen. only one window should be live-reloading. how can I do it.
reason:
I want to implement this to server side level for many users, how can I do it? A change from a user should not affect other users.
I've been going mad for the last two days trying to understand why my localhost connection merely displays a blank page in any browser for my "index.html" file in my "htdocs" folder in XAMPP. The page is blank in every browser (Edge, Chrome, Firefox, IE). Strangely, I can view the source code fine for the page in the browser though! Even more strangely, my "index.html" file displays a blank page even when it's loaded from another location other than htdocs (such as the desktop). And my test html file I created displays just fine using the htdocs folder in XAMPP. I'm using the default Apache ports 80 and 443. I'm also using Windows 10.
Could this be some error in my webpage code? I'm doing pretty vanilla stuff here: just CSS/HTML and Bootstrap. All CSS/HTML/Bootstrap files are in the htdocs directory. If you'd like to see the full code, you can go to my publicly hosted site at stephengladwin.com You can also view my current XAMPP code for my "index.html" file in the attached screenshot.
Here's what I've tried:
-Unticking the "use ports 80 and 443" box in Skype
-Re-installing XAMPP
-Updating the config file to listen to a different port (used port "123")
-tried disabling "World Wide Web Publishing Service" in services.msc
Thanks in advance for any help you can provide!
XAMPP Code
The best question is the one you answer yourself! Turns out it was a bootstrap error. In the Chrome browser inspect tool I opened the console and lo and behold, there was an error where the browswer couldn't access the "tether.min.js" file which bootstrap requires. Indeed I did have the tether file linked in my index.html file, but it was not in the right order in the code flow. It had to come before the javascript link. Now my index.html page displays fine on the localhost via XAMPP!
On a web server (including localhost), having a link to / or a stylesheet at /style/myapp.css works fine. However, when the project is local (that is, on a file:// URL), a link to / leads to the file system root. Is there any way to specify to the browser where the root of a local project is?
You can add this on your index.html:
<script type="text/javascript">
$(function() {
$('a').click(function() {
document.location = $(this).attr('href');
return false;
});
});
</script>
I dont have enough reputation to comment above, but if you are using Windows, you can use something like Wampserver: https://sourceforge.net/projects/wampserver/
I personally recommend it because it's very simple to use, and it will give you a web server with MySQL and PHP. Your benefit is you will be able to duplicate the same environment locally that you have on your server.
You can set your local folder to anywhere you prefer and check it from web browser at http://localhost
Hope that helps. Try and duplicate both environments so can always work with your creations. If you install Wamp and you cant access it via http://localhost, then you probably have a firewall issue, so you need to investigate how to open up port 80.
That sounds like it will solve your issue also.
http://localhost/style/myapp.css would refer to "/style/myapp.css".
If you were hosting your Wamp server from c:\wamp64\www then the location "/style/myapp.css" would be referring to C:\wamp64\www\style\myapp.css
-Adam
I create a b.js script file like below. when i run this using node.exe program then it correctly open "word2code.exe" file.
How can i add this script in a .html page (as link or button onclick event) in appjs for windows?
var exec = require('child_process').execFile;
var fun =function(){
console.log("fun() start");
exec('word2code.exe', function(err, data) {
console.log(err)
console.log(data.toString());
});
}
fun();
You cannot run an exe directly on the client side in an HTML page -- the browser cannot understand binaries. Instead, if you basically want to fire off a process like this, you could take another approach:
Build a website that has a button.
This button, when clicked, should make a request to your server on some URL (like /execute).
Write a separate web server process on your windows machine, that runs the web server.
Write a route on your web server that handles /execute requests.
Make this route run your exe file LOCALLY ON YOUR SERVER when the route is executed.
By doing things this way, you're essentially allowing a web user to run an exe indirectly (your server will be the one running the binary, not the user).
Node.js runs on the server. The browser is on the client side. You cannot execute a nodejs app from the browser as the environment does not support nodejs.
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.