I have a project with a client folder containing a React app bootstrapped with create-react-app. I also have a server folder with an express API server running on localhost:80.
Originally, I ran my frontend and backend as separate servers, making requests to the API server by making requests with fetch("url") and using "proxy": "localhost:80" in my package.json
I have recently altered the project so that my server serves the static frontend files like so: app.use(express.static(path.resolve(__dirname, "../client/build")))
I then tested running the server on two different ports 80 and 3000, and the frontend and backend both worked perfectly but I believed it would only work when the server was run on port 80
How does my frontend now know where to call the API server when it is running on different ports?
Proxy is used in the development environment and after that when you make build then its convert into the static HTML, CSS and JS files and that can be run in any port using node if you try that in a different port than it will also work as same
Proxy is not made for the production environment
https://github.com/facebook/create-react-app/issues/1087
Related
I have a create-my-react bootstrapped application that is essentially a website that uses some FETCH API calls to a external API and it is deployed and works fine.
However, I added my own Nodejs backend, by creating a server and using using express for the routes/middleware. Everything works fine locally. I can hit my internal API endpoints (localhost:3000/myapiurlhere) and it performs an action on a database.
I have to run npm start to start up the create-my-react-app locally and then manually run the node server by node src/server.js then my internal API works.
The Azure Web App service is basically a preconfigured server with the Node RUNTIME on it, and it only seems to give you access to the D:\home\site\wwwroot folder (Windows server).
Do I need to find a way to run node server.js command on the server to start my node backend, or should it be running automatically? Also, I'm using create-my-react-app and npm run build , so it creates a build folder with a nested static folder.
I have started up REST APIs on Java on my Linux Ubuntu servers before but never on an App Service like Azure. How can I achieve what I'm trying to do?
Here is my server.js file:
const http = require('http');
const app = require('./app');
const port = process.env.PORT || 3001;
const server = http.createServer(app);
server.listen(port);
You dont have to do anything special, Have you followed this page on how to deploy basic nodejs app on Azure AppService?
One additional thing you need to do is that pass the Node version on appsettings of the appservice.
WEBSITE_NODE_DEFAULT_VERSION for the setting key.
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 trying to create a react-redux app using node server as backend. Is it possible to make the node server serve the react-redux app instead of running react-redux using dev server a=in one port and node on another port?
Need some idea to start with. Thanks in advance:)
Yes.. it is
you can serve you react app on '/'
and listen for API request in another route
so you don't have separate codebase for the react app and the api backend code
You can use express to serve the react app on a particular route
i.e my-app.com/
then serve backend related content on another route
i.e
my-app.com/api
so when a request is made to my-app.com/ express serves express serves backend resource or API
There are a few steps I take when creating an express/react app together. I'll create a server and a client directory. The client dir is created with create-react-app and the server can be created via express-generator for example. My project dir (the one that contains both of them) is basically just glue that melds the two together. In the client app, I'll add proxy:localhost:3001 (or whatever port your express api is running) and I use concurrently to run both servers (client and server - as client is being run by webpack-dev-server) at the same time. They run as separate servers during development, but when I make an api call, it's as if I'm making it directly to the express server itself.
The only other thing to worry about is deploying the application. You can use the build command that comes with create-react-app and copy that over to the public directory in your express application that is served up via express.static.
Here's a quick example to take a look at:
https://github.com/overthemike/heroku-skeleton
This is an useful doc for redux SSR setup. This helps avoiding running client and server at two ports.
Redux SSR
This must be an extremely common problem. I've seen various answers for this but none seem to work for me.
I have node installed on an apache server on Windows Azure. My app is built and ready to go (snippet below):
var express = require("express");
var app = express();
//example api call
app.get("/api/example", function(req, res){
//do some process
res.send(data);
});
app.listen(8080);
console.log("App listening on port 8080");
Now, when testing on my own computer, I could then go to localhost:8080, which works great. But now I've put it on the azure server I can't get an external domain to point to it properly. So for example, I have the domain:
framework.example.com
I've added this to my hosts file in Azure:
XXX.0.0.01 framework.example.com
Initially I tried also editing the http-vhosts.conf to point the domain to the correct directory. This worked for loading the frontend, but the app couldn't talk to the backend. API calls returned 400 not found errors.
I've also tried an Express vhost method but think I'm doing it wrong and don't fully understand it. What is the correct method?!
My app structure is like this:
- package.json
- server.js
- server
- files used by server.js
- public
- all frontend files
So to boot the server I run server.js which runs the code at the top. The server.js uses the below Express config to point to the public folder.
app.use(express.static(__dirname + "/public"));
Adding it to the hosts file in Azure won't help. You'll need to configure your domain's DNS to point to Azure. I'd recommend using the DNS Name of your Cloud Service instance. Your underlying VM IP address could change if you need to stop it for some reason, but your Cloud Service DNS name is configured to always route to your underlying VMs. That means you'll need to setup a CNAME with your DNS.
Read more about that here: Cloud Services Custom Domain Name
Next, you'll either need to host the node app on port 80, or put a proxy in front of it to handle that for you. Otherwise you'll be stuck typing framework.example.com:8080 which is not ideal. On linux, you'll likely need to be a privileged user to host on port 80, but you never want your node app to have root privileges. You can use authbind to work around this problem.
See an example of how to use it with node here: Using authbind with Node.js
All that being said, it seems like you're somewhat new with linux server management. If that's the case, I'd strongly recommend trying to use something like Azure Websites instead of a VM. You no longer have to manage the virtual machine OS. You simply tell it to host your application and it takes care of the rest. If you're using github, this is incredibly easy to test and iterate with. It does host on Windows under the hood, and that might problems for some applications, but I host all my node sites there (developed on Mac) without any issues.
I want to use Node.js run as a back-end server to serve front-end socket.io request.
The samples I found, seems can only run pages from Node.js server.
<script src="/socket.io/socket.io.js"></script>
The above js include is served by Node.js, how to include it if the front-end is a different application (e.g. PHP or static pages) ? Do I need to include all the dependent socket.io js libraries to make it work?
I'm currrently running apache/php alongside node.js/socket.io
If this is what you're trying to do, you can do it by serving socket.io on a different port than what apache is serving on (assumed 80).
In node.js, initialize the socket.io listener on a port 8080 for example:
var io = require('socket.io').listen(8080);
I believe, by default, socket.io will also serve its static client side files conveniently for you, such that in you html, you can:
<script src="http://yourhost:8080/socket.io/socket.io.js"></script>
Hope that helps.
It all depends on your server configuration. You may choose a path to Node.js backend that is not used by any other resource, and configure your web-server to serve everything else.
E.g. for Apache I used ProxyPass directive to enable connections to a local Node.js on a different port (to bypass local port restrictions), though may be not an option for your purposes:
ProxyPass /help/server/ http://localhost:8002/ connectiontimeout=1500ms