This question already has an answer here:
nodejs express not to intercept messages for a folder with static content
(1 answer)
Closed 7 years ago.
I have a folder structure for my Node.JS app
/
|-js
|-ajax.js
|-img
|-css
|-views
|-index.html
|-router
|-main.js
|-node_modules
|-server.js
My server.js file looks like
var express=require('express');
var app=express();
require('./router/main')(app);
app.set('views',__dirname + '/views');
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
var server=app.listen(3000,function() {
console.log("Express is running on port 3000");
});
I am very new to Node and Express. When I try to include a js file within my index.html (inside views), it says the file can't be found. I don't understand why
../js/ajax.js
is unable to be found from my index.html
I think the same issue is happening with my css files.
You need to set your js directory as static.
app.use(express.static('js'));
http://expressjs.com/starter/static-files.html
However I would recommend doing this with your directory structure:
-static
-js
-ajax.js
-img
-css
-views
-router
And then
app.use(express.static('static'));
Related
I would like to add some backend functionality for payment option for my small Firebase web app. My project has the following structure.
project
| functions (cloud functions here)
| --server.js
| static (all JavaScript files for frontend, css, images)
| --style.css
| --index.js
| --images
| index.html
| other HTML files
Here is what I have inside my server.js file. I am getting net::ERR_ABORTED 404 (Not Found) for all my JavaScript files. What should I do here?
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.use(express.static('../../project'));
I noticed the following two possible posts that might help me, I tried some top answers from there but still stuck, do not actually understand where is the problem and what has to be done.
JS file gets a net::ERR_ABORTED 404 (Not Found)
How do I use HTML as the view engine in Express?
The problem I noticed here is this line app.use(express.static('../../project'));
What you are doing is setting the folder project to public. Your JS files are inside a static folder, and they do not get read. I would suggest the following structure:
project
server.js
static (folder)
HTML (folder for all HTML files)
css (folder for all css files)
js (folder for all js files)
Then in your server.js file:
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.use(express.static('./static'));
I have created an app with create-react-app. I have built it and I have written a simple express app for serving the react built app.
I have some problems with the static files and the files which are in the root folder of express app, (e.g. manifest.json, service-worker.js). Now I get 404 on both these files.
How can I treat this files in express? They must be in the static folder? I have to modify the react app?
I went to see the file generated by the react build, in which the file 'service-worker.js' is imported and the string starts with '/' (that is '/service-worker.js')
(I have not touch the files for the pwa since I created the project)
Here there's my root folder of my express app
I have only added the project.json and the index.js (and obviously the node_modules), the other files are those from the react build.
Here my express app:
const compression = require('compression');
const bodyParser = require('body-parser');
const express = require('express');
const app = express();
app.use('/sketches', express.static('sketches'));
app.use('/static', express.static('static'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(compression());
app.get('/', (req, res) => res.sendFile(__dirname + '/index.html'))
app.listen(process.env.PORT || 3000, () => console.log('server listening!'))
Adding this line of code I get the service-worker.js but I can't get the files in the sketches folder.
app.use('/', express.static(__dirname));
I had a same problem i resolved it by following these steps.
warning: i am new to these technologies and i don't know much about web security. this maybe not the best way of doing it.
i get it work using ejs template engine and express but it should work in your case as well.
1) create-react-app
2) yarn build
3) copy static folder into public
4) copy service-worker.js inside static folder also
5) go inside main Ctrl + f
6) type /service-worker.js in search hit Enter
7) you will see somthing like that var e="/service-worker.js";
8) change into var e="/static/service-worker.js
9) finally open service-worker.js change /index.html to /
precacheConfig=[["/","d6be891ca003070326267be1d2185407"]
I firstly made a basic node server like this:
var connect = require('connect');
var serveStatic = require('serve-static');
connect().use(serveStatic(__dirname)).listen(8080, function() {
console.log('Server running on 8080...');
});
Then I replaced it with an express server like this:
var express = require("express");
var app = express();
var path = require("path");
app.get('/',function(req,res){
res.sendFile(path.join(__dirname+'/index.html'));
});
app.use(express.static("public"));
app.listen(8080);
console.log("Running at Port 8080");
With the first one, everything worked fine. CSS, JQuery, images etc..., but with the second one, some of my style elements totally disappeared and it can't reach the pictures on the site. What did I miss? How can I solve it?
You are not serving static files.
app.use(express.static("public"))
This would serve all files from /public directly on the root of your server /. If you want to serve them at /static you need to modify the code a bit.
app.use("/static", express.static("public"))
Example
File Structure
├── node_modules
├── package.json
├── public
| └ style.css
|
└── server.js
server.js
var express = require("express")
var app = express()
app.use(express.static("public"))
app.listen(3333)
After running server.js you should be able to access http://localhost:3333/style.css (and every other file in the /public directory)
In order to serve static files have a look at https://expressjs.com/en/starter/static-files.html which shows you can use:
app.use(express.static('public'))
app.use(express.static('files'))
to serve static files from the public and files folder. In your example code you are only serving the index.html.
I am trying to build my first web app using MEAN on Heroku. I followed their guide to getting a sample app running. Then I downloaded the sample app code and altered it to load the login page. Unfortunately, I can't get the my app.js file to load. This is the angular script. In the main directory I have index.js that is running express. Anyways, I am able to get the .ejs .css and img files to load but this script wont. I am stuck. I need to be able to get past this to tinker enough to start learning the stack.
Script is in the public directory with the other files that get loaded. Code looks okay? Don't know why I get 404 on the script.
Any help is much appreciated!
var express = require('express');
var app = express();
app.set('port', (process.env.PORT || 5000));
app.use(express.static(__dirname + '/public'));
// views is directory for all template files
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.get('/', function(request, response) {
response.render('pages/index');
});
app.listen(app.get('port'), function() {
console.log('Node app is running on port', app.get('port'));
});
<script src="/js/app.js"></script>
Turns out changes weren't being pushed to the server. That's all folks!
You just need to move app.js to the public folder. This line app.use(express.static(__dirname + '/public')); in your index.js tells express to serve static assets out of the /public folder. Everything else in your project will be "hidden" on the server unless you expose it.
You could create a js folder in public and move app.js there. Then change the reference in index.ejs from src="/app.js" to src="/js/app.js".
Following is a small server (app.js) which is is simply calling index.jade file to add jquery.js, underscore.js and backbone.js for later use. But its not working.
My directory structure is:
base
app.js
public
jquery.js
underscore.js
backbone.js
theapp.js
views
index.jade
My app.js file is:
var express= require("express"),
http = require("http"),
path = require("path");
var app= express();
app.use(express.static(__dirname+ "/public"));
app.get("/", function(req, res){
res.render("views/index.jade");
});
app.listen(3000);
My index.jade file is:
#main
script(src= "jquery.js")
script(src= "underscore.js")
script(src= "backbone.js")
script(src= "theapp.js")
When I run localhost:3000 in the browser, it says: Error: Failed to lookup view "views/index.jade"
(Localhost is working fine with another node.js program)
Please help. Thanks a lot!
Dont include the .jade
res.render("views/index");
Assuming your view engine is already setup to use Jade. (app.set('view engine', 'jade');)
You also probably dont need to specify the "views" folder, check for the line
app.set('views', path.join(__dirname, 'views'));
in your app.js - this is the root directory for your views, so you'll only need:
res.render("index");