I manage to create Angular apps in general, but I do not understand how Angular and Node.js connect together.
Even on a local environment, you need to launch two things:
ng serve
node app.js
So how the two connect? Do you render the Angular app via Node.js? Do you render the app like this:
or like this:
But then there is the route problem, do you define routes via Node.js with app.get('/')
or via Angular with:
const routes: Routes = [
{ path: '', component: HomeComponent}
];
ng serve & node app.js will launch those two scripts at the same time.
Angular and NodeJS application connect over HTTP where NodeJS is the backend and the Angular is the frontend.
ng serve is the command to server Angular application on your local environment but when you'll deploy your Angular app in production, first you'll have to build the Angular app and serve the destination folder using Nginx or something else..
node app.js is the command you are using to launch your NodeJS server (in your case) which will start listen on some HTTP port (if you are using NodeJS Express correctly)
An example of connection between the two over HTTP is like this:
the Angular app issue an HTTP request to the NodeJS backend and the NodeJS server respond to that HTTP request to send data back to the Angular app.
regarding the routing, Angular is a Single Page Application (SPA) so it can handle it own routing requests as you showed and this is what you should use for your website (the frontend) most of the times. where the routes in your NodeJS application refer to your REST API routes, as in what functions your NodeJS server supports.
I think you should read on how to implement REST api in NodeJS and you'll find great detailed guides about it, and creating a single page application in Angular
Related
I am new to reactJS. I am working on project which uses following :
Front-end : ReactJS
Backend : NodeJS (Express)
Front-end runs on port 3000
Back-end runs on port 8088.
I am planning to deploy application on amazon AWS.
What i am trying to do is load reactJS front-end when i make request on http://localhost:8088/
I know using axios we can make request on backend server and display fetched data.
What would be standard way of loading ReactJS front from the nodeJS ?
I'm not sure if this is the answer you are looking for, but generally in development you use something called proxy in your package.json in the client (react) folder:
{
// Other stuff
"proxy": "http://localhost:8088"
}
and then when you'd want to deploy you'd run npm build for your react folder and serve that generated folder called build. But as I said, you usually do that only when deploying your application onto server, not the actual development.
Also I'd suggest checking some of these videos, that are focused on deployment, because that is what I think you are asking, right ?
I have a running ember.js frontend app. Also have a node.js backend app which can do basic CRUD operations from MongoDB. Using Postman I can see that my node.js app is returning JSON data properly.
I want my frontend to use the backend to do CRUD operations on MongoDB. I am new to ember.js so I want a guideline where I can understand to use the JSON data from the node.js app and use with ember.js frontend.
My ember.js app already is using a mock server. It has a "dist" folder inside.
My adapter/application.js file in ember.js frontend:
import DS from 'ember-data';
export default DS.RESTAdapter.extend({
namespace: 'api'
});
I want to use my localhost:3000 node server here. Do not know where to add it.
DS.RESTAdapter has a host property that allows you to configure the host used:
// app/adapters/application.js
import RESTAdapter from '#ember-data/adapter/rest';
export default RESTAdapter.extend({
host: 'https://api.example.com'
});
But I would not recommend to point that one to a local development server cause that reduces your flexibility. E.g. a team colleague of yours may want to start the local instance on another port. I would recommend to use the --proxy option of Ember CLI's serve command:
ember serve --proxy http://localhost:3000
This will proxy the requests to your local development server.
You may need to customize the adapter and serializer if your API isn't following the defaults of Ember Data's RESTAdapter and RESTSerializer. Please have a look in the guides for a quick introduction to do so.
I have a Node/Express setup in dev that outputs data as JSON for consumption. In dev that endpoint is localhost:3000/data
I also have an Angular 8 app in the same node directory for the front end. In dev, I launch two separate Node command prompts... one to run node/express at port 3000 and another to run angular at port 4200.
The goal is to have the Angular app output the data the Node/Express backend is providing... in an Azure Web App.
I have read articles that state how to deploy Angular to a WebApp, but can I have both the Node/Express backend serving data and the Angular app running in a single Azure Web App... or do I need to create two separate apps and use a CORS listing for the frontend to speak to the backend Web App?
I am guessing that I will need to use Express to launch Angular then perform a build instead of Express and Angular running on separate ports?
You can use Angular and Express on the same directory, and a middleware on express, so when you do request, the middleware identify if it's a "/data" URL or a simple URL and send the index file that angular generate on dist folder.
Move app.js to your Angular app folder
Insert this code;
app.use(express.static(path.join(__dirname, '/dist/<your Angular App Name>')));
app.use('/data', <your route file>);
app.use(function(req, res) {
res.sendFile(path.join(__dirname, '/dist/<your Angular App Name>', 'index.html'));
With this, you Angular and Express runs on localhost:3000.
I am new in programmation and i follow a tutorial in udemy to create my restful API with express JS.
I have almost finished my API and i want to integrate it in a new angular 5/6 project.
I have tried a lot of tutorials but i cannot launch my express project in an angular project to make a request with postman.
could you show me please ?
Here is my express project
You don't really need to "integrate" your NodeJs app with an Angular application.
You make a NodeJS REST API as you would with any other technology and run it separately on a certain port (Default is 3000 for NodeJS)
Run it with the command node app.js.
Then you make an Angular application, that connects to your API as if it would to any other page. A HTTP call inside a service to your specified link.
public contactAPI(){
var uri = 'localhost:3000'; //Or whatever the link is for your node server
return this.http.get(uri);
}
I just want to know the correct way to serve an angular universal app with an existing nodejs/express server that talks to a Mongodb database and serves data with an "/api/*" route for example.
So is it to have the universal app have its own node/express server as explained here https://angular.io/guide/universal and just merge that with the existing node/express server with route configuration as done here Serve angular universal app with NodeJS/ExpressJS back-end and allow both the custom node/express server and the universal apps express server have different ports (because i assume that is how they will be able to co-exist in production)
Or do we use the custom node/express server as the server for the universal app with proper configuration.
To serve angular app with node server first you need to build the app just run the below command
ng build
And then add two lines of code in your node server file as
app.use(express.static(__dirname + '/dist'))
app.use(function(req, res) {
res.sendFile(__dirname + '/dist/index.html')
})
And after that you can run node server and the default entry index html file will open when you hit the host.