Comments (24)
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.
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.
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.
Please check version 2.0.1. Has been merged an hour ago. This should fix it:
87748a6
from react-ssr-setup.
@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.
Will have to investigate a bit more. I reopened the issue.
from react-ssr-setup.
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.
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.
Sorry still seeing this error in 657b4e1
Steps to reproduce:
- clone repo
- yarn install
- yarn build
and the build fails with
Error: net::ERR_CONNECTION_REFUSED at http://localhost:8505
from react-ssr-setup.
Damn 😕
from react-ssr-setup.
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.
doublechecking now.
from react-ssr-setup.
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.
(btw thank you so much - i know this must be a huge drag - i really appreciate the help)
from react-ssr-setup.
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.
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.
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.
Really very much appreciated. Thanks
from react-ssr-setup.
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.
Weird 🤔 I will have a look at it! Thanks a lot!
from react-ssr-setup.
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.
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.
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.
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)
- CSS will be packaged into build/server folder when run start
- Problem with rendering of Authenticated routes and Non authenticated routes HOT 1
- Why child components would be rerendered when I18n got texts by XHR ?
- Lang empty tag
- Instructions to remove Lokalise
- Detect browser language and automatic switch it HOT 1
- IE 11 does not work HOT 2
- Anyone had this working with Serverless?
- Getting data from third party API HOT 1
- How to run production build of ssr?
- Not able to access server after build HOT 1
- Async fetch on server side for a route HOT 1
- Make this app work with GitHub Codespaces
- Css is not minified HOT 1
- duplicate modules in JavaScript bundles HOT 1
- The browser side uses localStorage to obtain the user's cached data, resulting in the inconsistent rendering results between the server side and the client side for the first time. How to deal with this problem? HOT 1
- Production mode vendor CSS not generating HOT 1
- Upgrade to React 18 HOT 1
- Upgrade to webpack 5 HOT 3
- [feature]Support mocha?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-ssr-setup.