Angular 11 on Plesk with server side rendering/angular universal - node.js

At the moment I try to get my Plesk server running with angular universal.
I've installed nodeJs and configured this as followed:
Node.js-versie 12.4.0
Document root /httpdocs
Applicatiemodus production
URL van toepassing http://+domain
Application root /httpdocs open
Startup server/main.js
variables none
My browser files are copied in the httpdocs.
My server folder is copied in the httpdocs.
Server side rendering will not be executed..
As I'm searching for many hours now I've tried to changed the next suggestions:
Server.ts:
Replace:
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
run();
}
With:
run();
-> no success
Change application root to a new file called server.js and copied the following code in it:
const app = require('./app');
const http = require('http');
http.createServer(app).listen(process.env.PORT);
Restart nodejs
-> No success (as expected)
It seems like Plesk/nodeJs won't start the express server or reach it (no log errors...)
Is there anyone who has had the same issues and resolved it?
Thanks in advance for any help or answering!
Kind regards,
R

Related

Basic express setup: not sending anything to local port

I created a frontend app and now trying to incorporate backend into it.
ON the same frontend app i added an index.js file in the root directory, and installed express and required it in index.js file.
Very basic setup as below:
const express = require('express')
const cors = require('cors')
const port = process.env.PORT || 3001
const app = express()
app.get('/', (req, res) => {
res.send({
greetings: 'hi'
})
})
app.listen(port, () => {console.log(`Server on port ${port}`)})
Server is successfully on port 3001 as per my terminal, however, on localhost:3001 I'm not seeing any json response I set up in app.get.
It says Cannot GET / instead. When i inspected in devtool(Network) it says 404.
This seems a very straightforward setup, but what could've gone wrong here?
i just figured why. I installed nodemon but my “start” script is “node index.js”. Should’ve used “nodemon index.js”
Working now with nodemon index.ks
Your code is fine, There are no errors, I tested it and it works as expected.
However few things to note, Keep Backend in Seperate folder/dirctory unless required.
Coming back to your question, There are many possiblity such as some modules are not installed properly
try running following command
//this will install if any library is currupt or not installed properly
npm i
if it doesn't work then try clearing cache
Also keep in mind, In nodeJS dev server does not automatically refresh changes, you need to restart server to see changes or you can use dev dependancy called Nodemon (this will auto restart server on saving changes)

How to deploy NextJS application to Linux Server (CentOS 7) - VPS

I've got a question regarding building applications. I'm using simple VPS with node.js support. Now I do not know how to build my next.js application to production.
I want to deploy my application as static files.
I thought that I should use next build && next export then copy out dir to the server but during this process, I faced some issues - when I change route - everything is okay, but if I refresh the page - the page is not found because the server is looking for this file in directories. So how can I deploy my nextjs application in production mode with VPS server and static files?
I tried one thing which is not working fine probably or I did something wrong.
I added nodejs express server with
const express = require('express');
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({dev});
const router = express.Router();
const handle = app.getRequestHandler();
app.prepare()
.then(() => {
const server = express();
server.get('*', (req, res) => {
return handle(req, res);
});
server.listen(3000, (err) => {
if (err) throw err;
console.log('> Ready on http://localhost:3000');
});
});
and start server with forever library NODE_ENV=production node server.js and it's working fine, but seems this is working in a wrong way - seems it's normal server like in dev mode - so it shouldn't be like that. (I see thunder icon on the right-bottom corner and I see all files which are same as in dev mode).
I want to deploy everything as static files.
Thank you for your help!
After you build and export you need to serve those files somehow. The reason the Express server works is because you are starting a HTTP server to serve the files.
So you need to serve those files either by using a static hosting provider (i.e. Vercel or Amazon S3). Otherwise you should start a server on your linux machine using something like serve to serve it at a port, similar to your Express server serving it as localhost:3000 which is then exposed on your VPS.

Node on Azure App Service how does it start up?

