I have a nodejs application using express as a framework
example: localhost:2020
this app serves many routes
example: localhost:2020/node-1, localhost:2020/node-2localhost:2020/node-3
I created a nextjs application for just one page
example: localhost:3000/nextjs-page
I want to serve the new nextjs page inside my working node app
to be localhost:2020/nextjs-page
how can i do that?
Try express-http-proxy. Install it and include on app on localhost:2020, and then setup the middleware:
//localhost:2020 app
const proxy = require('express-http-proxy');
//...
app.use('/nextjs-page', proxy('http://localhost:3000/nextjs-page'));
Related
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'm currently developing using ng serve, with proxy configuration, while the proxy points to another nodejs instance on the same machine.
This backend is a simple express server, like this (simplified):
var express = require('express');
var app = express();
var customers = require('./customers.controller.js');
app.get('/api/customers', customers.getAll)
var server = app.listen(8081)
The frontend (ng serve) runs on port 4200 and proxies /api to http://localhost:8081/api
As far as I can see, this is the recommended setup.
However, I would prefer to have the backend running directly inside of ng serve instance instead of the proxy.
And if possible, even take advantage of the automatic reload feature of ng so that I don't have to restart the server if I change something on the backend code.
As both are nodejs and ng seems to be configurable, I think this is possible, but I can't find a starting point for defining my own routes
Its possible to do this
you just need to put your angular into the backend by utilize the nodejs routing
basicly angular is a "static file" and the entry point is coming from the index.html
// Redirect all the other resquests
this.app.get('*', (req, res) => {
res.sendFile(path.resolve('dist/index.html'));
});
but remember you need to handle the routing for image, js, css and others also.
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.
Currently, I have a static landing page hosted on firebase on the url "mycompany.com" (not the actual URL).
My node server (using express) runs on heroku and it contains my backend API and my react frontend (using react-router). In order to make everything run, I had to point this to a subdomain: app.mycompany.com
What I really wanted to do, was to have my landing page on "/" and have that to be the default redirect, all hosted in my node server (without having to have two servers and point to a subdomain).
I'm struggling to understand how could I set up this, or if have to change something to make this work.
Thanks in advance!
If you make a static build of your react app you can serve this build folder along with your static landing page. You'll still have to specify the path where you want your app traffic to go:
const express = require('express');
const app = express();
const staticLandingPage = express.static(path.join(__dirname, "./path/to/landingpage"));
const reactApp = express.static(path.join(__dirname, "./path/to/reactBuild"));
app.use("/", staticLandingPage);
app.use("/app", reactApp);
I have installed polymer-cli and setup an Express server. How can I run Polymer code with Express?
Routing with Polymer and Express - This link work for you to run Polymer code with Express and setup Express.
// Node.js notation for importing packages
var express = require('express');
// Spin up a server
var app = express();
// Serve static files from the main build directory
app.use(express.static(__dirname + '/build/bundled'));
// Render index.html on the main page, specify the root
app.get('/', function(req, res){
res.sendFile("index.html", {root: '.'});
});
// Tell the app to listen for requests on port 3000
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
The answer given by StackOverflowuser is correct. Just clarifying what I have found so that newbies can follow.
Polymer Cli is a stand alone tool: i.e you don't need anything else to run a polymer app. It has it own web server and listens on the port to serve request.
So when you execute
polymer serve --open
You are serving your polymer app on
http://127.0.0.1:8081/components/polymer-starter-kit/
Now that you have developed your app, its time to deploy this to a web server as polymer cli is not a web server.
This is the part that requires the deployment.
You now have to build this app to be deployable
We do polymer build. This prepares the app for deployment to a separate build folder under
build/
es5-bundled...
We now need to take this bundled files and deploy on web server. This is independent of Polymer Cli and you can choose which port etc to expose.
In this case, going by your definition you want to deploy on express which is a web server on top of node.js.
The code present on top explains the actual code you would use to deploy the polymer bundled app in express on top of node.js.
pm2 abstracts this and you can run it as a service with all the web server goodies. So we could now use pm2 to run the web server app than the default node.js.
Both styles of deployment are possible.
Have both web server hosting app and polymer app in the same solution.
Have different apps for web server hosting app and polymer app
When you have different apps, you have the added overhead of copying only the files under the build to the web server to be hosted but its cleaner and separates the source from the deployed similar to backed technologies were code is different from compiled libraries.