A developer working in Cebu City, Philippines is receiving frequent networking errors using a common configuration between Firebase and Create React App. We use firebase serve to start a local server for static assets in one terminal window. It starts up:
i hosting: Serving hosting files from: build
✔ hosting: Local server: http://localhost:5000
In a separate window, we run yarn start on a Create React App repo with a "proxy": "http://localhost:5000", entry in the package.json file. We frequently observe the following error:
Proxy error: Could not proxy request /__/firebase/8.1.2/firebase-app.js from localhost:3000 to http://localhost:5000. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (HPE_INVALID_CONSTANT)
with ERR_STREAM_WRITE_AFTER_END exceptions killing the Create React App process.
Note: occasionally the error does not occur.
I can't replicate this problem in the US. With all of the software configurations I can think of being equal, I suspect there might be networking issues in the way as the firebase server does its Reserved URL "magic".
Do you think I'm on the right track to suspect a networking problem? If so, can anyone assist with lower-level networking config that might alleviate the problem? (I'm thinking connection/timeout adjustments).
If you init your project from hosting URLs in public/index.html (like me), try to update URLs to the latest version (8.2.3), so all scripts would look like this:
<script src="/__/firebase/8.2.3/firebase-app.js"></script>
This is what worked for me. I hope so :)
Related
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.
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 just starting to learn MERN Stack development as a former .Net developer. I wanted to develop my skills in this area and after lots of researching I just can't figure it out why we need to have two different running port/app when we working with react js?
Firstly I have developed some simple application by using NodeJS, Express, EJS View Engine and already deploy it to Heroku. So far, this works fine for me. I can develop all my personel site with those technologies including MonoDb later. But to become complete MERN Stack developer I started to search React and realized that it only works with giving another port to seperate it like client application. Why we can't use react and all other things in under one port?
This confused me when I get two different web page under;
http://localhost:5000/ (React App)
http://localhost:3000/ (Server Side: opens different html given by me using EJS)
Apperantly if we give same port number with server (3000) in react's package.json file then it gives following warning;
Something is already running on port 3000.
npm run client exited with code 0
Is it due to nature of ReactJS?
You totally can run React and Node on a single port - but it doesn't make for an efficient workflow.
The core answer to your question lies in separating front-end routing from back-end routing. When using React Router your application manages the UI based on the URL parameters.
i.e
http://localhost:3000/some-ui-path
At the same time when using Node as a back-end to respond to HTTP requests - you send the requests to specific URL paths.
i.e
http://localhost:3000/some-api-path
Separating the ports easily lets you differentiate between which route should be handled by React Router on the front-end and which route should be directed to the Node on the back-end.
http://localhost:3000/some-ui-path = React Route
http://localhost:9000/some-api-path = Node HTTP Route
In your configuration files you can customize your front and back end setups so that any request to a certain path will be redirected to your node server.
An Example:you can define that any path prefixed with /api/ should be proxied to port 9000:
http://localhost:3000/api/some-api-path ==> http://localhost:9000/some-api-path
You can use whichever ports you like but 3000 5000 and 9000 are common defaults used by starter kits and module bundlers like create-react-app and webpack
Hope this helps, let me know if I can explain further!
You cannot run React and Node.js server in a single port.
Why?
React uses webpack to bundle all the component files into a
single JS file. This JS file is then served by a
webpack-dev-server which is a part of webpack.
This webpack-dev-server is needed only during development. In production, you use npm run build or yarn build to bundle everything into a directory called build which will be served as a static asset by your Node.js server.
So, during development, you need to use two different ports for:
webpack-dev-server: This by default runs on 3000. If you try to run your Node.js server, you'll get an error.
Node.js server: This should run on port other than 3000.
Note: webpack is used as a default module bundler when creating React app using create-react-app.
Let's start from the port. Port is a logical construct that identifies a specific process or a type of network service. Port is a communication endpoint. And you have two different services, so it seems logical to use different ports generally. Your question is really good. I'm waiting for new answers.
Also a .Net developer here! I had the exact same question around myself and this article seems to clarify a little for me.
It seems like you need two servers (two ports) for development only. In production, you will only have an API server running, with some endpoints simply serving static files in /build directory like:
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'build', 'index.html'))
})
I think the reason why we run two servers (one react webpack server and one API server) ports in development is because 1) we don't want to run npm build every time you make a change and 2) because of not needing to build every time you make changes, it allows hot-reloading for fast development.
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.
I have two Docker containers, one running a React app (built using create-react-app) and another with a Node app API. I have a docker-compose file set up, and according to the documentation I should be able to use the names of the services to communicate between containers.
However, when I try to send a request to the /login endpoint of my API from the React app I received a net::ERR_NAME_NOT_RESOLVED error. I'm using Unirest to send the request.
I've done a bunch of digging around online and have come across a few things describing similar issues but still haven't been able to find a solution. When I run cat /etc/resolve.conf (see this issue) in my React container the container with my API doesn't show up, but Docker is still fairly new to me so I'm not sure if that's part of the issue. I've also tried using links and user-defined networks in my compose file but to no avail.
I've included gists of my docker-compose.yml file as well as the code snippet of my request. Any help is much appreciated!
docker-compose.yml
Unirest request to /login
As discussed in the comments on the original post this was a DNS issue. Configuring the DNS was a little to involved for the use case of this project, so I've solved my problem by using an environment variable to set the URL that is used to make calls to my API container based on whether I'm running on a dev or prod environment:
(process.env.REACT_APP_URL_ROOT || '/app')
I set REACT_APP_URL_ROOT to my localhost address when running locally, and have an nginx container configured to proxy to /app when I build and deploy the React app.