I have a React application and I made the backend with Node js also the server from MongoDB. It is a MERN stack. I have a directory structure like:
-client // this is where react app, in build version is in client/build
-middleware
-models
-routes
package.json
server.js
...
I want to deploy it like this, in my Filezilla:
-test.Server22c
-backend // this is where all nodejs files
-static //these folder and other files are my build files in react app client/build
-index.html
...
How can I arrange to work these together in the same folder? I changed the endpoints in my Axios post links in my react redux but it did not work
The best option is to use 2 different ports, one for your react application and one for your node.js server.
Let's say we'll use :
HTTP default port 80 for React App (http://example.com)
Custom port 8080 for your Node.js server (http://example.com:8080)
React
To deploy React, you can simply use serve and you can find all you need at https://create-react-app.dev/docs/deployment/.
You will basically need to execute these commands in your react directory.
npm install -g serve
serve -s build -l 80
Be sure to not have any apache server running on your machine otherwise the port 80 will be already taken.
Node.js
You just need to run your server on the port 8080, I do not really know which framework you're using, so let's say if you were using express, it will looks something like this in your entry point index.js.
app.listen(8080, function() {
console.log("Server is running on port 8080...");
});
I have a vue project with Node back-end.
The architecture is simple, APIs are exposed by Node which are cosumed by Vue fornt-end.
In developent environment vue dev server runs on port 8080 and the Node server runs on port 3000. The api calls from Vue are being redirected to port 3000 using following devServer configuration in vue.config.js
devServer: {
proxy:{
'/api/*':{
target: 'http://localhost:3000'
}
}
}
I want to deploy this app on RHEL server but unable to find the proper configuration.
I deployed vue app on apache and ran the server simply using node server.js.
How to achieve porxy similar to dev environment? I tried Ngnix for proxy with no success so far.
Need help with approach.
I created a angular6 webpage with anuglar cli. this page communicate with a node.js Server.
I had created it on windows and it works fine...
I start angular with a
ng serve
nd my server with
node serve.js
so... now i'd like to do the same on a Linuxsystem (raspberry pi) and make it global
ng serve --host 0.0.0.0
and
node api.js
but angular won't speak to node serve...
I have an angular 4 and a node app. I connect them with HTTP services. now I put them on a local server with 192.168.x.y IP. I start my angular app by:
ng serve --port 8080 --host 192.168.x.y --public 151.233.t.z which 151.233.t.z is my public IP. and finally, I run my apps by: pm2 start npm -- start and pm2 start index.js.(my node server is listening on port 3000) and in the HTTP services I send my HTTP request to http://192.168.x.y:3000. when I open the browser on 151.233.t.z:8080 on a local system everything is ok. but when I try outside the network I just can see my angular app and when I click on a button to send post request for login, it's not working!
I am new to Node and Angular. I need to know whether is it possible to run a Node Express app serving as a backend and an Angular frontend on the same port. I followed Angular Quickstart tips on angular.io and created a Node todo application but both are running on different port which raises the issue of Cross Origin Request Blocked Issue.
To have Node.js serve the Angular app on the same port, your Angular app must be deployed under your Node's directory where the static resources are deployed. But in dev mode, it's more productive to serve your Angular bundles (so they auto-rebuild in memory as you code) from the dev server, e.g. on port 4200, while the Node server runs on another port, e.g. 8080.
To avoid cross-origin issues, you need to configure a simple proxy file in your Angular app to redirect all data requests to your Node server. For example, create a file proxy-conf.json in the root dir of your Angular project:
{
"/api": {
"target": "http://localhost:8080",
"secure": false
}
}
This will redirect all requests that have /api in the URL to your Node server, assuming that it runs on port 8080. Then start your Angular app using the following command:
ng serve --proxy-config proxy-conf.json
An HTTP request in your Angular App can look like this:
http.get('/api/products');
Of course, you need to configure the /api/products endpoint for GET requests on your Node server.
To get Angular and Express running on the same port I've always served my Angular build files by the Express app itself. You should be able to tell Express to serve static content from an Angular build directory like this:
app.use(express.static('../accounting-client/dist'));
Which would work if you had a file structure like so and were running serve.js with Node:
-accounting-server
-serve.js
-accounting-client
-dist/*
You can customize as needed by configuring the Angular build folder to be wherever you need it, or use Grunt/Gulp to move files around to the folders you prefer with a build task.
As mentioned by Yakov this isn't ideal for development since it won't work with the Angular dev server's auto-refresh.
The fact that you need to have access to your client-side project from within Express project, as spacefozzy said, is true. but you still can keep your projects separated.
To do so, you can create a symlink from your client-side project directory in your Express project directory:
// while in Express directory
ln -s ~/path/tp/client-side/build name-in-espress-dir
This way you can maintain projects isolated.