Angular SSR deployment with ngx-translate implemented

111 views Asked by At

I'm facing an issue with uploading my angular SSR project to Plesk server.

Initially, the project was a single language application, but now the requirement is to make it bilingual. So, I implemented ngx-translate.

Initially, there was a single main.js file, so it worked perfectly, but now we have two main.js files. One for the English locale and second for the Arabic locale.

So the crux of the matter is that how do I deploy the project on Plesk server.

server.ts

import 'zone.js/node';

import { APP_BASE_HREF } from '@angular/common';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { existsSync } from 'fs';
import { join } from 'path';
import 'localstorage-polyfill'
import 'reflect-metadata';

import { AppServerModule } from './src/main.server';
import { LOCALE_ID } from '@angular/core';


// The Express app is exported so that it can be used by serverless Functions.
export function app(lang: string): express.Express {
  global['localStorage'] = localStorage;

  const server = express();

  let distFolder: string;
  const path1 = join(process.cwd(), `Mughrabi/browser/${lang}`);         // Running from the deployed version (production)
  const path2 = join(process.cwd(), 'dist/Mughrabi/browser');    // Running from the source (local development)


  if (existsSync(path1)) {
    distFolder = path1;
  } else {
    distFolder = path2;
  } 

  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/main/modules/express-engine)
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
    extraProviders: [{ provide: LOCALE_ID, useValue: lang }],
  } as any));

  server.set('view engine', 'html');
  server.set('views', distFolder);

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

  // All regular routes use the Universal engine
  server.get('*', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });

  return server;
}

function run(): void {
  const port = process.env['PORT'] || 4200;
  const appEn = app('en');
  const appAr = app('ar');
  const server = express();
  server.use('/ar', appAr);
  server.use('/en', appEn);
  server.use('', appEn);
  // Start up the Node server
  
  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';

run();
// if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
//   run();
// }

export * from './src/main.server';
0

There are 0 answers