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.
Related
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 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 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 installed Node.js on my web server plus the dependencies for Express. When I run the command npm start and go to my web site's address using the port 3000 (which I believe the app is set to by default?), it just keeps loading and never loads. Any tipps please on how to fix this?
Try this $ PORT=8080 node app.js. Here app.js is your server config file. I suspect some background servers are running in that port 3000.