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':'*',`
Related
I am currently developing a simple portfolio app and my app structure is like this.
Nextjs/client,
Nodejs/server,
Mongodb/db
Nextjs is hosted locally on port 3001, Nodejs app on 5000. Whenever nextjs needs to fetch any api it calls nodejs application. All the things are configured inside docker. I am very new to deploying nextjs application and have recently used caddy server which has automatic https.
I am able to deploy the nextjs application statically using commands
next build
next export
The statically exported file called index.html inside out directory of nextjs application is pointed to caddy server on port 80 and 443. Statically exported app doesn't support api routes which I recently came to know. I tried next build and next start command to generate a dynamic production build inside .next directory. The main problem is How do I point my dynamically generated nextjs application in caddy configuration inside docker container. My present caddy configuration looks like
www.example.com:443 {
tls xyz#email.com
root * /srv
route {
reverse_proxy /api* api-server:5000
try_files {path} {path}/ /index.html
file_server
}
}
I am looking for hints especially related to proxy server.
Thank you in advance
I'm assuming the api url in your frontend looks like this http://localhost:5000 (based on your youtube comment here) which won't work if you're accessing your dockerized app from a remote computer (in this case your computer, since I'm assuming your app is hosted). Try changing it to https://www.example.com:5000 and rebuild your image.
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 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.
I have an Express app bundled with an Angular 2 app that I run together as such:
ng build -w & nodemon server.js --watch dist
Basically, whenever a file is saved the angular app is rebuilt, and that ultimately triggers the node server to restart as well.
Additionally, I would like to reload the app on the browser so that I don't have to reload it manually. What is the best way of doing this? Previously, when I was using ng serve the browser reload was done by WebPack
Check the first answer here Hooking up express.js with Angular CLI in dev environment
Copying answer here
My experience of 15 hours has taught me that trying to serve an Angular app with Express during development is NOT a good idea. The proper way is to run Angular and Express as two different apps on two different ports. Angular will be served on port 4200 and Express on port 3000 as usual. Then configure a proxy for API calls to Express app.
Add proxy.config.json to root of Angular 2 project:
{
api/*":{
"target":"http://localhost:3000",
"secure":false,
"logLevel":"debug"
}
}
Open up a new terminal tab and run this command to start Express app:
nodemon [YOUR_EXPRESS_APP.js] --watch server
(YOUR_EXPRESS_APP.js is usually named server.js or app.js. server is a directory where you keep all your Express app files)
Open up a second terminal tab and run this command to start Angular app:
ng serve --proxy-config proxy.config.json
This will ensure that Angular app is rebuilt and browser reloaded when a change is made to any Angular app file. Similarly, Express server will restart when a change is made to any Express app files.
Your Angular app is here: http://localhost:4200/
Watch this video to see how to configure a proxy for your API calls with Angular CLI
NOTE: this setup only applies for development environment. In production, you will want to run ng build and place the Angular app inside a dist directory to be served up by Express. In production, there is only ONE app running - an Express app serving up your Angular app.