I have an Angular App and want to start an Express Server (that runs on a different Port) from within my Angular Application. The Express Server is only a single server.js file that handles everything. I dont want it to start just by adding
node server.js
to the package.json, but instead to start it somehow in a Component or Service from the Angular App.
How would I accomplish that?
Related
I have a project with React front end and Node backend using ExpressJS. The backend server basically just returns a json that I can fetch data on my front end. On back end, there is a xml file. So the whole process is convert xml->json on express backend, then fetch data from express backend on react front end.
When I do node index.js to start the server, and do npm start to start my front end, everything works perfect, the front end renders all data.
Then I wanted to deploy this project on Heroku. I put all files into one directory and seperate with client and server directories. Then I npm start build the code in react. In my index.js file of backend, I have
app.use(express.static(path.join(__dirname + '/public')))
and then I copied and pasted build files into the public directory in my server directory. I should be supposed to run the app by node index.js, the app worked, however, the data was not read. Is that because I only started the front end but did not start the server so I didnt get any data? How do I fix this?
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
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 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.
I have a single project which runs sails app on 1337 port and react on 3000. How can I deploy both to single heroku instance ? Which runs sails on 1337 and react on 3000.
You need to integrate React with Sails.
React is all about static files (e.g. HTML, JS and CSS). To integrate React with Sails, a naive solution is to copy the compiled React files to the Sails assets folder.
Below is what I have tried with a brand new Sails app. It just works.
Edit config/blueprints.js to change the API prefix. From now on, the APIs changes from http://localhost:1337/<RESOURCE> to http://localhost:1337/api/<RESOURCE>.
module.exports.blueprints = {
// ...
prefix: '/api',
// ...
}
Edit config/routes.js. Remove the following lines if they exist. This makes sure that when someone visit http://localhost:1337, Sails will search for index.html inside the assets folder.
'/': {
view: 'homepage'
}
Update the React application in case it consumes the APIs from Sails (Remember that we have changed the API prefix). Also make sure that the application entry point is index.html.
Compile your React application (by Webpack or Grunt or whatever packaging tool you are using) and copy the compiled files to the Sails assets folder.
Deploy the Sails app to Heroku.
Done!
A better but more tedious solution is to migrate the React development to Sails. I found an example on Google. It might be outdated because the last update was Feb 2016, but you shall use it as a reference.