Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Deploy nestjs in firebase cloud functions

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.
like image 551
Lagistos Avatar asked Jul 17 '19 17:07

Lagistos


1 Answers

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.
like image 50
Daniel Danielecki Avatar answered Sep 28 '22 04:09

Daniel Danielecki