Menu
I've been researching over this issue for the past month and I am not finding any useful solutions. I am currently trying to host a website using the firebase functions, along with express.js and the EJS view engine.
I'm going into the issue of serving static CSS files into the EJS files. I've looked all over but can't seem to find any proper answer that helps.
I have the following file structure (inside the functions folder):
Here's my index.js:
const functions = require('firebase-functions');
const express = require("express");
const ejs = require("ejs");
var path = require('path');
// // Create and Deploy Your First Cloud Functions
// // https://firebase.google.com/docs/functions/write-firebase-functions
//
// exports.helloWorld = functions.https.onRequest((request, response) => {
// response.send("Hello from Firebase!");
// });
var app = express();
app.set('view engine', 'ejs');
// app.use('/static', express.static('public'));
app.use(express.static(__dirname + "/public"));
app.get("/", (request, response) => {
response.render("test");
})
// app.listen(5000, () => {
// console.log("Active app on port 5000");
// });
exports.webApp = functions.https.onRequest(app);The page it is rendering (test.ejs):
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body></body>
</html>And finally, the style.css file:
html {
background-color: black;
}(The style.css is done like that along with the test.ejs only for testing as I was having a big issue with all of this)
I tried most of the solutions online, however all of them only work while running the express.js app locally and not through the firebase serve or deploy commands. I am totally lost in regards to this and any help is appreciated.
826
The TL;DR of the issue:
In normal NodeJS & Express hosting one needs to specify the directory of your static content. Since firebase hosting does this static content hosting for you (where the /public directory is hosted at your domain root),
Solution: you can do the following:
app.use(express.static(__dirname + "/public")); (as this removes the duplicate hosting attempt that firebase hosting is doing for you)/public portion,For example
from this:
link(rel="stylesheet", href="/public/styles/my-styles.css")
to this:
link(rel="stylesheet", href="/styles/my-styles.css")
You can test this:
Host your app with the original (faulty/incorrect static resource links), then browse to the static resource link - you should get a 404 or failure to load resource atleast.
Using the same "faulty" link, omit the ".../public..." portion of the url, your static content will render correctly.
This means firebase hosting is hosting all the content of the /public directory to the root of your domain.
Next, make the change by removing the static directory app.use() function and remove all traces of /public in your static content links (as shown above).
Browse to your page (that includes the altered static routes), your page will load correctly with all your styles, scripts, etc (assuming you don't have any faulty code ;) )
52
The Problem is because of the Google Cloud Plan.
In the beginning, all firebase users go with the Spark plan, which is completely free. In recently, Google Cloud may have blocked some features that we used free a year ago.
So, You need to go to Google Cloud console, then change the plan of your project you want to deploy. Then if you didn't register your payment card, you should do that for the firebase hosting or firebase functions feature.
A few minutes later, it loads all necessary files, such as a styling CSS, JS files that were missing when loading your deployed website.
Then enjoy your deployed website. ;)
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
