I created a react App which talks to a node back-end. Everything works fine in development mode. The connection between the front-end and back-end is made through websocket.
Most interesting thing is, that after doing yarn build to create the production build of the app, all the pages work fine. The only thing is that, the page that integrates connection with the back-end is returning error when I inspected it in the browser. I am using Apache Server to run the build version of the app on localhost.
I am using Apache server since python server throws errors on page refresh.
Below is the screenshot. As you can see, node server command, return the expected response from the backend app. The structure of the app is also shown; revealing the relationship between the front-end (smartschool and smartresult) and back-end (smartapi). Only the smartresult makes the request to back-end. How do I resolve this connection problem? Any help will be appreciated. Thank you.
Related
I'm currently working on a game that connects to a Node.js server for multiplayer data.
The game is developed in Unreal Engine 4 and uses the Socket.io plugin to connect to the Node.js server (cors, express being used).
Everything works locally. So now I'm trying to move on to hosting the server remotely and connecting the unreal client to the remote Node.js server.
I looked into Heroku and set myself up, everything is working fine on its end to my knowledge - I created a tester page with a success message when you load the URL and that comes through.
My first question is - what am I doing wrong when I use unreal to point the socket.io plugin to the server url?
The socket.io plugin asks for a port #, I've tried the following:
http:/{my server/heroku url}:8080/
http:/{my server/heroku url}:3000/
http:/{my server/heroku url}:18279/ (which was given to me by Heroku).
http:/{my server/heroku url}/
So far the game does not connect to the deployed server, the way it does locally.
Any suggestions on what could be going wrong/what am I failing to do next?
A few things after researching:
I do have http-session-affinity enabled
Since the server is working locally, I'm going to make the assumption that the deployed code is not the issue, and that it has to do with the way I'm trying to connect.
is it possible that I have further authorization to config? Such as allowing the unreal game/client to connect to the server/that the client is being blocked some how?
I figured out the issue, it had to do with how my Node.js server code was calling socket.io.
If you come across this issue please send me a message or comment here and I will be happy to send you the code that worked.
I am developing a postman like application with some added features. For the frontend, I am using Angular 10, and for the backend, I am using node with fastify.js and for the database, I am using MongoDB via Atlassian MongoDB hosting.
Right now, I have set-up the electron app and using the same frontend code. It's working fine if I use the API(I have hosted my node server on ec2). I want to run this app without an internet connection. for that, I set up the node server in electron. The node server is working fine if I run it in the main electron process.
My electron application setup:
I am running a node server in the electron app on port 5000.
when electron app starts it will start the server.
To make sure everything is working fine I used a postman to access the node server running from the electron process.
In postman, if I am hitting on http://localhost:5000/ while the electron app is running I am getting a response from the node server running in the electron.
If I use localhost:5000 as the base URL and hit the API from frontend in electron it's working and I am getting a response. I checked the electron console network tab, Request is going to the http://localhost:5000/.
Now I want this app to run without the Internet. neDB is the most suggested DB for electron and it provides the same query syntax as MongoDB. Also, I found out library mongoose-nedb. Using that library I can use mongoose with neDB. So, If I use that library I don't need to change my node code and can use mongoose with neDB instead of MongoDB. So, I set-up my app with neDB and mongoose-neDB. for testing, I again use the postman as well as electron frontend. But now I am not getting any response.
I tried LinvoDB as well. same result.
Is this happening because I am using neDB outside the electron browser context?
Can you suggest some solution so that I don't need to rewrite the node server in the electron app?
Is this approach proper? any suggestion?
Ref:
I am using this boilerplate for the electron app: https://github.com/maximegris/angular-electron (I am putting my node code in root and importing it in main.ts)
mongoose-neDB: https://github.com/aerys/mongoose-nedb
neDB: https://github.com/louischatriot/nedb
LinvoDB: https://github.com/aerys/linvodb3
mongoose-LinvoDB: https://github.com/aerys/mongoose-linvodb3
So, Iv'e been trying to setup a small example of a server with 2 factor authentication features. I'm using nuxt as the frontend and flask as the backend.
While developing locally (using npm run dev) I was able to get the chain of communication to work:
The webpage sends a request to server/<some_request>/<some_param>
The proxy module redirects it to http://localhost:5000/<some_request>/<some_param>
The request is sent by the axios module
flask receives the request, processes it and answers.
When trying to deploy this application to a dreamhost server, I used npm run build and npm run generate to serve the website statically. I was able to receive my webpage when browsing.
But when trying to login, the chain described above broke, and requests to server/<some_request>/<some_param> were answered with 404. In the server's command line I saw that flask didn't receive any request, so I assume that this is some issue with the proxy module.
I'm not really sure how to debug this problem, so any help or ideas will be appreciated.
Okay, so I got everything working, and here are my conclusions:
The proxy module, makes the redirection in the client side, meaning that I would be trying to access my own machine when redirecting to localhost:5000, rather than to the server.
The proxy module can't be used when using npm run generate (there's a warning that says it's disabled).
Since I wanted to redirect to flask from the client side (browser), I couldn't just run it as is. I had to register another subdomain and use Passenger to deploy my app (A guide to enabling passenger, getting started with python in passenger and A great guide to deploying flask over passenger).
I am using react, graphql and node. Currently, my react codes are on codesandbox, whilst my server codes are on my local computer. How do i link up my frontend with my backend in this case? Do i need to deploy my server codes onto heroku or digital ocean before i can link them? I like to be able to test them first before deploying my codes
I am also thinking of migrating my backend codes to codesandbox. In this case, am i still able to link my frontend and backend codes in order to test them out before deploying to the hosting provider servers?
Thanks
Charlie is correct. I actually build my react frontend on codesandbox and connected to my node graphql backend on codesandbox too. Both must be running for that to work. Must enable cors too for both to connect. As im using apollo server 2, can pass a cors: true to the apollo server constructor.
Hi Im running my frontend (create-react-app) and backend server (express.js) on different ports but on the same host.
For example: frontend is on 127.0.0.1:3000 and backend on 127.0.0.1:3003.
in my package.json:
{...
"proxy": "http://localhost:3003",
...}
Everything worked fine till I didn't migrate my app to remote server.
My app started to refresh unexpectedly when I'm trying to send http request (axios) to server (probably due to bad proxy settings).
So I have frontend app running on 35.125.320:10:3000 and server is running on 35.125.320:10:3003. My http requests was unexpectedly cancelled. (I checked the network ). So I changed my proxy settings to
{...
"proxy": "35.125.320:10:3003",
...}
but anyway my app is still refreshing when Im trying to make http req. on server. I think the problem is that I can't reach my express backend server. So proxy is forwarding my requests badly.
UPDATE
scenario:(Im doing two post requests)
1) first request still passed (app is not refreshed)
2) same request passed (but sometimes app is refreshed)
3) second is still cancelled by browser.
QUESTION
How can my frontend communicate with backend server via proxy when they are running on different ports but on the same server and domain ??
Thanks for the answer.
Solution:
The problem was that I used proxy in production that is only suitable for development.
I added this line in my express.js server :
app.use(express.static(`${process.cwd()}/build`));
app.use(express.static(`${process.cwd()}/public`));
I make a build and serve js,css files from my build folder. And also I needed serve static files (images, folders, etc...) from my public folder.
This problem can also cause cancelling http request by browser on production. Means, requests weren't able to reach server.
To make your app publicly available, you will want to make a production build. You mentioned in a comment that you "run npm build and then serve this build as static file in express.js". This is a great way to make your react app publicly available. As it says in the create-react-app documentation:
npm start or yarn start
Runs the app in development mode.
When running yarn start or npm start, you are also given a notification that says "Note that the development build is not optimized." The best option will be to run yarn build or npm build and find a way to serve those static files as you are doing.