Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to run angular universal HTTPS

I'm follow angular universal in homepage: https://angular.io/guide/universal

Without universal, I run my angular project with command

ng serve --ssl true --ssl-key /node_modules/browser-sync/lib/server/certs/server.key --ssl-cert /node_modules/browser-sync/lib/server/certs/server.crt --host 0.0.0.0

Now, I add universal to my project, but don't know how to setting it run with "https".
Help me, please.

Here my server.ts

import 'zone.js/dist/zone-node'; import {enableProdMode} from '@angular/core';
// Express Engine
import {ngExpressEngine} from '@nguniversal/express-engine';
// Import module map for lazy loading import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';

import * as express from 'express';
import {join} from 'path';

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist/browser');

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');

// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
bootstrap: AppServerModuleNgFactory,
providers: [
provideModuleMap(LAZY_MODULE_MAP)
]
}));

app.set('view engine', 'html');
app.set('views', DIST_FOLDER);

// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => { });
// Serve static files from /browser
app.get('.', express.static(DIST_FOLDER, {
maxAge: '1y'
}));

// All regular routes use the Universal engine
app.get('*', (req, res) => {
res.render('index', { req });
});

// Start up the Node server
app.listen(PORT, () => {
console.log(Node Express server listening on http://localhost:${PORT});
});

like image 615
Duy Huỳnh Avatar asked May 26 '19 02:05

Duy Huỳnh


People also ask

Should I use angular universal?

A primary benefit for using Angular Universal is that it improves web crawler support for enhanced Search Engine Optimization (SEO). With traditional client-side rendered SPAs, anything that is not in that shell of an . html is all rendered by the JavaScript.


1 Answers

So this Question has been open for too long:

I myself tried to solve this problem. My first approach was changing the server.ts express server so it would create an HTTPS instance instead of an HTTP one. This failed as it tried to start the file in a docker container.

So back to the beginning I started the node server with HTTP and used an Nginx server as a proxy to connect to the node server. This also has the benefit that your web application is capable of connecting with more clients.

In your Nginx config file there should be something like this:

server {
  listen       80;
  listen       443 ssl;
  server_name  SERVER.com;

  ssl_certificate  /etc/nginx/ssl/live/SERVER.com/fullchain.pem;
  ssl_certificate_key /etc/nginx/ssl/live/SERVER.com/privkey.pem;
  ssl_dhparam /etc/nginx/dhparam/dhparam-2048.pem;

  location / {
    proxy_pass DESTINATION:PORT;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}

Hope this helps ;)

like image 118
Laurenz Kaml Avatar answered Oct 20 '22 23:10

Laurenz Kaml