I'm having some trouble deploying a simple JavaScript/CSS/HTML app on Heroku. I'm facing issues with properly linking the JS files. The app works fine without any errors before deployment.
Here is my index.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body class="mt-0">
<button type="button" class="btn btn-primary ml-5 mt-5 position-fixed" style="right: 50px">Background mode</button>
<-- more html code -->
<script type="text/javascript" src='./js/sky-widget.js'></script>
<script type="text/javascript" src='./js/examples.js'></script>
</body>
</html>
server.js:
const express = require('express')
const app = express();
const path = require('path');
app.use(express.static(path.join(__dirname, '/pub')));
app.get('/', (req, res) => {
res.send('<h1>This should be the root route!</h1>')
})
// Error codes
app.get('/problem', (req, res) => {
res.status(500).send('There was a problem on the server')
});
const port = process.env.PORT || 5000
app.listen(port, () => {
log(`Listening on port ${port}...`)
})
package.json:
{
"name": "weather-sky",
"version": "1.0.0",
"description": "Weather widget library",
"main": "server.js",
"scripts": {
"start": "node server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
},
"license": "ISC",
"dependencies": {
"express": "^4.16.4"
}
}
I'm encountering a "Failed to load resource: the server responded with a status of 404 (Not Found)" error for both sky-widget.js and examples.js. Any assistance would be greatly appreciated.