Angular Universal and Firebase Hosting (Server-side Rendering with JavaScript

as a server-side friend render service
type render it never just goes away
[Music]
everybody welcome to the angular
universal episode in the server-side
rendering with JavaScript framework
series and in this episode we're gonna
get up and running quickly with angular
universal we're going to be using the
angular CLI to generate a universal
bundle that is a core piece to getting a
server-side render app then we're going
to be using angular Universal itself to
take this Universal bundle and generate
HTML and CSS and then lastly we're gonna
use express to handle the HTTP requests
to send back the dynamically created
HTML and CSS from angular Universal and
in this video we're going to be making
an app called true facts which is really
just a simple list effects that's
generated from an API call now it's not
really that complicated but it's a great
example of how server-side rendering can
help improve your page load so let's
dive down into the laptop and get
started so I'm here in the command line
and I'm going to use the angular CLI to
create a new project so I'm going to use
ng new ng true facts and this will go
and install everything and then now open
it up in my editor so open up the source
folder and I'll open up my app module
and import the HTTP client module so
import from at angular / comment / HTTP
and https off' i that in my ng module
imports so we'll go into the component
now where I can actually go and make a
request with the HTTP client service so
import the HTTP client service from the
same place angular common HTTP and grab
the actual service and we'll inject that
into the constructor and from here I can
say this dot HTTP GET and I'll use an
endpoint that points to the real time
database and now I want to create an
observable of the facts that I'm
retrieving which means I'll have to
import it from arts
so now I can say this stuff facts equals
the facts that we were getting back so
at this point I need to go and render
this so delete all the boilerplate and
I'll create a ul with an Li u star and
g4 say let fact of facts pipe it out to
a sink since this is asynchronous and
then inside of here I can use fact dot
txt and I'll close out the Li so now I
want to go and add my CSS so I'm gonna
go to Styles that's CSS which is all the
global styles and just paste in all of
this basic CSS so now that I've my CSS
I'm going to initialize firebase hosting
to deploy out this website so you make
sure to install the firebase tools and
then once you have them installed use
firebase init hosting I'm going to use
the non SS our angular project because
this won't be setup for server-side
rendering initially and then now that I
have this setup I can actually go out
and I can build my ng application with
ng build - - prod and do a firebase
deploy so now I'm going to open hosting
site so this is my deployed application
and this is a non server-side rendered
version so if we go and actually view
source we can see that we don't have any
of the HTML that represents our app it's
all just references to style sheets and
JavaScript so now if we want to setup
server-side rendering we need to start
off by installing angular platform
server and now that's done we can go to
our app module and we need to use the
with server transition method and
specify an app ID that's just something
unique to the page so now I'm going to
create a new file and call it app server
module TS and this is going to be an NG
module for the server so we're going to
create an NG module here and we also
want to import from angular platform
server and we'll grab the server module
and then we need to import our actual
app so we'll import our app components
and we'll also import our app module and
this way we'll be able to create
our universal bundle from this ng module
so we'll create our app server module
and we'll import the app module and the
server module and we'll make sure that
we bootstrap up our initial app
component so now we need to export this
with a main server TS so the main dot
server TS is how we will export our app
server module but right now we don't
have a way to build this type script to
JavaScript so we need to create a TS
config specifically for this universal
bundle so create a new typescript files
called TS that config dot serve it out
JSON and I want to actually extend from
the TS config we have from before so if
you're not familiar with extends it's
just how we can take one TS config and
then build off of it so now I'm going to
specify some compiler options where I
want to say my out dere is out t SC
slash app and that is what the angular
CLI uses to build out to and we need to
set a base URL for the current directory
and we need to specify that the module
is commonjs and we want to exclude any
test files so it's really important that
you specify that the module is commonjs
because this is the module format that
nodejs needs to use because currently
our module format is es 2015 and that is
not understood yet by nodejs so
typescript will do us a big favor and
convert that to common j/s and then last
thing we need to provide angular
compiler options we need to specify that
our entry module is a p-- slash app dot
server module and use a hash to reach
the actual class name so now with this
written we can export from app slash app
dot server dot module and export right
out or app server module so now what we
need to do is we need to go into dot
angular CLI dot JSON and this is where
we can specify how our app actually gets
built so you can see that there's this
section here called Apps and currently
there's one entry and that is our client
side app this is the default that the
angular CLI sets up for you so
what we want to do is you want to
actually create another entry and this
will be built for the server so what I'm
going to do is I'm going to copy this
object right here and I'm going to paste
a new entry and modify a few things so I
want to say that the platform is for the
server and that the out dere is actually
called function slash dist server and
our main we know is main dot server TS
we can get rid of polyfills we need to
change the TS config and with that we
can go and say ng build - - prod - - app
one because it's an array and one being
the second index in the array we will
build that specific app so now it'll go
out and build it in we have our server
bundle so if we go out to our files we
can see in functions dis server so in
dis server you we can see that we have
our universal bundle generated by the
angular CLI so now that we have our
universal bundle we need to start
working on our server code so the first
thing I'm going to do is I'm going to
initialize cloud functions so I'm going
to use the firebase CLI and say firebase
and knit functions so it's going to go
and do some initial setup for us and
it's going to ask if I want to install
the dependencies right now and so I'm
just going to go forth and do that and
now that that's setup it has created an
index JS file in our functions folder
and for this example actually don't want
to use Java Script I'm gonna want to
write everything in typescript so I'm
just going to delete this and if I'm
going to write in typescript that means
I'm going to need a TS config so I'm
outside of a server folder I'm going to
create an index TS for my server code
and a TS config dot functions dot JSON
and then from here I can create my
compiler options and I want to compile
it to common js4 node my target is going
to be es 2015 and then my root dear is
the current directory and from here I
just want to compile out the index TS
file as my entry file and lastly I need
to specify an out dere and I want to go
out to the functions directory
since that is where we will deploy our
server code so now an index TX I'm going
to create my server so first I'll import
from firebase functions and then I'm
going to import from Express and then
now I need to import from angular
platform server and import the render
module factory function and it's this
function which will allow us to generate
our HTML and CSS and I'm also going to
need to import from the file system so I
can read files and lastly we need to
import zone js4 node and this is really
important so if you don't import this
this is going to totally blow up on you
but this is what angular needs to know
to do change detection on the server so
now I'm going to read my index.html file
from the file system I'm going to get
that from the current directory and make
sure it comes back as utf-8 and so to do
that I actually just need to drag it
into my functions so it reads it from
the correct directory so now I need to
require my universal bundle that was
generated by the angular CLI and we know
that was generated in the disk server
folder so I can require from the Dern
aim slash dist server slash main bundle
and this require will have an object
that we can get called dot app server
module ng factory and we can use this to
generate our HTML and CSS so there's a
bit of a problem when we generate our
universal bundle
it'll be generated with a hash so main
dot hash bundle is but we don't need
this hash because the hash is used for
browser caching and there's no browser
caching needed on the server so we
actually can get rid of this hash so I'm
going to open up the disk server folder
and I'm going to rename main so it's
main bundle j/s and ideally we'd want to
do this in a mated way but for now I'm
just going to rename things so now that
we have our documents
and our Universal bundle we can go and
create our server so I'll create an
Express app by calling expressed as a
function and now I'm going to create a
HTTP handler and I'm going to create a
get route for star star which means
intercept every single route and so from
here I can use the render module factory
method and pass in my app server ng
module Factory and then I can use the
document and then I need to get the
current URL and I can use that by using
the incoming request path render module
Factory returns a promise so I'm gonna
call dot then and get the HTML that was
generated and now from here I can use
Express to send back this HTML but I
want to set caching so I'm going to set
a cache control for max-age 600 and X
aged for 1200 which effectively means
that this content will be cached in the
browser for 600 seconds or five minutes
and it will be cached for 10 minutes on
the CDN level so this cache control
header is really important because it
keeps us from having to go out to the
server every time the user makes an HTTP
request for this document so instead we
will either deliver from the browser
cache or we can deliver from the CDN
level which will be much faster and will
keep the work off the server
now once the 1200 seconds expires we'll
go out and do this process again but for
that timeframe we will have our apps
served from the cache so now that we
have our server vault I need to export
the function for cloud functions I'm
gonna call it SS our app and say
functions that HTTP on request and pass
through the app so now that's done I
need to go into firebase JSON and create
my rewrite so firebase hosting knows
about our function we'll use star star
as the source and then our function name
as we know we called it s s our app
because right here export let s s our
app so now that I have my server code
written I need to transpile it from
typescript to JavaScript so I'm going to
use the typescript command line and say
TS - P
and use the server ts config now right
now I get this error and this is only
due to the version of typescript I'm
using in the version of firebase admin
and then hopefully you won't see this
error but if you do it's benign and we
can actually move past this
but hopefully about the time this video
comes out you won't see it so if we go
to our functions directory we can see
that our index J s is the common J's
version of our server code so since we
have this I'm going to serve and I'm
going to serve locally so on localhost
5,000 you can see that we have our app
up and running and if we go and view the
page source you can see that it actually
uses HTML that was server-side rendered
so this isn't a lot of code but there's
actually a faster way of doing this and
we can use the npm module called angular
Universal Express firebase and this is
just a little simple module I wrote to
help make server-side rendering your
angular apps a lot easier so I also need
to install this into the functions
folder because this will have to be
deployed out to cloud functions and now
I can actually go and delete almost all
of this code and I'm going to import
start as angular Universal from angular
Universal Express - firebase and rather
than use this I can say angular versal
dot trigger and then from here I can
provide some config options so I can say
that the index page is located at the
current directories index dot HTML the
main is located at dis server main
bundle I'm going to want to enable prod
mode I'll set a CDN cache X brief or
1200 and the browser cache X brief or
600 so I'm gonna go and deploy this app
to production but before I can do that I
need to make sure that I have all the
needed modules in the package.json in my
cloud functions folder and that's
because when you deploy your app to
cloud functions it's going to install
all the dependencies needed to run your
server code and if it's not listed in
that package that
JSON then it's going to have an error
and not be able to run so a simple way
to do that is I go into my main package
JSON for my angular CLI app and I go and
I copy all of these dependencies and now
go to my functions package Ehsan and I
just paste it in and then I also I'm
going to need Express so now I'll open
up the terminal CD into functions and
install and then now I can deploy by
using firebase deploy so now our app is
deployed and so I'll go and visit this
in my browser so now here in production
you can see my url is SS r - angular
firebase app comm and we have our app up
and running and if I view the page
source you can see that we have our
server-side rendered contents so that's
how you set up angular Universal on
firebase hosting in the next video we're
actually gonna go and profile this
website using the chrome dev tools and
web page test and we're gonna see how it
performs compared to the non server-side
rendered version so make sure to
subscribe so you are notified when that
video gets out so that's all for today
if you liked this video make sure to hit
that thumbs up button and otherwise I
will see you in the next video in this
project I'm gonna be building a little
apps fault that's not what it's gold we
are inside the computer alright this is
it keep rolling do a lot