My process for setting up the JavaScript development environment was straightforward. I followed the steps outlined in this helpful resource:
JavaScript Development Environment Setup
Below is a snippet of my HTML code:
<html>
<head>
<style>
body {
background-image: url("weather.png");
background-repeat: repeat;
}
</style>
<link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
<h1>Hi All</h1>
</body>
</html>
Despite having both image and CSS files in the same directory, neither inline nor external CSS styles seem to be working after implementing the JavaScript development environment.
Outlined below are the dependencies listed in my package.json file:
"author": "",
"license": "ISC",
"dependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.17.0",
"babel-loader": "6.2.5",
"babel-preset-env": "^1.7.0",
...
},
...
I encountered an error message that stated:
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/index.css"
Additionally, here is a glimpse into my server setup:
import express from 'express';
import path from 'path';
import open from 'open';
const port = 3000;
const app = express();
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, '../src/index.html'));
});
app.listen(port, function(err) {
if (err) {
console.log(err);
} else {
open('http://localhost:' + port);
}
});