browser-refresh
browser-refresh copied to clipboard
patrick-steele-idem
ERR_ABORTED 404 (Not Found) - Doesn't support static html files
I get the following error in the client side console:
2127.0.0.1/:25 GET http://127.0.0.1:4000/%7Bprocess.env.BROWSER_REFRESH_URL%7D net::ERR_ABORTED 404 (Not Found)
client/index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="static/style.css">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="chart" width="400" height="400"></canvas>
<script src="static/client.js"></script>
<script src="{process.env.BROWSER_REFRESH_URL}"></script>
</body>
</html>
server.js:
const express = require('express');
const app = express();
const port = 4000;
app.use('/static', express.static(__dirname + '/client'));
app.get('/', function (req, res) {
res.sendfile('client/index.html');
})
app.listen(port, () => {
console.log(`Listening on port ${port}`);
if (process.send) {
process.send('online');
}
});
As you can see, I don't have a templating engine. I think you should make it clear that it only supports using with templating and not with static html files.
Perhaps you could manually allocate the port which browser refresh uses, then just hardcode it in?
So you set a port field in the process.send, which then sets the browser-refresh server up which serves the browser-refresh.js file, then as I stated before, just hardcode <script src="http://127.0.0.1:4001/browser-refresh.js"></script> in the html file. This should make it work for static html files.
Hack for static files:
const fs = require('fs');
const express = require('express');
const app = express();
const port = 4000;
process.send({ event: 'online' });
app.use('/static', express.static(__dirname + '/client'));
app.get('/', function (req, res) {
const file = fs.readFileSync('client/index.html', 'utf8');
const newFile = file.replace('"{process.env.BROWSER_REFRESH_URL}"', process.env.BROWSER_REFRESH_URL);
res.send(newFile);
})
app.listen(port, () => {
console.log(`Listening on port ${port}`);
});
@basickarl a slightly better hack so you don't need to inject an extra script tag in your HTML :)
app.get('/', function(req,res) {
res.send(browserRefresh('index.html'));
});
function browserRefresh(filePath) {
var html = fs.readFileSync(filePath);
var $ = cheerio.load(html);
$('body').append(`<script src="${process.env.BROWSER_REFRESH_URL}"></script>`);
return $.html();
}
Thank you guys @BlakeBrown and @basickarl ! The error went away when I tried you solution. But I expected my page to refresh but nothing happens. Is it like nodemon which refresh after you press combination Ctrl + S
@ghun131
Yes it refreshes after you press Ctrl + S. One way to check if this is working, start by doing console.log(process.env.BROWSER_REFRESH_URL) inside of node and make sure the url exists. Then, inspect element in the browser, check that <script src="${process.env.BROWSER_REFRESH_URL}"></script> was actually injected into your HTML
As long as the script exists and you have the required
app.listen(port, function() {
console.log('Listening on port %d', port);
if (process.send) {
process.send('online');
}
});
then your browser should refresh when you save
Another option:
Add .browser-refresh file
{"port":"8989"}
Then fix the tag to that port:
<script src="http://localhost:8989/browser-refresh.js"></script>
