So let's dive into this deployment process, starting with a web application, a web site which has no server
side code which is only powered by HTML, Javascript and CSS and which therefore needs a static host.
Now we clearly wrote our code, we tested it throughout this course and if you're working on your own
application, you of course also at some point tested it,
now we need to optimize it and build it for production and
then we can deploy the output.
Here's this practice app we worked on and we wrote the code, we tested that,
now regarding the optimization and producing the deployment output and so on, for that we've got webpack,
we got our webpack configuration, both a production configuration and a development configuration for
testing this, for bundling this and for production, for also optimizing this which webpack will do automatically
if the mode is production.
So here in package.json, we got this build prod script and now we can simply run this,
we can run npm run build: prod
and what this will give us is an output which we can ship to a web server to then host it there, to a static
web server to be precise.
So here, we got our dist folder and in the end we just need to take that entire dist folder content and
deploy that.
Now the only adjustment we specifically need to do here is our output, our Javascript files of course
have this random hash in there and we should respect this in our imports.
So on these Javascript files in the end, you can copy that file name and take the my-place file and replace
this import here in assets index.html with this name here and do the same for share place.
Now you can also set up more elaborate build workflows, where the HTML file is automatically adjusted
but this requires advanced webpack knowledge and so on and therefore we'll take this manual approach
here.
Now once you did that, once you prepared these script imports in the two HTML files and you have your
optimized script outputs here, you're ready to go and you're ready to upload it to a web server. We can
ignore this warning here by the way, it basically warns us that our my-place output is pretty big,
well that's the case because I'm importing the sanitize-HTML library there which is rather big,
another reason for why you should do this on the server side and not on the client side by the way
but we have it here for a good reason because in this app, we have no server side code, so we have to
live with that.
Now once we adjusted everything, we built everything, we're ready to ship this onto a static host.
Now as I mentioned you could set up your own computer, connect it to the Internet, allow incoming requests
as well and configure everything on your own,
well this however is not easy to do.
It's easy to do in a wrong and an insecure way so that your server could easily get compromised and even
in that way, it still requires some network knowledge to set up such a computer and connect it to the Internet,
therefore what you would typically do is you would go for paid hosting.
You can search for a static web hosting for example and you'll find a couple of services, both in the
advertisements as well as in the real search results which help you host a static web site, for example
AWS, the Amazon Web Services have a service that makes that easy, the S3 service.
There are other services as well
and one service I like because it's really easy to get started with is Firebase hosting. Firebase is
a Google service which offers more than just the hosting
but here we just need the hosting so we can use that. You can click on that Firebase hosting search result
here and it takes you to the Firebase documentation where you can learn more about Firebase, Firebase
hosting and how to use it
and of course here you can also learn more about the other Firebase services in case you should be interested.
Now one important word about pricing, Firebase is free to get started with
but it does have paid parts or paid services or certain usage limits after which it is no longer free
and you can check the Firebase pricing pages to learn more about the pricing,
you can get started for free without a credit card though and it will basically tell you when you need
to upgrade
but be aware that not everything is free there, of course you will have to pay for the more advanced
services or more heavy usage but getting started is free.
Now here, what we can do is we can simply click on get started here and we'll learn how we can get started
with Firebase hosting and it all starts with installing the Firebase CLI for which you can click on
this link here to be taken to a page where the installation is explained and you can simply download an installer
here, an alternative to downloading an installer here is that you simply use npm for the installation
and you run this command here on your machine anywhere.
So here I'll run it in this built-in terminal but that really doesn't matter. On Linux and Mac, you might
need to add sudo in front of this command to get the right permissions, on Windows
this is not required.
So after you hit enter, you might be prompted for a password and thereafter this Firebase package
will be installed globally on your system and we'll need that package to then deploy our application.
So let's wait for this to finish and once this is finished, we can run Firebase init here in our project
folder,
so make sure you navigate into your project folder or you use the built-in terminal in the Visual Studio
Code which is automatically navigated into the project folder. Once you run init here, you might be prompted
to log in first, so simply go back to Firebase and create an account there,
you don't need to pay anything, it's free, just create an account or log in with your Google account
and once you do have an account, log in here in the console by entering your email address and thereafter
your password when you're being prompted for it.
Once you did log in, you should see this menu here where you can choose from a variety of Firebase
services and we need the hosting service,
so navigate there and press space to select it and thereafter press enter.
Now you can choose your option here and here
I want to create a new project,
this talks about Firebase projects which are created on Firebase servers and we don't have one yet
and you can enter any name here,
I'll name it js-static-hosting,
you can choose any name you want here.
Now this actually was the project ID, now you can choose a project name which can be the same though
so I'll go with the default and just hit enter and not provide a different name
and now this will set up this Google Cloud Platform, which behind the scenes powers Firebase project
and make sure that this is all configured on Firebase servers.
So let's wait for that to finish and once this finished, you're prompted to tell Firebase what your public
directory is
which in the end means which is the directory where your deployable files is seated and in my case that's not
the default,
a folder named public
but instead it's this dist folder.
So we should write this here to make it clear that the dist folder is the folder we wanted deploy.
Now once you hit enter, you're asked
if you want to configure this as a single page app, which means that anything the user enters in the URL
is redirected to the root index.html file and here I don't want to do that,
so I'll enter no here, an n because we have different folders with different HTML files,
I don't want to redirect all requests to this top level index.html file.
So enter n here and hit enter, you will also get a 404.html file now which is a default error
page which you of course can customize in case the user enters an invalid URL and when you're
asked if you want to override this index.html, you should choose no of course because we want to
keep the existing index.html file in there and with that, we're done.
Now you can run Firebase deploy here and it will go ahead and deploy this project which was just configured
to Firebase servers, which means it uploads your files in the dist folder to Firebase servers and configures
everything you need there and
once this is done, it gives you the URL where where you can find your application.
So now here if we enter a new tab, we can visit our application here, also check the console,
the only error I'm getting there is the favicon which is not found and
that's OK and now in here if I try to get my current location, I can allow this and check whether
that works, whether I am being located here,
yes that works. I can click share place and enter my shared place URL here to see this page.
So this all works,
this is our deployed project,
our deployed static project I should say which only consists of HTML, Javascript and CSS files
which we now deployed to Firebase and of course the exact deployment steps,
for example the command line tool which we used here will differ from host to host,
the general idea regarding the fact that you deploy everything in this dist folder and so on will always
be the same though,
so that's something which does not change.
Also worth noting, in Firebase case you get a firebaserc and a firebase.json file which allows
you to configure the exact hosting setup and you learned more about the available options there,
of course in the official documentation in case you're interested.
So check this documentation out if you plan on using Firebase, if you plan on using a different service
which of course is fine too,
there are many great services,
check out this services documentation to learn about the exact steps you need to execute to get
your code onto this services
servers.