i got a problem with proxy in react, I added this in package.json
"options": {
"allowedHosts": [
"localhost",
".localhost"
],
"proxy": "http://localhost:5001/api"
}
my React app is running on "localhost:3000" and my node API on "localhost:5001"
when i'm trying to fetch data from the API axios.get("/");
its going to this url "localhost:3000/" not "localhost:5001/api/"
Related
im hosting my react app to hostinger single host and my nodejs app to hostinger vps so my react app work normally in localhost but after build and host it cannot get any data from node server.
this is how i link with proxy:
{ "homepage": "https://cubexpro.net/", "version": "0.1.0", }, "devDependencies": { "#iconify/react": "^4.0.0", "node-sass": "^7.0.3" }, "proxy": "http://45.132.240.106" }
im trying to add port to the link but nothing is working
Proxy error: Could not proxy request /api/v1/products from
localhost:3000 to http://192.168.137.1:4000.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ETIMEDOUT).
this error keep on coming.
Frontend -> React
Backend-> Express, nodejs
I faced a similar issue but in the 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"
}
}
I just changed "proxy": "http://192.168.137.1:4000" to "proxy": "127.0.0.1:4000" and this worked for me now...
This is done on windows
I guess it's a very basic question, but it still confuses me. At development stage, when launching react with 'npm start' I'm using port 3000. In addition when launching strapi (which is a backend cms), it automatically uses port 1337.
Does it actually mean that my app is using two different ports?
I'm asking this because I would like to configure nginx so that I can run two different strapi apps (attached to two different react apps) - on the same server.
I want nginx to redirect from a specific location to the second website. I could write inside the sites-available file:
server {
listen 80;
location / {
proxy_pass "http://mysite:3000";
}
location /mysecondsite {
rewrite ^/mysecondsite(.*) $1 break;
proxy pass "http://mysite:??????? WHAT SHOULD I WRITE HERE?"
}
}
But where should I redirect users entering the secondsite url, to what port?
In strapi documentation, they point to a file called server.json where you can change the port that strapi uses, and also create a proxy (which I don't understand why you would want to do if you can just redirect from nginx?), for example:
{
"host": "localhost",
"port": 1337,
"proxy": {
"enabled": true,
"ssl": true,
"host": "example.com",
"port": 8443
},
"autoReload": {
"enabled": true
},
"cron": {
"enabled": true
}
}
But changing the port of the second project will affect only the strapi backend, won't it?
How can I create a different port for the front end of the second project?
I'm sorry if I misunderstand the terms here
Thanks in advance
Update 2019-06-29: (one application - frontend & strapi)
I come back because I discover that somebody resolve your case and deploy one application with strapi.
How to integrate Strapi API and Admin Panel with another node app (that consumes Strapi API)?
So you will have to build you website app. And push the build in the ./public folder of the Strapi application.
Then in your api/.../config/routes.json files you will have to add an option prefix in the config key of each of your routes and for all your APIs
{
"routes": [
{
"method": "POST",
"path": "/restaurants",
"handler": "Restaurant.create",
"config": {
"policies": [],
"prefix": "/api"
}
}
]
}
So at the end you will have your admin on /admin
Your APIs endpoints prefixed by /api
And your website/assets on /
And you don't must configure nginx for your second application becaouse is only one.
2019-06-11: (two separate application)
You want to has main react application on port 3000 and cms for backend api on 1337 where be used by main react application? You can use configuration like in bellow.
nginx.conf
server {
listen 80;
server_name mywebsite.pl www.mywebsite.pl;
location / {
proxy_pass http://mysite:3000/;
}
location /admin/
{
proxy_pass http://mysite:1337/admin/;
}
location /strapi/
{
proxy_pass http://mysite:1337/;
}
}
server.json
{
"host": "localhost",
"port": 1337,
"proxy": {
"enabled": false
},
"autoReload": {
"enabled": true
},
"cron": {
"enabled": false
},
"admin": {
"path": "/admin",
"build": {
"host": "/admin",
"backend": "http://mywebsite/strapi",
"plugins": {
"source": "backend",
"folder": "/strapi"
}
}
}
}
Remember:
⚠️ If you changed the path to access to the administration, the step #2 is required
-> You must resetup admin to install the dependencies and build the project
Change on the production environment NODE_ENV flag to production.
Run the server with the production settings.
Resource:
Deploy the administration panel on another server then API
Deployment
I work on a project as a fullstack developer on using reactjs & express.
My express server is on server folder, and reactjs client is on server/client.
I set the following proxy at my package.json at my server/client folder which includes ReactJS (create-react-app based). :
"private": true,
"proxy": {
"auth/google": {
"target": "http://localhost:5000"
},
"/api/*": {
"target": "http://localhost:5000"
},
"/apis/*": {
"target": "http://localhost:5000"
}
},
"dependencies": {
When I connect to interent at the university campus I get the following error
but when I connect to internet outside campus no error happens. How can I avoid that from happening?
I really appreciate your help guys. I found that the issue is not related to university network restrictions. I found the main problem, is that express server is not working on the university network, so
npm run server which is "server": "nodemon index.js",
cause an error:
and that what searching for its solution now. You may help me on finding that even by linking to other posts resources.
I have a simple web app built using the angular CLI. I want it to communicate with a backend using web sockets. I have the backend already written and have tested with a simple index.html page that the server can send and receive on sockets.
In my angular-cli project I have setup a proxy config file to setup a proxy to the backend.
proxy.conf.json
{
"/sock": {
"target": "http://localhost:3000",
"changeOrigin": true,
"ws": true,
"logLevel": "debug"
}
}
Then start the server with the following.
ng serve --proxy-config proxy.conf.json
For now I have a service that simply attempts to open a socket and send a fixed string which I'm expecting to see logged by the backend.
import { Injectable } from '#angular/core';
import * as io from 'socket.io-client';
#Injectable()
export class ChatService {
private socket: any;
constructor() {
this.socket = io({ 'path': '/sock' });
this.socket.emit('chat message', 'Hello World from browser!');
}
}
Note: I've had several go's at this with and without the /sock part of the url.
I start both servers. Get no console errors in the browser. But in the angular CLI web pack server I get the following messages.
10% building modules 2/2 modules 0 active[HPM] Proxy created: /sock -> http://localhost:3000
[HPM] Subscribed to http-proxy events: [ 'error', 'close' ]
[HPM] GET /sockjs-node/530/z1z3teld/websocket -> http://localhost:3000
[HPM] Upgrading to WebSocket
[HPM] Error occurred while trying to proxy request /sockjs-node/530/z1z3teld/websocket from localhost:4200 to http://localhost:3000 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)
Are web sockets supported or have I made a silly mistake?
Thanks
I managed to figure it out with a bit of trial and error. I looked at the console for the basic index.html page that works within the backend project. This backend project is basically the chat server demo application on the socket.io website. I noticed that when it opens up the web socket the url looks like the following:
http://localhost:3000/socket.io/EIO=3&transport=websocket&sid=wTvdQTclHXJSUmAmAAAA
So back in the angular CLI project I modified my proxy config to include the /socket.io/ part plus also added a wildcard.
{
"/sock/*": {
"target": "http://localhost:3000/socket.io/",
"ws": true,
"logLevel": "debug"
}
}
Bingo! Now when the service is constructed it opens the socket and emits a message which I can see logged in the backend.