I'll lay this out below in detail:
Goal
A React front-end game that uses socket.io to transfer game state data between players on the Express server.
Setup
After finding that it would be impossible/a real work-around to have both React/Express on an Amplify instance, I decided to move to CodePipeline + CodeDeploy to Beanstalk.
I have the Source coming from GitHub, a CodeBuild step, and then CodeDeploy. The CodeBuild should basically just compile based on my buildspec.yml below:
version: 0.2
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- npm run build
artifacts:
baseDirectory: build
files:
- '**/*'
cache:
paths:
Although this is calling npm run build, which I'm not sure A) The CodeBuild/CodeDeploy will try to do with node start or B) If this will kick off my react-scripts build in package.json:
"scripts": {
"webpack": "webpack --production",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
I'm assuming I want it to build the webpack bundle in CodeBuild, then CodeDeploy will call the proper run command, but it seems black boxed? Is there another config file?
Runtime Errors
I get Connection Refused, although my server.js file defaults to localhost and 8080:
var hostname = process.env.IP || 'localhost';
var port = process.env.PORT || 8080;
Web.std.out.log:
Sep 20 18:10:10 ip-172-31-41-5 web: > MyApp#0.1.0 start /var/app/current
Sep 20 18:10:10 ip-172-31-41-5 web: > react-scripts start
Sep 20 18:10:12 ip-172-31-41-5 web: #033[34mℹ#033[39m #033[90m｢wds｣#033[39m: Project is running at http://172.31.41.5/
Sep 20 18:10:12 ip-172-31-41-5 web: #033[34mℹ#033[39m #033[90m｢wds｣#033[39m: webpack output is served from
Sep 20 18:10:12 ip-172-31-41-5 web: #033[34mℹ#033[39m #033[90m｢wds｣#033[39m: Content not from webpack is served from /var/app/current/public
Sep 20 18:10:12 ip-172-31-41-5 web: #033[34mℹ#033[39m #033[90m｢wds｣#033[39m: 404s will fallback to /
Sep 20 18:10:12 ip-172-31-41-5 web: Starting the development server...
Ngnix error.log: 2020/09/18 03:07:30 [error] 4436#0: *1 connect() failed (111: Connection refused) while connecting to upstream, client: 172.31.40.133, server: , request: "GET / HTTP/1.1", upstream: "http://127.0.0.1:8080/", host: "172.31.41.5"
Lot of moving parts so I'm sure there are several missteps here, not sure which is which.
Based on the comments.
By default EB will look for package.json to run your application. If it is missing, and will use use script option in your package.json to start your application. For example, if you start sample node.js application that EB provides, the file is:
package.json
{
"name": "Elastic-Beanstalk-Sample-App",
"version": "0.0.1",
"private": true,
"dependencies": {},
"scripts": {
"start": "node app.js"
}
}
If you don't provide package.json nor Procfile (other option, see below) EB will expect app.js or server.js to be present to start your application.
If you don't want to use package.json, you can also use Procfile to tell EB how to start your application.
When you don't provide a Procfile, Elastic Beanstalk runs npm start if you provide a package.json file. If you don't provide that either, Elastic Beanstalk looks for the file app.js or server.js, in this order, and runs it.
Example in your case could be
web: serve -s build
I use letsencrypt certificate on my server. When running my app with HTTPS=true npm start command, I have an error when browsing my app.
SecurityError: Failed to construct 'WebSocket': An insecure WebSocket
connection may not be initiated from a page loaded over HTTPS.
Here is my config:
in package.json
"start": "react-scripts start",
"prestart": "(cat /etc/letsencrypt/live/domainxxx/cert.pem /etc/letsencrypt/live/domainxxx/privkey.pem > ./node_modules/webpack-dev-server/ssl/server.pem) || :",
(running on debian 9 server)
I was trying to use google reCAPTCHA on my gatsby project.
I would like to use it on my local server without inserting my localhost domain on it.
So i added site domain name on my /etc/hosts and changed local server name using
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop -H mydomain.com -p 8000",
"format": "prettier --write src/**/*.{js,jsx}",
"start": "npm run develop",
"serve": "gatsby serve",
"test": "jest",
"deploy": "gatsby build --prefix-paths && gh-pages -d public"
},
I started the dev server using npm start and the local server was on.
You can now view xxx-xxx in the browser.
⠀
http://your-domain.com:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
http://your-domain.com:8000/___graphql
but when i go to http://your-domain.com:8000, it gives me error:
This site can’t be reached.
This is my hosts file
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
##
127.0.0.1 your-domain.com
...
When i visit localhost:8000, it works.
I am not sure why this is still on localhost other than your-domain.com.
Thanks in advance.
I am trying to create a chat app using reactJS and pusher, i am getting this error-
Could not proxy request /pusher/auth from localhost:3000 to
http://localhost:5000 (ECONNREFUSED)
in package.json file i have set proxy as-
"proxy": "http://localhost:5000"
and my localhost is defined as 127.0.0.1 in /etc/hosts file.
I have also checked for the port availability using netstat, but these all seems to be correct. Can anybody help?
I had a same problem in my React App and I fixed it by just adding "/" after the port number in package.json file (so now it's: "proxy": "http://localhost:5000/")
I faced a similar issue but in Mac machine. I changed localhost to 127.0.0.1 and that worked for me.
For windows:
"proxy": {
"/auth/google": {
"target": "localhost:5000"
}
}
For Mac:
"proxy": {
"/auth/google": {
"target": "http://127.0.0.1:5000"
}
}
In your server package.json add --ignore client to your "start" or "server" scripts. So it would look like this:
"scripts": {
"start": "node index.js",
"server": "nodemon index.js --ignore client"
}
In server directory
npm install --save http-proxy-middleware
then create a file with this name : setupProxy.js
in src directory of client react folder
then add the following
const proxy = require("http-proxy-middleware");
module.exports = function(app) {
app.use(proxy("/api/**", { // https://github.com/chimurai/http-proxy-middleware
target: "http://localhost:5000",
secure: false
}));
};
In proxy configuration make sure you are matching any path
with double ** not only *
Note: you are not going to require this proxy anywhere else
just like that
Note: remove any other proxy settings in package.json
For more check this reference
I think You have not start your Back end server. Try start both Back end and Front end server concurrently. Just simply run npm start in both back end and front end.
In your node module include
{
...
"proxy": "http://127.0.0.1:5000"
}
Where the ... simply means you should append the proxy ip to it.
Also, if you are using axios, doing axios.post('api/users') works and not axios.post('/api/users')
For those who are using Docker, if your docker-compose.yml looks like:
services:
app:
...
depends_on:
- api
ports:
- 3000:xxxx
...
api:
...
ports:
- 5000:xxxx
...
Then we should set the proxy URL to
"proxy": "http://host.docker.internal:5000"
In package.json file just add "/" after the port number and it should work fine.
"proxy": "http://localhost:5000/"
I have similar issue.
The problem was that server was listening on ipv6 ::1 address
and the proxy was connecting to ipv4 127.0.0.1
I changed both addresses from localhost to 127.0.0.1
Use
"proxy":"http://localhost:PORT_NUMBER/"
in package.json
and in axios backend call route like
use axios.get("api/user/getinfo") instead of axios.get("/api/user/getinfo");
None of these answers were helping me despite everyone's effort. Finally, thankfully, I found this github discussion where someone said use node server.js to start the server. This WORKED. Before I was using nodemon server.js and npm start. I've no idea why those commands weren't able to connect to my proxy at http://127.0.0.1:5000 but node server.js could.
Cheers
I think Server not working properly, you should run client and server concurrently for that add following procedures in package.json file
1) Install concurrently
npm install concurrently --save
2) configure client and server
"server": "nodemon server.js",
"client": "npm start --prefix client"
3) configure concurrently
"dev": "concurrently "npm run server" "npm run client""
if you are not using concurrently at your server side then simply run each front-end and back-end separately such that server side should run first and client side last.
Changing localhost to [::1] solved my problem.
Taken from here https://forum.vuejs.org/t/proxy-error-with-vue-config-js-and-axios/110632/4?u=mahmoodvcs
This has something to do with default settings of create-react-app.
I found a solution from Github Issue. Read the response by danielmahon on 15 Mar 2018
"proxy": {
"/api": {
"target": "https://localhost:5002",
"secure": false
}
},
If you can't connect to localhost on port 5000 via telnet (you can download and use PuttY if you don't have telnet installed), then that means that server isn't running.
If you're using a Windows machine, go to your package.json for the server that is running on port 5000 and change this line:
"start": "./node_modules/.bin/concurrently \"./node_modules/.bin/nodemon\" \"npm run client\"",
To this:
"start": "./node_modules/.bin/concurrently \"npm run server\" \"npm run client\"",
Watch your build messages and you should see something similar to the following:
[0] 🌎 ==> API Server now listening on PORT 5000!
[1] Starting the development server...
[1]
[1] Compiled successfully!
[1]
[1] You can now view chat app in the browser.
[1]
[1] Local: http://localhost:3000/
[1] On Your Network: http://192.168.1.118:3000/
[1]
[1] Note that the development build is not optimized.
[1] To create a production build, use yarn build.
My issue was trying to run my react project with docker containers open.
Change the ports or shut down the containers.
In my case the problem was that I have been accessing the PORT by the wrong name, i had it PORT instead of SERVER_PORT which was my correct environment variable name. So this problem means that there is a something wrong in your code, in my case the port on which the server should be running was undefined.
Proxy error: Could not proxy request /signup from localhost:3000 to http://localhost:8282/. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).
I got the same issue and I just solved it by only restart both of the server, you need to run both of the server running.
Thanks me ltr:)
If you are using axios, then follow this.
Using proxy might not work sometimes. There is a standard way to solve this issue.
For that we need to configure our axios before sending requests. axios has a method to set the baseURL create() Create a new file http.js in your src folder.
import axios from 'axios'
const http = axios.create({
baseURL: "http://localhost:5000"
headers: {
Accept: "application/json",
"Content-Type": "application/json"
}
})
export default http
Now insted of using using axios for sending request, use this
import axios from "../../http";
happy coding!
In my case, I changed port number from 5000 to 7000, while reactjs was still fetching on localhost 5000, after I changed everything worked perfect
ReactJs FETCH HOOK:
const { data, loading, error } = useFetch(
"http://localhost:7000/api/hotels/countByCity?cities=Arusha,Dodoma,Mwanza,Dar-es-salaam"
);
NodeJS server port:
const PORT = process.env.PORT || 7000;
I recently got this error when waiting for a response from my rest API function which does not return any.
so you either need to change the API implementation and send something back to the client or just don't wait for a response if you are not returning any.
I have installed webpack-dev-server on a Digital Ocean droplet. On starting the service, it says,
http://localhost:8080/
webpack result is served from /
content is served from
But when I access the IP address of the droplet with port 8080 in the browser, it shows connection refused error.
On running a node server, I am able to access it through the IP address
You cannot access a server local from outside the droplet if it is running at port 8080. If you want to get it public, try to run the server at port 80, that is the default public port.
You can configure apache or other HTTP server if you want more features or configs.
As #netoguimaraes suggested, I could not get it running through port 8080. I restarted the webpack-dev-server using port 80 and it worked.
webpack-dev-server --hot --inline --host 0.0.0.0 --port 80