I have an Angular Universal app that I am deploying to Azure App Service (Windows).
When the app runs locally on my Windows 10 PC it works fine but in the cloud it seems like the process.cwd() is different than when I run it locally. This is causing Express.js to look in the wrong place for some view files.
The process pwc should be based on how I executed node, in my case I have a start script in my package.json that executes "node dist/server.js". But I can remove this script and Azure will still start my app. So I think the root of my pwc problem is in how Azure starts up my node app.
Unfortunately Microsoft thinks that some code snippets and a couple John Papa videos is good enough documentation for developers to resolve issues.
Questions
Does documentation exist that explains any configuration or
conventions that the App Service uses to init my node app? Where is
it?
Given the script "start": "node dist/server.js" why would process.cwd() be different on my local host versus Azure App Service? The file structure is the same in both places.
const DIST_FOLDER = join(process.cwd(), 'dist');
app.set('views', join(DIST_FOLDER, 'browser'));
Error: Failed to lookup view "index" in views directory "D:\home\site\wwwroot\dist\dist\browser"
root
package.json
dist
server.js
browser (client app)
server (server app)
Documentation: Not an exhaustive guide, but this is what I found useful on MSDN forums:
Windows Azure Websites uses IISNode to host the Node process inside of IIS. Your Node site is actually given a Named Pipe which receives the incoming requests, not a TCP port like you would use when running locally or hosting yourself.
...
As a node.js application running on Azure Web Apps, needs a server.js or app.js file as the entrance in the root directory with a web.config file to control the iis
Working Directory: When web.config and iisnode are used to run server.js, the rules rewrite the directory to point to where server.js resides. That is why it isn't able to find a subfolder 'dist'.
I had to change the line above to this, in order for it to work on Azure:
const DIST_FOLDER = process.cwd();
Another thing I found important was to set the right version of node for your App Service, using WEBSITE_NODE_DEFAULT_VERSION in App Settings. Here's a bit more info on that from a blog on MDSN - NodeJs and NPM versions on Azure App Services
Since I am used to hosting Node apps on Linux this totally slipped my mind. The answer is...
see web.config
If anyone else finds themselves here put this in your server.ts file to work both locally and on azure
import * as fs from 'fs';
const distFolderExists = fs.existsSync(join(process.cwd(), 'dist'));
const DIST_FOLDER = distFolderExists ? join(process.cwd(), 'dist') : process.cwd();
big thanks to KayS for their answer - really helpful.

When running script for express web server with node on windows get prompt to select app

I'm going through this this course currently.
There is a tutorial on how to configure and run express server. The following script is suggested:
var express = require('express');
var path = require('path');
var open = require('open');
var port = 3000;
var app = express();
app.get('/',function(req, res){
res.sendFile(path.join(__dirname,'../src/index.html'));
});
app.listen(port,function(err){
if(err){
console.log(err);
}
else{
open('localhost:'+port);
}
});
When I run it in project root with $ node buildScripts/srcServer.js I get a system prompt You'll need a new app to open this localhost with the only suggestion being look at windows store.
What's that about? What does it need an app for? In the course when the script is run the browser is opened, but it's on Mac there. When I navigate manually to localhost:3000 there is the error like there is supposed to be, but I'm somewhat concerned that this behavior will mess with live reloading so I'd like to get rid of it.
Add the http:// prefix and it will open using the default browser.
open('http://localhost:'+port);

How to re-route certain request url to different server in NodeJS

I have here an Angular 2 application which is certainly running on NodeJS but heres the catch, consider this ng application is in the main directory www.angular2app.com and I have 2 other sub modules which is totally not angular which is
www.angular2app.com/blog > WordPress App 1
www.angular2app.com/events > WordPress App 2
www.angular2app.com/anythingelse > Angular 2
Is there a way to handle this requests properly in NodeJS? WordPress 1 and WordPress 2 are totally different sites. There is no apache or nginx here because it's on running on MS Azure
Hope some evangelic could help me with this problem.
Thank you
You can try to use the solution similar with Virtual Directory in IIS configuration. Please consider the following test structure in Azure Web Apps.
For simple reference, my test project only contains a node.js and a php application.
The project's structure:
wwwroot/
-nodejs/
-server.js
-web.config
-php/
-index.php
The server.js is a simple node.js server script:
var http = require("http");
var server = http.createServer(function(request, response) {
response.write("Hello World!");
response.end();
});
server.listen(process.env.PORT ||1337);
console.log("Server is listening");
The web.config is a iisnode configuration file for starter nodejs application, you can find the content at https://github.com/projectkudu/kudu/wiki/Using-a-custom-web.config-for-Node-apps.
And the index.php script contents a test sentence phpinfo().
When you browse domain/nodejs, the requests are against to the node.js application.
And when you browse domain/php, the requests are against to the PHP application.
Any further concern, please feel free to let me know.

Resources