If I execute my expressjs app like so node app.js everything works fine however when I execute it like node path/app.js it starts looking for public assets from the execution location.
How can I change the path?
app.use(express.static(path.join(__dirname, 'public')) doesn't seem to be doing anything
The error I get:
Asset 'styles.css' not found in search path:
/path/public/css
/path/public/js
Related
I have a server running with express. Let's say I have the following folder structure:
- public
-- image1.png
-- image2.png
-- image3.png
- src
-- app.js
In the app.js I setup the server using express and I do:
const app = express();
app.use(express.static('public'));
Now, If I start the server and go to localhost:port/image1.png I get image1.png displayed.
I am confused because the path I specified is incorrect, kinda. If I do:
app.use(express.static(path.join(__dirname, '..', 'public'))
I get the same result. Why they work the same?
it all depends on "how you start your server"
if you do:
node src/app.js
it will work because from a Node.js perspective, the path public exists in the file system from where the node process started,
now, if you do:
cd src
node app.js
it will not work because there's no public folder in the file system from where the node process started
behind the scenes, Express.js is using the serve-static package,
if you look in the source code, it is using path.resolve to load the folder:
https://github.com/expressjs/serve-static/blob/master/index.js#L65
and looking at the Node.js documentation for path.resolve, we have:
"If no path segments are passed, path.resolve() will return the absolute path of the current working directory."
So, resolving public from the current working directory of node when using node src/app.js, the folder exists!
that's why it works! :)
Edit
To anyone coming here in the future, I solved this problem by indicating a value for PUBLIC_URL in my .env file.
In my case, I set PUBLIC_URL=/ui and now the static assets are being served from .../ui/static/...
Whenever I build my app and launch it, the browser requests content from the static directory, such as this:
Is it possible to somehow change this? I took a look here, but I didn't have any luck. I tried different combinations of express.static(. . .) to no avail.
Instead of http:///static/bundle123, I want it to request http:///custom/static/bundle123.
I've tried moving my build/static directory into build/custom/static and doing something like this, but it didn't work:
app.use('/static', express.static(path.join(__dirname, './custom')))
What am I doing wrong?
The first argument determines the URL path and the second part determines where the files are located on the file system.
So if your static files are located in the public directory (or in sub directories) and you want to access then on the https://.../static URL, you can use:
app.use('/static', express.static(path.join(__dirname, 'public')));
In your case, assuming you run the server from the build directory, using the following should work:
app.use('/custom/static', express.static(path.join(__dirname, 'static')));
Now if you request an URL https:///custom/static/foo Express will look for a file named foo in the static folder.
The issue is Heroku can not find the files of my node project. This prompts the 404 Not found error. The question is how does the generic node Heroku file structure look like? If so, where do the files of my project actually reside in the heroku?
The scenario:
With the express library, I put all files needed to serve a frontend template, in a folder called 'public'. The absolute path leading to 'public' is needed and'_dirname' is the variable that contains that.
app.use(express.static(_dirname+'/public');
Now, Heroku always makes a GET request to the root of the application. As a response I send the
index.html file as the starting template. I also provide its absolute path as '{root:_dirname}'.
app.get('/', function(req, res) {
res.sendFile('public/index.html'{root:_dirname});
});
When the server is run, I get a 404 Not found error. Which means Heroku cannot find the files.
Heroku root folder is named app/. So as expected, providing the local '_dirname' is wrong since the application is now running on Heroku server not locally.
2020-09-10T15:28:12.127567+00:00 app[web.1]: Error: ENOENT: no such file or directory, stat '/app/C:/Users/...
But, pointing at the public folder alone(only /public), assuming app/ is root, still prompts the 404 error not found.
2020-09-10T15:31:23.630358+00:00 app[web.1]: Error: ENOENT: no such file or directory, stat '/index.html'
The Question
Which leads to the question, what does heroku file structure look like? where do project files reside in the heroku file structure, so i can provide the correct path on the GET request?
My file structure
After Bergur suggestion:
It prompts a 404 Not found. However, the path is now theoretically correct.
This is what I changed:
app.use(express.static(path.join(__dirname+'/public')));
app.get('/', function(req, res) {
res.sendFile('index.html',{root:__dirname+'/public'});
});
The 404 error comes from the 'app.get('/,function(req,res){});'. Without this handler, my heroku application shows a 'cannot GET' message on the template.
Have you tried to log out the full path just to see if there's something off?
I have several heroku projects with nodejs and react/vue/angular dist folder without problems.
I would change your code a little bit to:
use nodes __dirname
Use path.join instead of inserting the '/' yourself. It might cause some problems.
So final version might look like:
app.use(express.static(path.join(__dirname, 'public')));
This assumes the project structure is
-index.js
-public/index.html
There should be no need to use sendFile, serving the public folder is enough. Just make sure that the public folder is being deployed/pushed to heroku.
If you share with us your folder/project structure we might help you you better.
In all the node express tutorials I've read the following syntax is used to create the public directory:
var path = require('path');
app.use(express.static(path.join(__dirname, 'public')))
However the following works just fine:
app.use(express.static('public'))
So why would I use the path module instead ?
The last example uses a relative path, which will work if you start your app from the directory that has public as a subdirectory.
However, it will break if you start your app from another directory. Let's assume that your app is located in /path/to/app/directory but that you start your script while /tmp is the current (working) directory:
/tmp$ node /path/to/app/directory/app.js
In that situation, Express will try to use /tmp/public as the location for your static files, which isn't correct.
Using path.join(__dirname, 'public') will create an absolute path, using the directory where app.js is located as the base. In the example above, it will resolve to /path/to/app/directory/public, which will also be valid if you start your script from another working directory.
My app’s folder structure for NodeJitsu is as follows (i.e., when i do a jitsu deploy, I'm in the folder that contains "server.js" - i.e., the "server" folder).
Root server
|___server.js
|___package.json
client
|___www
|___index.html
|___css
|___js
|___etc.
So at the root is the folder "server", containing the starting script, “server.js”. Then there’s a folder called “client”, parallel to "server", with a folder within that called “www”, and within “www” is the main “index.html”.
In my “server.js” file, I have the following code:
app.get(‘/’, function(req,res)
{
var aPath = path.resolve(“../client/www/”, “index.html”);
res.sendFile(aPath);
});
I don’t have a app.use(express.static(__dirname + '/somefolder'). And when I start the app, I get this error:
Error: ENOENT, stat '/opt/run/snapshot/client/www/index.html'
My process.cwd() is /opt/run/snapshot/package. Obviously the above path isn’t pointing to the location where “index.html” resides. But I thought the way I do the path.resolve(…) should point to “index.html”. I can’t see where the problem is. If “server.js” is in the root, then to get to “index.html”, which is in “client/www/index.html”, then I should need to write “../client/www”, relative to the excuting script, to get to “index.html”, right?.
Do you have any insights as to where the path is not set up correctly? What should /opt/run/snapshot/ be pointing to? Or, what changes do I need to make in the get(‘/’) handler to correctly point to my “index.html”?
EDIT
I incorrectly drew the folder structure. Now it's correct.
I also turned off the app.get() and turned on the app.use(express.static(__dirname + '/../client/www/'). But to no avail: now i get a Cannot GET / error.
What I'm ultimately after is to have the "server.js" file be the Node server that, mostly, just serves AngularJS HTML files to the browser, with attendant images, stylesheets, etc., from the "client" folder. This is the server's main role, with an additional role of authenticating the app's users, employing the very nice Satellizer module. And that's it. I have a MongoDB attached, but otherwise this is a very common and straightforward Node.js server app.
Thanks!
Try it without rooting, resolving and log out to double check:
// notice no leading / which is root. __dirname should be the dir of current file running
var staticPath = path.resolve(__dirname, '../client/www');
console.log(staticPath);
Then pass that into express.static
app.use(express.static(staticPath);
I would probably recommend following the layout and convention of express generated apps with app in the root and static files under public
/public
<static files>
app.js
Then do what the generated app does:
app.use(express.static(path.join(__dirname, 'public')));