Ad
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:
- create a new angular app with the cli.
- adding nestjs via "ng add @nestjs/ng-universal
- adding cloud functions and hosting with firebase cli
- build everything
- 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.
Ad
Answer
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.
Ad
source: stackoverflow.com
Related Questions
- → Make a Laravel collection into angular array (octobercms)
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → Angularjs not working inside laravel form
- → Analysis of Flux implementations
- → how to write react component to construct HTML DOM
- → angular ng-repeat and images in a row
- → Conditional BG Color on AngularJS
- → Should I 'use strict' for every single javascript function I write?
- → getting the correct record in Angular with a json feed and passed data
- → "Undefined is not a function" at .toBe fucntion
- → angularjs data binding issue
- → Angular / JavaScript auto hydrate an instance
- → Convert generic text string in json object into valid url using Angular
Ad