So let's dive into some theory first,
it's important to understand that there are two main kinds of web applications web sites you could be
building.
One is a web site that only consists of a bunch of HTML files, some Javascript and some CSS,
this is what we actually worked on for the majority of the course.
We didn't have any server side code there, any code that needs to be executed outside of the browser
of the user
but in the Node.js module we did have a look at that because Node.js is a Javascript runtime which
allows us to run Javascript anywhere including on a server,
so on a computer which runs somewhere in the web, which users can send request to but where they don't
see the code,
so not code that runs in the browser and therefore on the machines of our end users but code that runs
on a server we rent, we pay and we put our code on.
Now for server side code, Node.js is not our only solution or our only alternative,
we could write this code with PHP and so on
but since this course is about Javascript and Node.js is a runtime for Javascript,
I of course picked Node.js here.
So these are the two kinds of applications we have - one which only has client side code and one which
might also have client side code but which also has code that needs to run on a server, like in this Node.js
example.
Now in the client side code in the left case here, all we need to serve this web site to our users is
a so-called static host
This is a host, this is a web server, a computer configured such that for incoming HttpRequests, it returns
the HTML files and the Javascript and the CSS files and maybe any images you're using but that it
does not run any Javascript code or any server side code on itself,
so put in other words, it's a machine, it's a computer somewhere in the Internet with its own IP address
attached to it and connected to a domain maybe which simply does not have Node.js installed on it,
instead you just put your files onto that server, configure it briefly to return these files for the
incoming requests and you're done.
Now you could configure such a computer all on your own but typically you would use certain services
for that which makes this configuration and so on way easier and more secure
and you simply pay for these services then
and I will show you examples for both deployment scenarios, static and non-static
in this module. Speaking about non-static, you could also call this dynamic, you need a dynamic host. You
need a computer somewhere in the Internet connected to the Internet in both directions so that it also
is able to handle incoming requests which has, in our case here, Node.js installed on it
so that on this computer, you can execute Javascript code which is not possible in the left scenario
but in the right scenario, the server side code scenario, we have a web server which does not just return
HTML, CSS and Javascript files to the users, so that the files are then handled locally on these user's
machines but which in addition to that, also is capable of running, in our case Javascript code, on the
server itself by simply installing Node.js there in the end
and by of course configuring it correctly.
Now just like in the static scenario, you could theoretically setup such a machine all from scratch on
your own but you need advanced server administration knowledge for that to do that in a secure and scalable
way,
therefore in both scenarios, you would typically use certain services for that - paid services which do
the heavy lifting for you and allow you to simply put your files there, write some basic configuration
and be done for it.
So these are the two options - a server that just needs to host and provide these static assets, there example
hosting services would be S3 by AWS, so by Amazon Web Services, Firebase hosting and many more.
If you google for static web hosting and so on, you will find plenty of results, in the right scenario
we need a server which is able to execute our files or our scripts on the server, our server side scripts
at least
and there example services would be AWS Elastic Beanstalk which is a service by Amazon Web Services,
Heroku and again other services as well.
Now this is the overview,
we'll have a look at both approaches in this module. Before we move on to the concrete deployment with
the example services I picked for this module, I have first of all want to walk through the general deployment
steps though.
So what's the deployment process?
Of course it all starts with us developing, with us writing our code,
that's what we did so far throughout the course.
We also want to test our code,
we want to make sure it's error free,
it's secure,
it has no bugs,
that's also what we did throughout this course, we continuously went back into the browser and tested
our code there.
So this is also an iterative process here,
we write code, we test it,
we go back, fix bugs and so on.
Now once we're done with all of that, we can do some optimizations,
we can write fallbacks to offer a good browser support,
we want to look up the browser support we need.
We also use build tools like Babel together with webpack to optimize and shrink our code and add potential
polyfills which we need. Then we can build for production, typically
also with the help of webpack which then shrinks our code even more, which shortens the function names
in the code it outputs
so that we ship and deploy as small of a code package as possible. For the code that runs in the browsers
of our users,
that's important so that the application there is able to start up as quick as possible, so that the
code there is loaded as quick as possible and we're not causing any unnecessary delays and therefore
a bad user experience.
Now this is also an iterative process you could say because you might want to optimize your code, optimize
performance, something we'll have a look at the performance optimization module and then you want to
test it again in production, so build your code for production, test it locally on a server and so on
and once you're fully happy with the result, you deploy the output,
so the built and optimized code, you now take that and put it onto a server.
Now important, this here all applies to the scenario where we have client side Javascript code,
so code that runs in the browser. For our server side, our Node.js code,
you could actually say that the optimization and build for production part is not that important because
since you ship it on your server and users never will download this code, it doesn't need to be as small
as possible,
it can be bigger, it doesn't have to be optimized because it's just running on your server which is super
fast typically and you save the time where the code would need to be downloaded.
So this all applies to the code which runs on a client, not all of that, specifically not the optimization
and build for production part applies to server side code, at least not to the same extent.
So now with that, let's have a look at that process in practice by having a look at both deployment scenarios -
deploying a static app,
so this left case and deploying app with server side code, this right scenario here.