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...
Related
I've both NodeJS and AngularJS applications. I'm using npm install to download the app's dependencies for both the application. The NodeJS application runs on port 4000 and AngularJS application runs on port 4200. I can access APIs from NodeJS application in the browser and cannot access the application's UI(AngularJS) in the browser. I have deployed these applications on Azure Virtual Machine.
I have opened the ports 4000 and 4200 in the network settings of Azure VM. I'm using npm start command to start both the applications. NodeJS working fine as like in the local machine but not the same case with AngularJS. There is no errors or warnings from AngularJS side. It shows that the app is listening on http://localhost:4200/ and it is not accessible.
In this case, you need to run ng serve --host 0.0.0.0 to allow that your AngularJS application is listening on 0.0.0.0 for outside connecting. You could refer to this How to allow access outside localhost
Try using:
ng serve --open --host 0.0.0.0 --disable-host-check
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'm developing my MEAN application fully locally (Angular frontend and Node Backend). To test this I'm using my mobile with angular command ng serve --host command. When I run my application data from the local node server not loading to mobile but it works with the Laptop browser.
You would need to do following steps:
(1) Ensure that your local machine and mobile phone are on same WiFi network.
(2) Get your local machine IP Address. It will be something like e.g. 184.192.108.xx
(3) Run angular application with command ng serve --host 184.192.108.xx
You can specify the --port and --live-reload options.
https://angular.io/cli/serve
Thanks!
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 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.