1

So, this is a strange one. I am running a Nodejs application using Express and Pug. I have all my static files in a Public folder and my Pug files in the Views folder. I set up the app.js file to grab all the static files from the Public folder. I am using Nginx to handle the server.

Here is the weird part, when i run it on a Ubuntu instance using AWS I get a 404 on all of my js and css files. When i run it on my local computer I get 304 errors, but everything loads and works.

Any ideas what I did wrong? I will Show some of my code beneath.

Pug File

  doctype html
    html
      head
        meta(charset='utf-8')
        title Signature Pad
        meta(name='description', content='Signature Pad - HTML5 canvas based smooth signature drawing using variable width spline interpolation.')
        meta(name='viewport', content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no')
        meta(name='apple-mobile-web-app-capable', content='yes')
        meta(name='apple-mobile-web-app-status-bar-style', content='black')
        link(rel='stylesheet', href='stylesheets/signature-pad.css')
      #signature-pad.signature-pad
        .signature-pad--body
          canvas
        .signature-pad--footer
          div
            .description Sign Above
            .signature-pad--actions
              div
                button.button.clear(type='button', data-action='clear') Clear
                button.button(type='button', data-action='undo') Undo
              div
                form(action='', method='POST', onsubmit='completeAndRedirect();return false;')
                  label(for='fname') First name:
                  input#firstName(type='text', name='fname')
                  label(for='lname')          Last name:
                  input#lastName(type='text', name='lname')
                  br
                  br
                  label(for='company') Company:
                  input#company(type='text', name='company')
                  br
                  br
                  input.button.save(type='submit', value='Submit', data-action='save-svg')
      script(src='js/signature_pad.umd.js')
      script(src='js/app.js')

App.js file

const express = require('express');
const path = require('path');
const NetSuiteOauth = require('netsuite-tba-oauth');
const bodyParser = require('body-parser');

const app = express();

//Parse incoming request
app.use(bodyParser.json());
//app.use(bodyParser.urlencoded({ extended: false }));

//View engine
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

//Static Files
app.use(express.static(__dirname + '/Public'));

app.get('/', (req, res, next)=> {
    return res.render('landing', {title: 'Home'})
});

app.get('/customer', (req, res, next)=> {
    return res.render('signature', {title: 'Customer'})
});

app.get('/employee', (req, res, next)=> {
    return res.render('signature', {title: 'Employee'})
});

app.post('/customer', (req, res, next)=>{    
    return res.render('entered', {title: 'Home'})
});

app.post('/employee', (req, res, next)=>{    
       return res.render('entered', {title: 'Home'})
});

app.listen(8080);

Folder Structure

Image of File Structure

Please let me know if I am not clear, first time posing on Stack

Alexander Ditto
  • 11
  • 1

1 Answers1

0

On nginx in your production server, you need to modify the sites_available file, to point to your static folder as default.

server {
root /www/data;

location / {
}
.....
}

please check attached link for serving static folder static nginx

Vijay122
  • 884
  • 8
  • 12