So, I have a file structure like this:
App
client
index.html
App.js
server
node_modules
package.json
server.js
the server.js is the server file ran by node, it serves up the index.html
var app = require('express')();
var http = require('http').Server(app);
app.get('/', function(req, res){
res.sendFile("client/index.html",{ root: '../' });
});
http.listen(3000, function(){
console.log('Server is listening on port 3000');
});
So the index.html includes the App.js in it's head, like you normally would
<script type="text/javascript" src="App.js"></script>
The problem is, that App.js is never found and included when I connect. Gives a 404. How could I fix it?
This one solved mine. You can check this out.
var express = require('express');
var app = express();
app.use('/js', express.static(__dirname + '/public/js'));
Thus, my app.js can be accessed via -> http://localhost:3000/js/app.js
Your server doesn't seem to do anything but sending client/index.html when http://127.0.0.1:3000 is requested in a browser.
So what actually happens, when the browser received the index.html, it sends another request to http://127.0.0.1:3000/App.js. But your Server can't answere that request. It can only anwere requests for the index. If you want a static server check out serve-static on Github:
https://github.com/expressjs/serve-static
Or you could write another route for you app anwering with the App.js as you did for the index.html.
looking at your server folder structure you need to access using the path ./client/App.js, instead of only App.js
So your script tag will look like,
<script type="text/javascript" src="./client/App.js"></script>
Related
I am working on node(Express). I'm getting my directory structure instead of content. Moreover my browser window isn't getting reloaded too when I save my file. I don't have any index.html file as I don't need it.
P.S. I read many related answers on stackoverflow but all those involved index.html relation somehow
This is the image of my directory structure
var express = require('express');
var app = express();
app.get('/',function(req, res){
res.send("This is Landing page");
});
app.listen(5500, function(){
console.log("Server has started at port 5500");
});
Code from app.js file
I am having some trouble resolving dependencies on my express server.
Here is my project structure
Calculator
--dist
----app
-------calculator.js
-------server.js
--node_modules
--src
----app
--------calculator.js
--------server.js
----public
--------calculator.css
--------calculator.html
----.babelrc
----.gitignore
----package.json
Here is my server.js code
const express = require('express');
const app = express();
const path = require('path');
app.get('/', (req, res) => {
res.sendFile(path.resolve('./src/public/calculator.html'));
});
app.use(express.static(__dirname + '../../src/app/public'));
app.use(express.static(__dirname + './'));
app.listen(3000, () => {
console.log(__dirname);
console.log("Listening on port 3000");
});
The reason I have a dist folder and a src folder is because I am compiling my JS from ES6 from the src folder to ES5 within the app folder using Babel.
However, when I launch my node server, my html is not able to load the css file and JS file. I am using these paths to load each respectively from the calculator.html file
<link rel="stylesheet" type="text/css" href="./calculator.css">
<script type="text/javascript" src="./calculator.js"></script>
I am sure I am missing something about the way files are served on a localhost. Would appreciate the error being pointed out.
It looks like on line 9 in server.js:
app.use(express.static(__dirname + '../../src/app/public'));
you're going from the app folder up to src, up to the root, back down into src, back into app, and then trying to go down into public. However by your project structure diagram, public isn't inside app but rather beside it. You'd want something more like app.use(express.static(__dirname + '../public')); In addition, I'd recommend using the path module that's built into Node. It'll make sure you don't have mistakes in path creation.
EDIT: Sorry, that was incorrect. I didn't see that you were transpiling your server code as well. You'll want to use these lines, which should fix both:
app.use(express.static(__dirname + '../../src/public'));
app.use(express.static(__dirname));
This is assuming you run the server.js file present in dist/app and not the one in src/app.
Alright, this worked for me although I'm not a 100% sure why exactly.
I set my express static file delivery to the following
app.use(express.static(__dirname + '/../../src/public'));
app.use(express.static(__dirname));
My __dirname was shown to be Calculator/dist/app so changing the src attributes for the CSS and JS in the HTML file to this worked
<link rel="stylesheet" type="text/css" href="./calculator.css">
<script type="text/javascript" src="./calculator.js"></script>
I am assuming this works because I set my express static folder to look inside the /src/public folder and since my current directory was the /dist/app folder, I could serve the JS file directly from there?
Try one of these ...
app.use(express.static(__dirname + '/./src/app/public'));
app.use('/', express.static(__dirname} + '/./src/app/public')); // __dirname doesn't include the ending back slash, I think?
The first will always look in your static directory, and the second will look in your static directory for '/' and below. See https://expressjs.com/en/4x/api.html#app.use for more.
And then ...
Change your HTML so the src attributes will be '/calculator.css', etc
My server side application is hosted on heroku: https://shielded-dusk-72399.herokuapp.com/
Relevant code looks like this:
const
express = require('express'),
app = express(),
server = require('http').createServer(app),
io = require('socket.io').listen(server),
port = process.env.PORT || 8080
server.listen(port, (err) => {
console.log(err || 'listening on my very special port ' + port)
})
In my heroku logs this gets logged: "listening on my very special port 28428"
Now on my client application:
Currently my client application is running on port 8080
In my index.html:
<script>/socket.io/socket.io.js" charset="utf-8"></script>
When I go to localhost:8080 I get the following errors:
Cannot GET http://localhost:8080/socket.io/socket.io.js
Other Attempts:
<script src="https://shielded-dusk-72399.herokuapp.com:28428/socket.io/socket.io.js" charset="utf-8"></script>
Cannot GET https://shielded-dusk-72399.herokuapp.com:28428/socket.io/socket.io.js net::ERR_CONNECTION_REFUSED
<script src="https://shielded-dusk-72399.herokuapp.com:8080/socket.io/socket.io.js" charset="utf-8"></script>
Cannot GET https://shielded-dusk-72399.herokuapp.com:8080/socket.io/socket.io.js net::ERR_CONNECTION_REFUSED
And then I copied ./node_modules/socket.io-client/dist/socket.io.js to resources/js and get this error:
Cannot GET http://localhost:8080/resources/js/socket.io.js 404 (Not Found)
Any ideas?
I've used these all as references and still coming up short:
node.js /socket.io/socket.io.js not found
Node.js /socket.io/socket.io.js not found express 4.0
Can't get socket.io.js
You need to specify from where to serve your static js file. For instance, if you placed the socket.io.js file in your /resources/js/ folder, add the following:
app.use('/resources', express.static(path.join(__dirname, 'resources')))
Then your file will be available on http://localhost:8080/resources/js/socket.io.js
In my express server, I want to have all paths load the same static website, which I tried doing with the following code:
const express = require('express');
const app = express();
app.use('*', express.static('build'));
app.listen(3000);
Unfortunately I am presented with the following console errors when I navigate to any path on localhost:
:3000/main.js/:1 Uncaught SyntaxError: Unexpected token <
When attempting to view the JS file with the error, it seems to be serving index.html in its place.
I know this is due to the wildcard, but I can't think of a way to cleanly exclude all file names and paths from the static server.
I think you're looking for something a little more like this..app.use(express.static('public')
if your tree looks like
ProjectName
| server.js
| public
| index.html
you don't need the * as a parameter since setting the express.static sets the folder open to public view. This is how you separate your server code and client code. Be careful not to expose your entire project directory as people will then have access to your server code. This is why you're client files should be kept in a public folder or a www folder (common practices)
--EDIT
//this will server css, and js files so they can be linked into the html
app.use(express.static(__dirname + '/public'));
//this will force all url's except the public files to be given the index.html file.
app.use('*', function(req, res) {
res.sendFile(__dirname + '/public/index.html');
});
There might be a very simple solution to this question, but I am not able to find answer online and due to my practice with node I can't figure it out either.
I'm trying to set up a simple server.js file that listens on port 80 and serves /dist/index.html file when users enter root address, so example.com
This is my project structure
dist/
index.html
bundle.js
node-modules/
package.json
server.js
You can create a static server with express:
server.js
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/dist'));
app.listen(8080, function() {
console.log('Listening on port: ' + 80);
});
You simply run node server.js to get the static server. This app can also be deployed.
http-server is a simple method of serving from your file system. Install that, then just run http-server -p X in the command line in your project folder, substituting your port number for X