Giter VIP home page Giter VIP logo

Comments (24)

gjhltn avatar gjhltn commented on May 19, 2024 1

My assumption is that the puppeteer process tries to access the server before the server has properly started.

Definitely agree

subscribe to events to start puppeteer

That sounds like a much, MUCH better idea than waiting and hoping! Though I guess if there's no convenient hook, it might not be crazy to try to access the server, then if that fails, wait and retry, then wait longer and rety etc??

So many thanks again.

from react-ssr-setup.

davidwieler avatar davidwieler commented on May 19, 2024

Nevermind, closing this.

I ripped out nodemon and replaced it with forever-monitor.

The build process wasn't truly async, so nodemon was starting after puppeteer was trying to open the page in some cases.

I changed my generateStaticHTML method to this:

const generateStaticHTML = async () => {
    const forever = require('forever-monitor')
    const fs = require('fs')
    const puppeteer = require('puppeteer')

    process.env.PORT = 8505

    const headlessServer = new (forever.Monitor)(`${paths.serverBuild}/server.js`, {
        max: 3,
        silent: true,
        args: []
    })

    headlessServer.on('quit', () => {
        process.exit()
    })

    headlessServer.on('error', () => {
        process.exit(1)
    })

    await headlessServer.start()

    const browser = await puppeteer.launch()
    logMessage('Headless browser started', 'info')
    const page = await browser.newPage()

    logMessage(`Headless browser page opened to http://localhost:${process.env.PORT}`, 'info')

    await page.goto(`http://localhost:${process.env.PORT}`)
    const pageContent = await page.content()

    logMessage(`saving page content: ${pageContent}`, 'info')
    logMessage(`To: ${paths.clientBuild}/index.html`, 'info')

    fs.writeFileSync(`${paths.clientBuild}/index.html`, pageContent)

    await browser.close()

    logMessage('Closing headless browser', 'info')

    await headlessServer.stop()

}

And added: process.exit() after the done logMessage around line 85.

        await serverPromise
        await clientPromise
        await generateStaticHTML()
        logMessage('Done!', 'info')
        process.exit()

from react-ssr-setup.

luiscvalmeida avatar luiscvalmeida commented on May 19, 2024

I'm having the same issue, I guess the server isn't up when puppeteer tries to access it so it fails. Your solution didn't work for me unfortunately.

from react-ssr-setup.

manuelbieh avatar manuelbieh commented on May 19, 2024

Please check version 2.0.1. Has been merged an hour ago. This should fix it:
87748a6

from react-ssr-setup.

luiscvalmeida avatar luiscvalmeida commented on May 19, 2024

@manuelbieh nop, now I can't build at all just by cloning the repository, installing dependencies as they are and running yarn build:
Error: net::ERR_CONNECTION_REFUSED at http://localhost:8505

from react-ssr-setup.

manuelbieh avatar manuelbieh commented on May 19, 2024

Will have to investigate a bit more. I reopened the issue.

from react-ssr-setup.

luiscvalmeida avatar luiscvalmeida commented on May 19, 2024

Thanks @manuelbieh , i'll look into that as well. Also I've noticed that running the start script but with production as the NODE_ENV doesn't generate the client build.
Edit: ok I just noticed on client.prod.js webpack config it was missing the WriteFileWebpackPlugin to make this happen.

from react-ssr-setup.

manuelbieh avatar manuelbieh commented on May 19, 2024

The cause for this issue is that the server build is started in the build process to generate the static index.html but is then not properly terminated. So the Express server keeps running and, when you create another build, blocks the port.

from react-ssr-setup.

gjhltn avatar gjhltn commented on May 19, 2024

Sorry still seeing this error in 657b4e1

Steps to reproduce:

  1. clone repo
  2. yarn install
  3. yarn build

and the build fails with

Error: net::ERR_CONNECTION_REFUSED at http://localhost:8505

from react-ssr-setup.

manuelbieh avatar manuelbieh commented on May 19, 2024

Damn 😕

from react-ssr-setup.

manuelbieh avatar manuelbieh commented on May 19, 2024

Hm. Can't reproduce with a freshly cloned repo. Have you killed all possibly running node processes before pulling/cloning?

I was able to create 5 consecutive builds without any issues.

from react-ssr-setup.

