Deploying your Universal application on Cloud Functions for Firebase
After setting up your application with Angular Universal as outlined in Getting Started, you're now ready to build your application for Firebase Hosting & Cloud Functions.
Cloud Functions for Firebase lets you automatically run backend code in response to events triggered by Firebase features and HTTPS requests. Your code is stored in Google's cloud and runs in a managed environment. There's no need to manage and scale your own servers. Learn more about Cloud Functions for Firebase.
If you don't already have the Firebase CLI installed, do so:
npm i -g firebase-tools
firebase login
Then inside your project root, setup your Firebase CLI project:
firebase init
Configure whichever features you'd want to manage but make sure to select at least functions and hosting. Choose Typescript for Cloud Functions and use the default public directory for Hosting.
After you're configured, you should now see a firebase.json file in your project root. Let's add the following rewrites directive to it:
{
// ...
"hosting": {
// ...
"rewrites": [
{ "source": "**", "function": "universal" }
]
}
}
This will inform Firebase Hosting that it should proxy all requests to Cloud Functions, if a file isn't already present in the hosting directory.
Let's go ahead and modify your package.json to build for Cloud Functions:
"scripts": {
// ... omitted
"build": "ng build && npm run build:ssr && npm run copy:hosting && npm run build:functions",
"copy:hosting": "cp -r ./dist/YOUR_PROJECT_NAME/* ./public && rm -f ./public/index.html",
"build:functions": "npm run --prefix functions build"
},
Change the build script in your functions/package.json to the following:
"scripts": {
// ... omitted
"build": "rm -rf ./dist && cp -r ../dist . && tsc",
}
You will either need to install the dependencies from the functions/package.json or add them to your root package.json.
Finally, add the following to your functions/src/index.ts:
export const universal = functions.https.onRequest((request, response) => {
require(`${process.cwd()}/dist/YOUR_PROJECT_NAME/server/main`).app()(request, response);
});
In the server.ts file generated by the Angular CLI ensure that the index.html is being read from the correct place.
As of writing the Angular CLI generates:
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index.html';
this needs to be changed to:
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : join(distFolder, 'index.html');
So that the index.html is read from the correct dist folder.
You should now be able to run npm run build to build your project for Firebase Hosting and Cloud Functions.
To test, spin up the emulator with firebase serve. Once you've confirmed its working go ahead and firebase deploy.
Note: Universal will now SSR your application and serve it, depending on how you have your deployment setup some assets may fail to
serve because the Cloud Function is at a different route than the APP_BASE_REF configured.