Linking CSS and images to my EJS templates on remote Express server with Node.js (Ubuntu 18.04)
Question
I have been extensively searching in here but every solution I tried kept failing, so here's my problem:
I have developed locally a basic Express server to display a static page until I finished my full integration. My site structure is :
/node_modules
/public/
css/
styles.css
images/
Logo-large.jpg
/views/
partials/
footer.ejs
header.ejs
contact.ejs
home.ejs
signup.ejs
.env
index.js
package-lock.json
package.json
Here's the result: Locally on my Mac
When deployed onto my Ubuntu sever and node started, here's the result remotely: Remotely on the server
index.js
//jshint esversion:6
require('dotenv').config();
const http = require("http");
const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");
const _ = require("lodash");
const mongoose = require("mongoose");
const app = express();
app.use(express.static(__dirname + '/public'));
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({extended: true}));
mongoose.connect("mongodb://localhost:27017/contactDB", {useNewUrlParser: true});
// <===== DECLARING DATABASE SCHEMA =====>
const contactSchema = new mongoose.Schema ({
name: String,
company: String,
phone: String,
email: String
});
// <===== DECLARING DATABASE MODEL =====>
const Contact = new mongoose.model("Contact", contactSchema);
// <===== ROUTES =====>
app.get("/", function(req, res) {
res.render("home");
});
app.get("/contact", function(req, res) {
res.render("contact");
});
app.get("/signup", function(req, res) {
res.render("signup");
});
let port = process.env.PORT;
if (port == null || port == "") {
port = 3000;
}
app.listen(port, function() {
console.log("Server started on port " + port);
});
styles.css
body {
font-family: 'Montserrat', sans-serif;
}
h1 {
margin: 50px auto 50px;
text-align: center;
color: grey;
}
h3 {
margin: 50px auto 50px;
color: grey;
text-align: center;
}
#main-logo {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
width: 20%;
display: block;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
header.ejs
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Lub + Glass Consulting by Thierry Di Lenarda</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="/css/styles.css" type="text/css">
</head>
<body>
home.ejs
<%- include('partials/header') %>
<h1>Welcome to Lub + Glass Consulting!<br>We are under construction...</h1>
<img id="main-logo" src="/images/Logo-large.jpg" alt="Logo TLGC">
<h3>Come back soon to learn more about the services I can provide.<br><br><em>Thierry Di Lenarda</em></h3>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<%- include('partials/footer') %>
footer.ejs
</body>
<footer>
</footer>
</html>
contact.ejs and signup.ejs are empty. I want this "home.ejs" page to render properly before getting started with everything else.
Can someone see if/where I did wrong? Every answer that I found in stackoverflow failed until now. Impossible to access or display anything from the 'public' folder.
Thanks for the help!
[EDIT] I have "GET 502 (Proxy Error)" for the image, and "GET net::ERR_ABORTED 502 (Proxy Error)" for the css file.
Solved by adding a "/" at the end of the ProxyPass in the Vhost thanks to here
ProxyPass http://127.0.0.1:3000/ ProxyPassReverse http://127.0.0.1:3000/
[/EDIT]
1 answers
solution1
0 2019-03-03 19:18:35
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.