Node.js app works properly locally, but 404 errors on Droplet Ubuntu

Using digital ocean droplet, Ubuntu terminal. I have run npm run build, npm install. I am using Vue.js and have installed the ‘quick start’ project from their documentation: https://vuejs.org/guide/quick-start.html#without-build-tools

Called using node app.js ->

    var express = require('express')
    var bodyParser = require('body-parser')
    const path = __dirname + '/dist/';
    var app = express();
    var port = 3000;
    
    var fs = require('fs');
    var files = fs.readdirSync(path+"/assets/");
    console.log(typeof files);
    console.log(JSON.stringify(files));
    
    app.use(bodyParser.urlencoded({ extended: true }));
    app.use(bodyParser.json());
    app.use(express.static(path));
    
    
    app.get("/",function(req,res) {
        console.log("Request for /home")
        res.sendFile(path+"index.html");
    });
    
    //Using files variable made at the top to get Vue build files directory
    for (var i=0;i<files.length;i++) {
        app.get(files[i],function(req,res) {
            console.log("Request for an asset")
            res.sendFile(path+"/assets/"+files[i]);
        });
    }
    
    app.listen(port,function() {
        console.log("Server started on port:"+port);
    });

index.html (Gets loaded on Droplet and locally correctly)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <script type="module" crossorigin src="/assets/index.8ad48088.js"></script>
    <link rel="modulepreload" href="/assets/vendor.5c83c58f.js">
    <link rel="stylesheet" href="/assets/index.f3fa6de6.css">
  </head>
  <body>
    <div id="app"></div>
    
  </body>
</html>

Locally, site works. Then, on droplet when visiting site:
404 errors

Edit: I have also tried using root user instead of nodejs user (nodejs user is recommended by digital ocean for launching pm2) to see if it may be a permission problem. I am fairly new to Ubuntu, let alone the terminal

SOLUTION: nginx needed correct directory for my website assets to be allowed to serve them. Edited under /etc/nginx/sites-available, then nano default. From there edited under server object:

server_name hellonode;

    location ^~ /ResposDevelopment/NodeJS Server/Respos Vue/dist/ {
            gzip_static on;
            expires 12h;
            add_header Cache-Control public;

~ = /var/www/html
-Changed location from ~/assets/ to above solved my problem.

Contents hide

Answers:

Method 1

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

SOLUTION: nginx needed correct directory for my website assets to be allowed to serve them. Edited under /etc/nginx/sites-available, then nano default. From there edited under server object:

server_name hellonode;

location ^~ /ResposDevelopment/NodeJS Server/Respos Vue/dist/ {
        gzip_static on;
        expires 12h;
        add_header Cache-Control public;

~ = /var/www/html -Changed location from ~/assets/ to above solved my problem.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating