9

I want to deploy angular app with ssr. I recently discovered that there are schematics of nestjs in angular that adds ssr functionality automatically but I didn't find any tutorial or explanation about how to deploy this project so I could get the ssr.

my steps were:

  1. create a new angular app with the cli.
  2. adding nestjs via "ng add @nestjs/ng-universal
  3. adding cloud functions and hosting with firebase cli
  4. build everything
  5. how do I deploy this so the app will be on the hosting and the nestjs server on the cloud function and will be called to prerender.
yugantar kumar
  • 1,982
  • 1
  • 23
  • 33
Lagistos
  • 3,539
  • 1
  • 10
  • 18

1 Answers1

5

You can simply hit firebase deploy once you got your index.js file transpiled using webpack. Similarly you can build a pipeline for that.

Handling functions should look like that:

import * as express from 'express';
import * as functions from 'firebase-functions';
import { AppModule } from './app.module';
import { Express } from 'express';
import { ExpressAdapter } from '@nestjs/platform-express';
import { NestFactory } from '@nestjs/core';

const server: Express = express();

// Create and init Nest server based on Express instance.
const createNestServer = async (expressInstance: Express) => {
  const app = await NestFactory.create(
    AppModule,
    new ExpressAdapter(expressInstance)
  );
  app.listen(4048);
};

createNestServer(server);
exports.angularUniversalFunction = functions.https.onRequest(server); // Export Firebase Cloud Functions to work on

As you wrote that you have everything working fine I assume you know how to set up all the others for SSR. In other case check this demo repo https://github.com/kamilmysliwiec/universal-nest

Edit 20-1-2020

Based on @TayambaMwanza questions I've added also my (server-related) webpack configuration:

/* Custom webpack server properties. */
const dotenv = require('dotenv-webpack');
const nodeExternals = require('webpack-node-externals');
const path = require('path');
const webpack = require('webpack');
const WebpackConfigFactory = require('@nestjs/ng-universal')
  .WebpackConfigFactory;

// Nest server's bundle for SSR.
const webpackConfig = WebpackConfigFactory.create(webpack, {
  server: './server/main.ts'
});

// Ignore all "node_modules" when making bundle on the server.
webpackConfig.externals = nodeExternals({
  // The whitelisted ones will be included in the bundle.
  whitelist: [/^ng-circle-progress/, /^ng2-tel-input/]
});

// Set up output folder.
webpackConfig.output = {
  filename: 'index.js', // Important in terms of Firebase Cloud Functions, because this is the default starting file to execute Cloud Functions.
  libraryTarget: 'umd', // Important in terms of Firebase Cloud Functions, because otherwise function can't be triggered in functions directory.
  path: path.join(__dirname, 'functions') // Output path.
};

// Define plugins.
webpackConfig.plugins = [
  new dotenv(), // Handle environemntal variables on localhost.
  // Fix WARNING "Critical dependency: the request of a dependency is an expression".
  new webpack.ContextReplacementPlugin(
    /(.+)?angular(\\|\/)core(.+)?/,
    path.join(__dirname, 'apps/MYPROJECT/src'), // Location of source files.
    {} // Map of routes.
  ),
  // Fix WARNING "Critical dependency: the request of a dependency is an expression".
  new webpack.ContextReplacementPlugin(
    /(.+)?express(\\|\/)(.+)?/,
    path.join(__dirname, 'apps/MYPROJECT/src'), // Location of source files.
    {}
  )
];

webpackConfig.target = 'node'; // It makes sure not to bundle built-in modules like "fs", "path", etc.

module.exports = webpackConfig; // Export all custom Webpack configs.
Daniel Danielecki
  • 8,508
  • 6
  • 68
  • 94
  • Is this literally all you need to do after running ng add @nestjs/ng-universal and installing firebase tools? Do I still need to mess with webpack.config? – Tayamba Mwanza Jan 19 '20 at 15:03
  • @TayambaMwanza you need to use WebpackConfigFactory.create for the SSR part. – Daniel Danielecki Jan 19 '20 at 15:45
  • Ok, there are just some errors, I'm using this config: https://stackoverflow.com/questions/58447458/deploy-angular-8-universal-ssr-application-on-firebase I've figured out already you need this.externals = [/^firebase/] instead of externals: [/^firebase/ ] but ouput is giving me issues, should I open another question? – Tayamba Mwanza Jan 19 '20 at 18:22
  • @TayambaMwanza please see the edit, hope so it helps. This is my all server-related webpack logic I had. I didn't have to deal with `firebase` in `externals` at all to have it working. Maybe opening a new question would help. – Daniel Danielecki Jan 20 '20 at 08:13
  • Thank you, "apps/MYPROJECT/src" should I change this to my project name? – Tayamba Mwanza Jan 20 '20 at 15:16
  • @TayambaMwanza yes :) – Daniel Danielecki Jan 20 '20 at 15:41
  • Thanks a bunch, this works with tweaks combination of the article I posted above, would it be alright if I send you a word document or google doc, with steps from the article posted above and your material as well, then can update the post with full instructions? – Tayamba Mwanza Jan 21 '20 at 05:18
  • @TayambaMwanza could you share the instructions please. I tried to deploy angular ssr using nestjs. but I have problem with firebase functions – Sulaiman Triarjo Feb 01 '20 at 12:29
  • @SulaimanTriarjo Hi, I assumed it worked because it successfully deployed but when I visited the site it didn't work, I was under a deadline so I switched to a non ssr mode. I see that for firebase they are planning a schematic for universal, maybe we should open an issue for a nestjs universal schematic for angularfire too. https://github.com/angular/angularfire/issues/2304 – Tayamba Mwanza Feb 02 '20 at 14:39