I'm trying to understand how to properly publish a node application. I have an angular 2 application which after build creates a www folder. I've uploaded the folder to my hosting company which uses plesk for a control panel.
For non-angular applications I would point the node entry point to file which tells node where and how to start :
const http = require('http');
http.createServer(function(request, response) {
response.writeHead(200, {'Content-Type': 'text/html'});
response.end('<H1>Hello World!</H1>');
}).listen(process.env.PORT);
I'm confused on what the entry point for an angular 2 application would be?
When I navigate to my index.html file it appear to serve the file and mostly work, but shouldn't I have an entry point which is a js file?
Angular applications need Node.js (NPM) to be installed and built, but after they are built, they don't depend on Node.js as web server - as long as SSR (server-side rendering, aka Angular Unversal) isn't needed.
Angular application can be served by any web server (IIS, Apache, Nginx, etc) that was properly configured to serve SPA (single page application). If HTML5 routing is involved, this needs index file to be served for router path.
Related
I'm new to back-end coding, and I'm struggling to understand exactly what a "fullstack" app would look like.
Is it:
A Node-Express server that serves index.html, which has <script src="main.jsx"></script> in it (If this is the case, how would the .jsx content get compiled into browser-ready javascript?)
A Node-Express server that serves some data (.json) + a frontend app (that you would initialize with Vite or CRA) that fetches from said server?
Both are currect , your server can serve content to the cliend (first case) or send data to the client (json , xml or etc).
Note that when you are working with react and .jsx component you have to build your project and server the html file (including js , css) via express server
My Vue app is set up using Vue CLI (Webpack) and it's working as it should. My NodeJS/Express REST API is also working properly. However, to run them simultaneously I now start a local server for each of them -- each with its own port. I would like to have both of them communicate over one port.
Localhost:8080 should point to the home page of my Vue App and the API requests should follow localhost:8080/api/...
In my production environment I use one and the same port/URL by serving the Vue App as a set of static files ('dist' folder). In my development environment I don't know how to set this up, however.
I looked around for answers online, but feel lost among all the different terms I have come across (.env, crossenv, nginx, cors) and that I am running in circles.
What would be a good way of setting this up?
Thank you
Edit:
I ended up creating three modes to run my application:
Development
I use one script in a package.json to start the frontend and backend server on different ports, using pm2 to run the servers in the 'background' rather than blocking further commands in the terminal/cmd. I use configured a proxy inside my vue.config.js to redirect my API calls made in the frontend to the right base URL and used cors as middleware to allow requests to my API from other domains/ports.
Staging
I use one script in a package.json to build the Vue app into a folder ('dist' folder inside my backend folder) that is a collection of static files and start the backend server. My backend is set up to know when I want to go into staging mode and then serve the static files in the 'dist' folder.
Production
I use one script in a package.json to build the Vue app into a folder ('dist' folder inside my backend folder) that is a collection of static files and push my backend (incl. the built static files) to Heroku.
Well if you need to run both on the same port you could first build your app so that you receive a dist directory or whatever your output directory is named and set up an express server that serves that app and otherwise handles your api requests
const express = require("express");
const path = __dirname + '/app/views/';
const app = express();
app.use(express.static(path));
app.get('/', function (req,res) {
res.sendFile(path + "index.html");
});
app.get('/api', function (req,res) {
// your api handler
}
app.listen(8080)
Assuming that node and the 'app' will always run on the same server you can just use a template library like ejs.
You would then just bundle the app and api together, assuming that the front-end is tied to the backend, realistically you would not even need to hit the API as you could just return the records as part of the view, however if dynamic elements are needed you could still hit the API.
Now, with that said, if the API is something used by many applications then it would probably make sense to build that out as its own microservice, running on its own server and your frontend would be on its own. This way you have separation of concerns with the API and Vue app.
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 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 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.