yarn run deploy fetchError

[postlight]

yarn run deploy fetchError

[brightonmike]

Not config.js - this I left as 8080. I changed to port in Dockerfile (the expose line), package.json line 12, and server.js line 37.

Do give this a try, it might just fix it for you. I also forked the repo and added Sass/webpack into the React frontend if you're interested - just go to my github.

[alexmanno]

I never heard mamp before, but I think it isn't the problem...
I'm working on a totally refactor of docker containerization of this project if @ginatrapani is agreed. Then I'll make tests on several machines (including Mac of course)

[TylerBarnes]

Ok, actually the only step needed was to host the wordpress install on an actual server that isn't localhost, update config.js, and run yarn run deploy. It's working with the main repo.

[alexmanno]

Are you using Mac or Linux?

[TylerBarnes]

I'm using Mac. I spent some time trying to figure out why the connection is refused but I wasn't even able to figure out how to debug this. Any ideas or suggestions on what I could google?

[alexmanno]

Try changing line 11 on /package.json:

headless-wp-starter/package.json

Line 11 in d61eb25

"start": "wp server"

With: "start": "wp server --host=0.0.0.0"

When you specify --host=0.0.0.0 (instead of default 127.0.0.1) server listen on every available network interface.

[TylerBarnes]

I'm still getting the same issue. After making this change if I visit either http://localhost:8080/wp-json/ or http://0.0.0.0:8080/wp-json/ I get the expected json displayed in the page. When I do yarn run deploy I get the same issue though.

http://localhost:3000/ displays 500 | internal server error

$ yarn run docker:build && yarn run docker:clean && yarn run docker:run
Sending build context to Docker daemon  217.1kB
Step 1/9 : FROM node:7
 ---> d9aed20b68a4
Step 2/9 : RUN mkdir -p /usr/src/app
 ---> Using cache
 ---> 86870cc703fe
Step 3/9 : WORKDIR /usr/src/app
 ---> Using cache
 ---> ea296e11d4b0
Step 4/9 : COPY package.json /usr/src/app/
 ---> Using cache
 ---> ae20730982a7
Step 5/9 : RUN npm install
 ---> Using cache
 ---> b3891326d6d3
Step 6/9 : COPY . /usr/src/app
 ---> Using cache
 ---> 75e630cd4635
Step 7/9 : RUN npm run build
 ---> Using cache
 ---> 2aff9b0ca89d
Step 8/9 : EXPOSE 3000
 ---> Using cache
 ---> ec494a589f3a
Step 9/9 : CMD npm start
 ---> Using cache
 ---> d5b76ce30772
Successfully built d5b76ce30772
Successfully tagged frontend:latest
frontend
npm info it worked if it ends with ok
npm info using [email protected]
npm info using [email protected]
npm info lifecycle [email protected]~prestart: [email protected]
npm info lifecycle [email protected]~start: [email protected]

> [email protected] start /usr/src/app
> next start

