Previous I had my server running on port 5000 and my react app running on port 3000. I would access it through port 3000 and it would do API calls to port 5000.
I have now added this so that the server will serve the react build:
But the issue I have now, is that all my routers on the app don't work. When I go to http://localhost:5000/ my homepage shows up fine, but if I go to http://localhost:5000/1 or whatever, it says it cannot get those pages.
What's meant to happen is that my router here kicks in and loads the correct components:
I'm new to the MERN stack and this is my first time trying to have the server send the build files. What should I search to solve this? How can I fix this? My guess is that I have to rewrite the app.get to send the correct files, but my build only has one file so IDK what to do. I'd rather not have to rewrite my whole server.
You have no .htaccess and no nginx and any other URL redirector here. You can handle it with express:
app.get('*', (req,res) =>{
res.sendFile(path.join(__dirname+'../poll/build/index.html'));
});
After your express routes.
React route do routing on browser. but in here routing is done in server side.
you should always return index.html in react application no mater which url you request.
if you want to work with both server side routing and browser routing, you may use HashRouting in react
https://reacttraining.com/react-router/web/api/HashRouter
Related
I have an Express.js app running on a server. On this same server I'd like to setup a MITM proxy that sends all https requests to my Express.js app. The Express.js app is publicly available via https using NGINX reverse proxy. So directing traffic via localhost or via public https url is fine.
This Express.js app just returns a single html file, so I'd also be okay if the MITM proxy didn't need Express at all and just returned the html file.
I was hoping to use the following package since I'm familiar with Node.js, but I'm not sure how to achieve the desired result. https://github.com/joeferner/node-http-mitm-proxy
I'm also open to other solutions if applicable. Thanks!
For this example below, let's just assume my Express.js app returns a simple 'hello world' message.
Example:
Set proxy for application to myserver.com:5555
In application, make request to https://google.com
Proxy server either re-routes traffic to Express.js or returns 'hello world'
Application sees url as https://google.com but sees response of 'hello world'
I understand that the certificates will not match but I can ignore that in my application.
I am using node.js and express to render some pages like home pages and some other SEO routes.
For a specific route I want to serve a react SPA which I host on a CDN.
on that page I load the main.js from the cdn, but it is trying to load the rest of the assets from the node server, not the CDN.
One solution is to serve the SPA from node, but I know serving assets from node on production is not the best practice.
So how do I render some routes locally with node, and proxy another to a SPA application?
Do I need a third server for reverse proxy?
Thank you!
I have a godaddy domain being redirected to an instance of EC2 with an elastic IP. on instance there runs my NodeJS on port 5000. i m redirecting 80 to 5000( till here everything works fine). In express i have a route say '/Calculate/:Type', which is visited when some caculate button is pressed. ideally the when button is pressed a request to server should go like http://example.com/calculate/3 but here is goes http://example.com//calculate/3 an extra / before caculate ruins the entire route. can someone please tell me why is it happening?
Modify the route where you define the findone query and remove the forward slash from it.
Try adding a period in front of /Calculate/:Type so
'./Calculate/:Type' in your express route
Ahh so it seems like you may be hitting a CORS error. Is your webserver and dataserver on the same url?
Best option : Put the node instance serving your app on yourdomain.com, and make your api endpoint api.yourdomain.com/Calculate/:Type
Other Option: exposing yourself to security risks by adding a 'Access-Control-Allow-Origin = *' in the header of your response
Other Option: expose yourself to security change your settings in htaccess to allow all, or the specific domain
Could anyone explain why when I click on a link my angular views get shown fine but when I type in an address into the address bar in the browser (which is the same as where the links that work point to) such as localhost:8080/login I get a Cannot GET /login message.
My routes are set up in Angular and I'm using Node and Express 3 on the back-end.
What silly mistake am I making?
Most likely you're getting angular and your webserver mixed up.
The webserver probably doesn't know to server your angular base page when the /login URL is entered. You need a catch-all handler on your nodejs server.
I have static html website that sends AJAX requests to nodejs scripts. I don't want to send crossdomain requests, so I want static website and nodejs work on same port and same domain. How can I do that?
Now my nodejs works on localhost:1337 and my static website works on denwer localhost/mywebsite and AJAX requests don't work.
Depends on which framework you're using. With express, you can set up all the dynamic endpoints of your application and also:
app.use(express.static(__dirname + '/static'));
This will serve the /static directory of your nodejs project alongside the rest of the endpoints.
Note:
Other frameworks have similar setups. Google for nodejs <your framework> serving static files.
Doing it without a framework is non-trivial.