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.
Related
I'm new to nuxt and having trouble getting HMR websocket connection configured on a nuxt project and running in Gitpod. The project uses nuxt 3 + vite.
After running yarn dev the dev server is running on port 3000 and the frontend tries to connect via websocket to the vite dev server running on port 24678.
Unfortunately the servers are exposed on Gitpod environments via a reverse proxy and on https endpoints. So the internal servers are running on the defined ports and are publicly exposed on different SSL endpoints like https://3000-CONTAINER_ID.gitpod.io/ and https://24678-CONTAINER_ID.gitpod.io/. But the HMR tries to connect by default to ws://3000-CONTAINER_ID.gitpod.io:24678/_nuxt/.
I tried to adjust the vite HMR config on nuxt, but I'm out of luck. The closest I came to what I wanted to achieve was this config:
export default defineNuxtConfig({
...
server: {
hmr: {
protocol: 'wss',
clientPort: 443,
},
proxy: {
'/_nuxt': 'http://localhost:24678/_nuxt',
}
},
...
});
With this the websocket URL in the frontend looks right, being: wss://3000-CONTAINER_ID.gitpod.io/_nuxt/, but I get an WebSocket connection to ... failed. with an [vite] server connection lost. polling for restart... resulting in a page reload endless loop.
I prepared a git repo that could be directly started in Gitpod.
Any help to create the right setup to automate my dev environment with Gitpod would be awesome.
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...");
});
Angular and Node are running Amazon EC-2 instances. Angular in port 4200 and Node in 3000. When I try to do anything with Angular to connect with Node, Its throwing CORS error. Anyone why and how to sort out?
Your BEST bet is to run ng build (or equivalent) and serve your Angular app directly from your NodeJS web server.
Your alternative is to configure your Angular app (it sounds like you're running the WebPack server used by the Angilar CLI, i.e. ng serve) to use a proxy: ng serve --proxy-config proxy.conf.json.
Here are several links about how to do that:
angular-cli server - how to proxy API requests to another server?
https://medium.com/#spencerfeng/setup-a-proxy-for-api-calls-for-your-angular-cli-app-6566c02a8c4d
Another alternative (which can be used in conjunction with the above) is to configure CORS:
CORS in Express using TypeScript
Should you do this, you also need to add the CORS "Allow Origin" header in your Angular app:
`'Access-Control-Allow-Origin':'*',`
I have deployed my Angular 6 App and Node.js to the Linux server.
There are two separated folders
The first, I run ng serve --host=**.**.**.*** to start Angular App
There is my Angular packege.json
My auth.service.ts
My Node.js server looks that
My folder hierarchy on a server
The server is Running on Port 3000
With my IP url in auth.server.ts I've got console error
And my question is "which port has to listen to my Node.js and which url I had to write in my auth.service to set up communication between them?"
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.