> Ready on http://localhost:3000
{ FetchError: request to http://localhost:8080/wp-json/postlight/v1/page?slug=welcome failed, reason: connect ECONNREFUSED 127.0.0.1:8080
    at ClientRequest.<anonymous> (/usr/src/app/node_modules/node-fetch/index.js:133:11)
    at emitOne (events.js:96:13)
    at ClientRequest.emit (events.js:191:7)
    at Socket.socketErrorListener (_http_client.js:358:9)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:191:7)
    at emitErrorNT (net.js:1279:8)
    at _combinedTickCallback (internal/process/next_tick.js:80:11)
    at process._tickCallback (internal/process/next_tick.js:104:9)
  name: 'FetchError',
  message: 'request to http://localhost:8080/wp-json/postlight/v1/page?slug=welcome failed, reason: connect ECONNREFUSED 127.0.0.1:8080',
  type: 'system',
  errno: 'ECONNREFUSED',
  code: 'ECONNREFUSED' }```

[alexmanno]

Are you totally sure you have properly run yarn start before yarn deploy?

[TylerBarnes]

I'm totally sure. I think I wouldn't get a json response at http://localhost:8080/wp-json/ and http://0.0.0.0:8080/wp-json/ if I hadn't. I double checked again and reread the readme just in case and I also tried deleting the whole folder and starting from the beginning with the same result.

[TylerBarnes]

Could it be something to do with my docker install? If i have docker running and I try yarn run start instead in the frontend dir, I also get a 500 error. As soon as I quit docker I can see the page at http://localhost:3000/. It would be nice to be able to deploy this too though!

[alexmanno]

Ok. Try this:

On a terminal window type ifconfig | grep 'inet ' and get your local ip address, then edit:

headless-wp-starter/frontend/config.js

Line 1 in d61eb25

export const Config = {apiUrl: 'http://localhost:8080'}

With your local ip address, like that export const Config = {apiUrl: 'http://YOUR-IP:8080'}

[alexmanno]

Then if you restart yarn deploy you should have an up and running container with frontend

[TylerBarnes]

I get the same error as before but instead of ECONNREFUSED 127.0.0.1:8080 I get ECONNREFUSED MY_IP_ADDRESS:8080

I also have mamp Pro installed on this machine, I wonder if mamp changed my osx configuration somehow? I don't have mamp open while this is running though. Maybe I'll try the computer at work on monday and see if I can get it running there.

[TylerBarnes]

Awesome! I've been looking for something like this project for a while now. Can't wait to try it out on a project.

[brightonmike]

Same problem! I'd absolutely love this to be fixed. I really want to experiment with React/WP.

[brightonmike]

Changing port to 3030 solved the problem for me. I've a sneaky suspicion it's connected to SSL.

[TylerBarnes]

@brightonmike did you change it in config.js? I tried changing the port there with no luck. Glad to hear it's working for you though!

[TylerBarnes]

The addition of Sass/webpack is awesome! The port change gets it closer to working for me. when I run yarn run deploy the docker container builds with no errors and the wp install on port 8080 shows a json response. It was giving me a 500 error before. When I go to http://localhost:3000/ now though I get "This site can't be reached". I wish I could debug this and contribute. As a shot in the dark I tried a different port but it didn't help. Any ideas?

[alexmanno]

IMHO we should split HTTP requests made by node server side with those made by client-side react instead of having a single fetch function

[TylerBarnes]

After some investigating, trial and error, and learning about docker I got this working. The setup might be obvious to someone who knows more about docker, but I'm new to it.

Even after using @brightonmike 's fork with the switch to port 3030, the container log was saying it was ready on http://localhost:3000. So I ran curl localhost:3000 from a shell within the frontend container. That came back with ECONNREFUSED. I figured the issue then is the docker container can't connect to the localhost wordpress install on my computer. Of course if I'm actually deploying this it's not going to need to connect to my computer. It will connect to a wordpress install on a server somewhere.
I installed the wordpress instance on my host and updated the config.js with the url of the install.
then I changed the docker run script to "docker:run": "docker run -p 127.0.0.1:3030:3000 --name frontend frontend" to map my localhost:3030 to port 3000 inside the container. It's working now!

I guess my next step is learning how to host this docker container somewhere and point a domain to that port. Thanks for the help :)

[ginatrapani]

@Tyler-Barnes glad to hear that! Tho I still want to get Docker talking to localhost successfully!

@brightonmike if you don't mind I would like to merge back your Sass/webpack work, I will go ahead and do that now.

[ginatrapani]

Took some time to look into this more deeply, and I see that the server-side fetch calls aren't resolving localhost, because localhost refers to the container's host, not the container itself. Earlier in the history of this repo, the Docker container worked because the fetch calls were happening client-side -- and the browser knows how to resolve localhost -- but the shift to getInitialProps put those server-side and generate the 500s.

So what I'm going to do is make a note in the README that for the Docker container to work, you must change the config to point to a publicly-accessible domain or IP on the internet, as @Tyler-Barnes did.

@Tyler-Barnes if you're looking for really simple hosting, check out https://zeit.co/now - you don't even have to use the Docker container there. For more advanced hosting, I'd recommend Amazon Web Services Elastic Beanstalk, or Google Cloud Platform's Kubernetes Engine. If it would be helpful I could write up some docs/put together a sample code for those environments.

[TylerBarnes]

Awesome, thanks for the explanation and hosting link @ginatrapani !
For myself I'm sure I'll be using the simplest option initially, I could see docs/sample code for different environments being helpful though.

[quantafire]

@ginatrapani I've spent about a week trying to understand Docker and AWS EB and I'd LOVE if you could come up with some docs to deploy to these environments as I'm having trouble deploying exactly as is from the repo.

[ginatrapani]

I'm sorry I'm not able to put together these docs these days (I'm not doing as much hands-on engineering any more) but let's file an issue and see if someone who's done this is game!