I have been developing a nodejs express application that serves ejs pages locally. I have included css for this ejs and I currently have the follow project structure
mywebsite
dashboard
public
css
home.css
js
home.js
views
landing-page.ejs
login.ejs
server.js
I have the following code for my app inside of server.js:
// Libraries
const express = require('express');
const passport = require('passport');
const Strategy = require('passport-local').Strategy;
const path = require('path');
const http = require('http');
// Server settings
const hostname = 'localhost';
const port = 3000;
passport.use(new Strategy(
function(username, password, cb) {
// find a user here, if error return cb(err)
// if !user then return cb(null, false)
// if password is wrong then return cb(null, false)
// if user is found and password is correct, return cb (null, user)
}
));
passport.serializeUser(function(user, cb) {
cb(null, user.id);
});
passport.deserializeUser(function(id, db) {
// find user by id, call back cb(null, user)
});
var app = express();
// Configure view engine to render EJS templates.
app.set('views', __dirname + '/views');
app.use(express.static(__dirname + '/public'));
app.set('view engine', 'ejs');
// Use application-level middleware for common functionality, including
// logging, parsing, and session handling.
app.use(require('morgan')('combined'));
app.use(require('body-parser').urlencoded({ extended: true }));
app.use(require('body-parser').json({ type: '*/*'}));
app.use(require('express-session')({ secret: 'keyboard cat', resave: false, saveUninitialized: false }));
// Initialize Passport and restore authentication state, if any, from the session
app.use(passport.initialize());
app.use(passport.session());
app.get('/', function(req, res) {
res.render('landing-page.ejs')
});
app.get('/login', function(req, res) {
res.render('login.ejs')
})
var httpServer = http.createServer(app);
httpServer.listen(3000);
when I run this and navigate to localhost:3000 I can view my landing-page.ejs fine, and all the css loads properly. landing-page.ejs does so with the following reference:
<link rel="stylesheet" type="text/css" href="assets/css/home.css">
This has been all fine and great for developing. I am now trying to push this to a DigitalOcean droplet to run the express server all of the time. I followed the steps to create an account and ssh in, I'm using the nodejs user account and not the root user to ssh in. Because of this I constantly have to use "sudo" befor any commands and type in the sudo password. This includes if I'm just trying to use vim to edit a file, it won't let me save it unless I started with sudo vim. The DigitalOcean droplet example file was stored in /var/www/html/index.js, and so I sudo git cloned my repository into the /var/www as well. so it's now in /var/www/REPONAME. I will cd into this project directly and then run sudo node src/dashboard/server.js to start it up as a test. When I navigate to my domain it DOES server me the landing-page.ejs file, I can see all of the content on there, but the css file is not getting loaded with it. All of the page contents are ugly and strewn about on the page. If I change the file name for my css on local host (forcing localhost to not be able to find the css file anymore) then the page looks the same, so I can tell that on production it's just having a problem FINDING the file.
If I go to web inspector on local host vs on the production page, the sources by path layout looks exactly the same, except for the webpage name for root of course. When I go to my css folder on production though everything says error 404, an error occurred while trying to load the resource. Which makes since, the page cannot find the file and that's why ejs isn't properly loading it.
I'm assuming this might have to do with my DigitalOcean configuration? why would it work fine locally but then break on the server? I am running sudo when launching the node application, is it possible that there's a folder permission issue?
Thanks in advance for any advice.