gjhltn avatar gjhltn commented on May 19, 2024

doublechecking now.

from react-ssr-setup.

gjhltn avatar gjhltn commented on May 19, 2024

By restarting my machine from scratch.... it ran first time, successfully. But. immediately doing yarn build a second time errors again

~/Desktop/react-ssr-setup-master $ yarn build
[...]
[2018-11-09T15:13:09.158Z] App is running: 🌎 http://localhost:8505
✨  Done in 17.91s.
~/Desktop/react-ssr-setup-master  $ yarn build
[...]
Error: net::ERR_CONNECTION_REFUSED at http://localhost:8505

Looking at my activity monitor i can't see any node processes still running at all.

from react-ssr-setup.

gjhltn avatar gjhltn commented on May 19, 2024

(btw thank you so much - i know this must be a huge drag - i really appreciate the help)

from react-ssr-setup.

manuelbieh avatar manuelbieh commented on May 19, 2024

That's really annoying. I also had the same error for a long time and - at least on my machine - don't have it anymore after I made the change in 657b4e1. So it gets even more difficult to fix if I can't reproduce it anymore 😉

I guess you're using a Mac, right? Which MacOS version? And which Node version?

from react-ssr-setup.

gjhltn avatar gjhltn commented on May 19, 2024

That's really annoying.

Man! Im truly sorry. This is such a great project - you deserve better thanks than me whining! Sorry ☕ 🌹

osx 10.14 / node v11.0.0

fwiw doing lsof -t -i :8505 returns empty and there arent any node processes running. could it be a timing thing?

from react-ssr-setup.

manuelbieh avatar manuelbieh commented on May 19, 2024

Will have to investigate further. Thanks for reporting!

Timing, possible but not very likely. Will try to reproduce it on my Mac with Node 11 soon.

from react-ssr-setup.

gjhltn avatar gjhltn commented on May 19, 2024

Really very much appreciated. Thanks

from react-ssr-setup.

gjhltn avatar gjhltn commented on May 19, 2024

Been looking at this some more over the weekend and have made some nanoprogress :-)

If I add a simple wait in build.js, it seems to work consistently

ie


function sleep(secs) {
  Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, (secs*1000));
}

[...]

script.on('start', async () => {
        try {
            sleep(2); // <-------- BODGE
            const browser = await puppeteer.launch();
            const page = await browser.newPage();
            await page.goto(`http://localhost:${port}`);
            const pageContent = await page.content();
            fs.writeFileSync(`${paths.clientBuild}/index.html`, pageContent);
            await browser.close();
            script.emit('quit');
        } catch (err) {
            script.emit('quit');
            console.log(err);
        }
    });

from react-ssr-setup.

manuelbieh avatar manuelbieh commented on May 19, 2024

Weird 🤔 I will have a look at it! Thanks a lot!

from react-ssr-setup.

manuelbieh avatar manuelbieh commented on May 19, 2024

A colleague of mine told me the same. If that reliably solves this issue I will add it. Maybe my machine is just too fast (i7 HQ-series with 32 gigs of RAM ;)).

Could you do me one more favor and check how low you can set the delay while still being able to create 5 consecutive builds without having that error? I don't want to increase the build time unnecessarily. Thanks!

from react-ssr-setup.

gjhltn avatar gjhltn commented on May 19, 2024

It's a total bodge but ¯_(ツ)_/¯

On my feeble MacBook, I get slightly inconsistent results, so it's hard to make it more fine-grained -sleep(0.2) seems to work consistently, and sleep(0.1) fails often.

sleep(0.15) again seems to work... reliably...??? (i just ran 20 consecutive builds). But the reported build times varied between 9.34 and 11.81s so it all seems a bit concerning! :-)

from react-ssr-setup.

manuelbieh avatar manuelbieh commented on May 19, 2024

It doesn't really have anything to do with the build but with the time the (Express) server needs to start. My assumption is that the puppeteer process tries to access the server before the server has properly started. Maybe I should have a look at the Node event system and emit and subscribe to events to start puppeteer. Thanks for your help!

from react-ssr-setup.

GAjay avatar GAjay commented on May 19, 2024

Hi @manuelbieh ,

Please check this point. If I comment the line inside build-ssr.ts line number 38 my production build is running perfectly.

script.emit('quit');

from react-ssr-setup.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.