feat(ssr-demo): add ssr demo

AhsanAyaz · Dec 3, 2020 · e0cf90a · e0cf90a
1 parent 14bba3f
commit e0cf90a
Show file tree

Hide file tree

Showing 21 changed files with 507 additions and 9 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,7 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
 # compiled output
-/dist
+/dist/ngx-device-detector
 /tmp
 /out-tsc
 # Only exists if Bazel was run

diff --git a/README.MD b/README.MD
@@ -30,7 +30,8 @@ If you use Angular 5, you must use v1.5.2 or earlier
 
 ## Live DEMO
 
-[Ngx Device Detector Demo](https://koderlabs.github.io/ngx-device-detector/demo)
+[Demo](https://koderlabs.github.io/ngx-device-detector/demo)
+[SSR Demo](https://ngx-device-detector-ssr.herokuapp.com/)
 
 
 ## Installation

diff --git a/dist/demo/Procfile b/dist/demo/Procfile
@@ -0,0 +1 @@
+web: node server/main.js
diff --git a/dist/demo/browser/3rdpartylicenses.txt b/dist/demo/browser/3rdpartylicenses.txt
diff --git a/dist/demo/browser/assets/images/github-logo.png b/dist/demo/browser/assets/images/github-logo.png
diff --git a/dist/demo/browser/favicon.ico b/dist/demo/browser/favicon.ico
diff --git a/dist/demo/browser/index.html b/dist/demo/browser/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Demo</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+<link rel="stylesheet" href="styles.09e2c710755c8867a460.css"></head>
+<body>
+  <app-root></app-root>
+<script src="runtime.359d5ee4682f20e936e9.js" defer></script><script src="polyfills-es5.db54b4d4b3d7204fa98a.js" nomodule defer></script><script src="polyfills.71a6f961ce72fe5922a1.js" defer></script><script src="main.f8ba27a95180bcf0eb71.js" defer></script></body>
+</html>
diff --git a/dist/demo/browser/main.f8ba27a95180bcf0eb71.js b/dist/demo/browser/main.f8ba27a95180bcf0eb71.js
diff --git a/dist/demo/browser/polyfills-es5.db54b4d4b3d7204fa98a.js b/dist/demo/browser/polyfills-es5.db54b4d4b3d7204fa98a.js
diff --git a/dist/demo/browser/polyfills.71a6f961ce72fe5922a1.js b/dist/demo/browser/polyfills.71a6f961ce72fe5922a1.js
diff --git a/dist/demo/browser/runtime.359d5ee4682f20e936e9.js b/dist/demo/browser/runtime.359d5ee4682f20e936e9.js
diff --git a/dist/demo/browser/styles.09e2c710755c8867a460.css b/dist/demo/browser/styles.09e2c710755c8867a460.css
diff --git a/dist/demo/package.json b/dist/demo/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "ngx-device-detector-ssr",
+  "version": "0.0.1",
+  "description": "Ngx Device Detector Demo SSR",
+  "engines": {
+    "node": "12.x"
+  },
+  "main": "server/main.js",
+  "scripts": {
+    "start": "node server/main.js"
+  },
+  "dependencies": {
+    "@nguniversal/express-engine": "^10.0.2",
+    "express": "^4.15.2"
+  },
+  "keywords": [
+    "node",
+    "heroku",
+    "express"
+  ],
+  "license": "MIT"
+}
diff --git a/dist/demo/server/main.js b/dist/demo/server/main.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "release": "npm run pre-release && npm publish dist/ngx-device-detector",
     "dev:ssr": "ng run demo:serve-ssr",
     "serve:ssr": "node dist/demo/server/main.js",
-    "build:ssr": "ng build --prod && ng run demo:server:production",
+    "build:ssr": "ng build demo --prod && ng run demo:server:production && cp -a projects/demo/server/. ./dist/demo",
     "prerender": "ng run demo:prerender",
     "postversion": "node scripts/post-version",
     "bump:version": "node scripts/bump-version"
@@ -68,7 +68,7 @@
     "classlist.js": "^1.1.20150312",
     "conventional-changelog-cli": "^2.1.1",
     "express": "^4.15.2",
-    "ngx-device-detector": "^2.0.1",
+    "ngx-device-detector": "^2.0.3",
     "rxjs": "~6.5.5",
     "tslib": "^2.0.0",
     "web-animations-js": "^2.3.2",

diff --git a/projects/demo/server.ts b/projects/demo/server.ts
@@ -11,7 +11,7 @@ import { existsSync } from 'fs';
 // The Express app is exported so that it can be used by serverless Functions.
 export function app(): express.Express {
   const server = express();
-  const distFolder = join(process.cwd(), 'dist/demo/browser');
+  const distFolder = join(__dirname, '../browser');
   const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
 
   // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)

diff --git a/projects/demo/server/Procfile b/projects/demo/server/Procfile
@@ -0,0 +1 @@
+web: node server/main.js
diff --git a/projects/demo/server/package.json b/projects/demo/server/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "ngx-device-detector-ssr",
+  "version": "0.0.1",
+  "description": "Ngx Device Detector Demo SSR",
+  "engines": {
+    "node": "12.x"
+  },
+  "main": "server/main.js",
+  "scripts": {
+    "start": "node server/main.js"
+  },
+  "dependencies": {
+    "@nguniversal/express-engine": "^10.0.2",
+    "express": "^4.15.2"
+  },
+  "keywords": [
+    "node",
+    "heroku",
+    "express"
+  ],
+  "license": "MIT"
+}
diff --git a/projects/demo/src/app/app.component.ts b/projects/demo/src/app/app.component.ts
@@ -1,5 +1,5 @@
 import { Component, VERSION } from '@angular/core';
-import { DeviceDetectorService } from 'ngx-device-detector';
+import { DeviceDetectorService } from '../../../ngx-device-detector/src/public-api';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',

diff --git a/projects/demo/src/app/server.ts b/projects/demo/src/app/server.ts
@@ -3,9 +3,29 @@ import { ServerModule } from '@angular/platform-server';
 
 import { AppModule } from './app.module';
 import { AppComponent } from './app.component';
+import { Inject, Injectable, Optional, PLATFORM_ID } from '@angular/core';
+import { REQUEST } from '@nguniversal/express-engine/tokens';
+import { Request } from 'express';
+import { DeviceDetectorService } from '../../../ngx-device-detector/src/public-api';
+import { isPlatformServer } from '@angular/common';
+
+@Injectable()
+export class UniversalDeviceDetectorService extends DeviceDetectorService {
+  constructor(@Inject(PLATFORM_ID) platformId: any, @Optional() @Inject(REQUEST) request: Request) {
+    super(platformId);
+    console.log('lol')
+    if (isPlatformServer(platformId)){
+      super.setDeviceInfo((request.headers['user-agent'] as string) || '');
+    }
+  }
+}
 
 @NgModule({
   imports: [AppModule, ServerModule],
   bootstrap: [AppComponent],
+  providers: [{
+    provide: DeviceDetectorService,
+    useClass: UniversalDeviceDetectorService
+  },]
 })
 export class AppServerModule {}