Deploying Angular Universal v6+ with Firebase 🚀 🔥

Disclaimer: This blog post will be a focused step-by-step tutorial of how to deploy an Universal App using Hosting. For any explanations about Angular Universal and Server Side Rendering, Angular has a on their website. Angular Firebase great documentation You can also find the source code on . Github Requirements node.js (I am using v8.11.1 for this tutorial) Angular 6+ (I have written a for deploying Angular < v6) similar article Part I: Set Up Angular App 🛠 1. Install global dependencies We are going to use and in command line to build and deploy your app. @angular/cli firebase-tools @angular/cli ≥ 6.0.0 firebase-tools v3.18.4 2. Create a new Angular project Using , we are going to create a new app. In this case, I will name it . @angular/cli angular angular-universal-firebase 3. Install @angular/platform-server To build and render your app, we need to install . universal @angular/platform-server 4. Add Server Side Rendering Config In , is changed to . This defines how our project is structured and the build configurations for this project. We would want to add a configuration for the project in the path. @angular/cli@v6.0.0+ .angular-cli.json angular.json server projects.PROJECT_NAME.architect Note that we’ve added that defines the and config for the server side version of our app. server builder options 5. Modify project output to Firebase folder For simplicity, we will build the browser version of our app in the same directory as where we are building our sever version to be server side rendered in Firebase. To do this, edit ‘s to . angular.json PROJECT_NAME.architect.build.options.outputPath functions/dist/browser 6. Create necessary files for app server version src/app/app.server.module.ts Create a new module for the app’s server version. https://github.com/aaronte/angular-universal-firebase/blob/master/src/app/app.server.module.ts src/main-ssr.ts Create an entry point for the module. This is the file we referenced in the server configuration in . server main angular.json https://github.com/aaronte/angular-universal-firebase/blob/master/src/main-ssr.ts src/tsconfig.app-ssr.json Create the for the server version. Similar to the browser version except which will reference the entry module for the server version that we just created. This is also referenced in as . tsconfig angularCompilerOptions.entryModule angular.json tsConfig https://github.com/aaronte/angular-universal-firebase/blob/master/src/tsconfig.app-ssr.json 7. Include server transition in app’s browser module Since we are sending the server version of your app to the browser before the browser version, we need to add when adding in . .withServerTransition({ appId }) BrowserModule imports https://github.com/aaronte/angular-universal-firebase/blob/master/src/app/app.module.ts Now we are ready to build the server and browser versions of our app! 8. Build browser and server versions of the app Using , we will build the two versions of the app. @angular/cli : This will build the browser version of the app with configurations. ng build --prod prod : This will build the server version of the app. It will generate a file that we can use to render our app using . ng run PROJECT_NAME:server ngFactory node When both builds are done, you should now have a folder in your directory with and folders in it. Awesome!!! 🎉 functions root browser server Part II: Deploying with Firebase 🚀 [1] Before continuing, you should have had created a firebase project here . I named mine _angular-universal-firebase_ for this case. 1. Log in to ` ` in the command line firebase Log in to firebase in the command line with the same google account you used to create your firebase project in [1]. 2. Initialize Firebase in the `angular` project Initialize firebase configurations through the command line: Select and for features to set up Functions Hosting Firebase set up configuration (Functions and Hosting) Javascript as Cloud function language for simplicity Select the firebase project you created in [1]. (In my case, it’s . angular-universal-firebase Accept all defaults in this stage; we will configure the rest in later steps. (In this tutorial, we will write our functions in ). Javascript 3. Add package dependencies to `functions` Since we are using a node server through , We need to include dependencies in to render the server version of the app. firebase-functions angular functions/package.json Aside: Right now, I don’t know any way to mitigate this duplication of dependency declaration since as far as I know, you can’t access files outside the _functions_ directory in any _firebase-functions_ javascript files. But if you know a way, please let me know! https://github.com/aaronte/angular-universal-firebase/blob/master/functions/package.json 4. Install packages in ` ` directory functions Install da dependencies! 5. Create Firebase function to serve the app We are going to use Firebase function type to send the response from our express server. There are a lot of things going on in this file but the most notable are: functions.https.onRequest Importing which was generated in . AppServerModuleNgFactory Part I: Step 8 — server version Creating an variable which is getting the file we generated from . index index.html Part I: Step 8 — browser version Using to generate an file that we send as a response with and parameters. renderModuleFactory html url document parameter determines which route of the app is going to be rendered. Specifying this allows to build the html of that route. url renderModuleFactory is the full document HTML of that page that should be used to render. In this case, it will be the browser version of of the app. document index.html https://github.com/aaronte/angular-universal-firebase/blob/master/functions/index.js 7. Configure Firebase hosting Now that we have built the function to render pages, we need to change the firebase hosting configuration to use this function. Change the in . The first entry is to send static files (css and js) through our public folder. The second entry is to direct all requests to the function. hosting.rewrites firebase.json ssr https://github.com/aaronte/angular-universal-firebase/blob/master/firebase.json 8. Copy all content of `functions/dist/browser` to `public` Since we want to run our application like a normal application, we want to put all the files generated by building our platform for the browser in the public folder. This means the html, js, css, etc in the functions/dist/browser should all be present in the public folder. Note: We have to, however, change the name of to because firebase won’t run the function if it finds in the folder. index.html index2.html ssr index.html public 9. Deploy to Firebase 🚀 🔥 If all things went well, you should be able to deploy your app to Firebase: That’s it! 👍 You can check out the source code on . Github I hope this tutorial was helpful in some way! If you have any feedback or questions, add them on the to ensure everyone looking at the code would benefit. 😄 Github issues Happy coding! 😃