Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ERR_ABORTED 404 (Not Found) - Doesn't support static html files #56

Open
basickarl opened this issue Mar 12, 2019 · 6 comments
Open

ERR_ABORTED 404 (Not Found) - Doesn't support static html files #56

basickarl opened this issue Mar 12, 2019 · 6 comments

Comments

@basickarl
Copy link

basickarl commented Mar 12, 2019 •
edited
Loading

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.
@basickarl basickarl changed the title ERR_ABORTED 404 (Not Found) ERR_ABORTED 404 (Not Found) - Doesn't support static html files Mar 12, 2019
@basickarl
Copy link
Author

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}`);
});

@BlakeBrown
Copy link

BlakeBrown commented Nov 2, 2019 •
edited
Loading

@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();
}

@BlakeBrown
Copy link

Were you able to get CSS working? Couldn't figure that out yet

@ghun131
Copy link

ghun131 commented Nov 6, 2019

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

@BlakeBrown
Copy link

@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

@mritzco
Copy link

mritzco commented Jan 16, 2021

Another option:

Add .browser-refresh file

{"port":"8989"}

Then fix the tag to that port:

<script src="http://localhost:8989/browser-refresh.js"></script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@mritzco @BlakeBrown @basickarl @ghun131