I am new to Google App Engine and I'm trying to get the project I've been running locally hosted there.
My index.html file shows up, but it is not applying the CSS to it. I'm not exactly sure what a MIME type is, and I'm not exactly sure where in my code it's trying to get this from. I just assumed that it would just load the tag that I have in my HTML content and apply it like how it did while using browsersync. File index.html is loaded via:
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '/index.html'));
});
CSS being loaded in file index.html:
<link rel="stylesheet" type="text/css" href="style.css">
When you're returning the stylesheet from the server, you should set the content-type attribute for the header to text/css i.e. you should have something like
<link href="style.css" rel="stylesheet" />
app.get('/style', (req, res) => {
res.setHeader('Content-Type', 'text/css');
res.sendFile(path.join(__dirname, '/style.css'));
});
app.get('/', (req, res) => {
res.setHeader('Content-Type', 'text/html');
res.sendFile(path.join(__dirname, '/index.html'));
});
The issue could probably be with the CSS library starting with comments.
In development, if the style sheet is started with some comments, it could be seen as something different from CSS.
Removing the library and putting it into a vendor file, may solve the issue.
Another possibility for Node.js applications is that you should check your configuration.
Example:
app.use(express.static(__dirname + ‘/public’));
Notice that /public does not have a forward slash at the end, so you will need to include it in your href option of your HTML:
Example:
href=”/css/style.css”>
If you did include a forward slash /public/, then you can just do href=”css/style.css”>.
Be sure that the CSS name is style.css without the second "s" at the end. That could also cause the issue.