I have a webpack dev configuration with my front end dev server running on 8080 and my backed server running on port 3000.
So in dev mode my webpack dev server is configured like follows :
proxy: {
'/api': 'http://localhost:3000',
}
How can I do the same thing in the prod server that serves the built static files of my front end ?
I have the following code for my prod server that serves the static files of my front end :
const proxy = require('http-proxy-middleware')
app.use(express.static(dir))
/**
* Redirect everything that starts with /api/* to the backend rest server
*/
app.use('/api', proxy({ target: backendUrl }))
app.get('*', (req, res) => {
res.sendFile(path.resolve(dir + '/index.html'))
})
This is not working as the cookies seem to be lost with the proxying (unlike with the proxying with webpack where evyrhthing works).
Am I going about this problem in the correct way ?
In this case, you can create a reverse-proxy which is going to receive all the information from the frontend, make the requests to the other address and then return the proper answer to the frontend. I used to develop a lot of these back in the days, there is a package that i created which can help you.
Basically the flow is:
Frontend -> endpoint on your render server (port 8080) -> backend (port 3000) -> render server (port 8080) -> frontend
You can try using:
A server (i.E. nginx) as a reverse proxy.
A node-http-proxy as a reverse proxy.
A vhost middleware if each domain is served from the same Express
codebase and node.js instance.
You may also want to check your cookie flags (changeOrigin, secure, cookieDomainRewrite etc..)
info: IF running http on localhost, the cookie will not be set if secure-flag is present in the response
Related
I was developping a app with React app. In developing env i was using proxy but I'm deploying the app and I saw that proxy didn't work in.
I read about http-proxy-middleware. It can be a solution or it don't works too?
Any way to do this without config the server with redirects to other port?
I need to continue fetching to my API server.
The best way what I found without configure server and NGINX is follow this steps:
Build front
Move folder into a backend server.
Put that code after routes:
if (process.env.NODE_ENV === 'production') {
app.use(express.static(`${__dirname}/yourFrontFolder/build`));
app.get('*', (req, res) => {
res.sendFile(`${__dirname}/yourFrontFolder/build/index.html`);
})
...
And build your backend code and access to your backend port like frontend.
You don't usually need a proxy in your React app when it is deployed. To deploy, you usually run npm run build, which creates a build directory containing all the compiled JavaScript and HTML files you need for the deployment. These are then served by a web server, such as NGINX or by your backend application.
I am building a simple website using npm for development, and it is hosted with a provider with php support.
The only functionality that uses php is contact form to send email. the rest is simple html and javascript.
I use a simple php server in development started with php -S localhost:8000 to test a simple php email script and again in dev I reverse proxy requests for email.php to this php server locally.
Node app is on port 3000 and php server is on port 8000. The problem is I get connection refused error with the following express server configuration when request goes through localhost:3000/email.php:
#!/usr/bin/env node
var express = require('express');
var app = express(),
request= require('request'),
port = +(process.env.PORT || 3000);
app.set('case sensitive routing', false);
app.post( '/email.php', function( req, res ){
req.pipe( request({
url: 'http://localhost:8000/email.php',
qs: req.query,
method: req.method
}, function(error){
if (error.code === 'ECONNREFUSED'){
console.error('Refused connection');
} else {
throw error;
}
})).pipe( res );
});
// other request handlers here
app.listen(port, function() {
console.log('listening');
});
Php server is definitely up and serving all the pages on port 8000, which I can browse with the browser. I test it with curl and it seems to be handling the request just fine when posted directly to localhost:8000 using curl.
Not sure why I get this error, scratching my head, can't think of any reason.
Help is much appreciated.
I figured out what it was, d'oh! Well I am gonna post the answer in case someone else stumbles upon this.
PHP is to blame it seems; Checking the sockets listening a port using ss -ltn ( I am on Linux, this might not work for you) I realised php server is listening IPv6 only. Relevant output as follows:
State Recv-Q Send-Q Local Address:Port Peer Address:Port
LISTEN 0 128 ::1:8000
With the relevant search I found the answer on web server documentation page under user notes posted by a user. See the post here. The solution is to use 127.0.0.1 rather than localhost:
As it turned out, if you started the php server with "php -S
localhost:80" the server will be started with ipv6 support only!
To access it via ipv4, you need to change the start up command like
so: "php -S 127.0.0.1:80" which starts server in ipv4 mode only.
I have a local Node.js server running on port 3000. I have another dev server for front end using webpack, running on 8080. Node is connected to MySQL server. I want to send data from my Node to front end. My project structure looks like this:-
SampleProject
-> BackEnd
-> FrontEnd
Should I use CORS node module? If not how should I send the data?
The easiest way would be to use webpack-dev-server proxy option to proxy requests from webpack-dev-server (8080) to Node (3000).
Example config:
{
devServer: {
proxy: {
'/api': {
target: 'http://127.0.0.1:3000'
}
}
}
}
I built a simple express api server on port 8080. In another port(3000) i am building the client side with react which fetch data from my express api endpoint. For this i will have to run both of these applications on separate port. How can i run both of these in same port eg. 8080?
I am pretty new at this. help would be really appreciated.
1/ If you need them to run on the same port because of CORS issues, it may be easier (and good practice) to set up CORS headers on your API server to allow requests from origin whatever:3000.
2/ To serve both the API and the static pages and scripts on the same port, you can either modify your API server to handle requests for the static content, or use a reverse proxy. I'd recommend nginx to set that up (and to serve the static content too, if you can).
Example nginx config:
location /api/ {
proxy_pass http://localhost:8080/;
}
location / {
proxy_pass http://localhost:3000/;
}
I've been working on a React boilerplate that harnesses Apollo-Client and GraphQL. My app is set up so that I have one node process running an Express server on port 3000 that actually renders the application, and another Express server on port 3001 that uses webpack-dev-middleware to package and serve my JavaScript bundle.
I was getting a 404 when trying to load my bundle using <script src="/static/js/bundle.js />, because it was trying to request the bundle at http://localhost:3000/static/js/bundle.js instead of http://localhost:3001/static/js/bundle.js, where it was actually being served by webpack-dev-middleware.
Is there a way to configure webpack-dev-middleware or my app server so that my app can access the JS bundle from /static/js/bundle.js without having to prepend the http://localhost:3001 in front of it?
You need to proxy requests from :3000/static/js/bundle.js to :3001/static/js/bundle.js, which you could do with something like this:
const request = require('request');
...
app.get('/static/js/bundle.js', (req, res) => {
req.pipe(request.get('http://localhost:3001/static/js/bundle.js')).pipe(res);
});
You have make sure that this route is only added during development.