Express app not serving static files on production server
Question
I'm building a simple (at least from a backend perspective) single page app using Express. This app is working perfectly well locally but after deploying it, my static files aren't working. I've looked around and I believe I am using express.static() correctly. The other thing to note, I've deployed it on GoDaddy. Not sure if this is causing any issue but perhaps relevant information.
Here's a link to my hosted site, feel free to inspect yourself: http://senseless.world/
My relevant code in my app.js file is the following (I've excluded a few unrelated bits):
const express = require('express');
const app = express();
const path = require('path');
const router = express.Router();
app.use('/static', express.static(__dirname+'/static'));
router.get('/',function(req,res){
res.render(path.join(__dirname+'/static/index.ejs'), {routeStr: ''});
});
app.use('/', router);
app.listen(process.env.port || 3000);
Here's how I'm loading static files in my index.ejs file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Senseless World</title>
<link rel="stylesheet" href="static/styles/main.css?version=8" type="text/css">
<link rel="stylesheet" href="/static/styles/mobile-styles.css?version=3" type="text/css">
<script src="/static/scripts/vendors/jquery-3.5.0.min.js"></script>
<script src="/static/scripts/vendors/p5.min.js"></script>
<script src="/static/scripts/vendors/p5.sound.js"></script>
<script src="/static/scripts/bundle.js" type="module"></script>
<script src="/static/scripts/modal-page-open.js?version=5"></script>
<script src="/static/scripts/flashlight.js?version=3"></script>
<link rel="icon" href="/static/senseless-favicon-16.png" type="image/png" sizes="16x16">
<link rel="icon" href="/static/senseless-favicon-32.png" type="image/png" sizes="32x32">
</head>
...
The error I'm seeing in the console is the following:
And here is what I'm seeing from the network console:
Solved it:
Needed this in my .htaccess
RewriteEngine On
DirectoryIndex disabled
RewriteRule ^$ http://127.0.0.1:3000/ [P,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ http://127.0.0.1:3000/$1 [P,L]
2 answers
solution1
0 2020-05-06 12:08:25
You Can Follow This Code
const express = require('express');
const app = express();
const path = require('path');
const router = express.Router();
// At first create public folder and move all ejs file in public folder
app.use('/static', express.static(__dirname+'/static'));
router.get('/',function(req,res){
res.render(path.join(index.ejs);
});
app.use('/', router);
app.listen(process.env.port || 3000);
solution2
0 2021-08-04 23:20:47
If you're using nginx on a Digitalocean's vp server, edit your nginx config file.
Run the following command:
- sudo nano /etc/nginx/sites-available/default
- remove or comment out try_files $uri $uri/ =404;
- close the editor and test your nginx config with sudo nginx -t
- if the test succeeds, restart nginx: sudo service nginx restart
That's it. Check your app again.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.