In the last lecture we built our files,
now I want to deploy it and you're really free to choose which ever static file host you want to use.
Simply follow the instructions of your chosen host to upload the files in the build folder and make
sure that you always return the index.html
file. I'll use firebase hosting,
so in the firebase console of the project we already have,
we can click on hosting and there on get started, we get instructions. Now for firebase hosting,
we actually need to install an extra tool globally on our machine,
if you don't want this simply follow along with another static host of your choice like AWS S3
.
check out the documentations of whichever host you chose to learn how to deploy to that specific
page.
So here I'm going to copy the command and with sudo on Mac,
on Windows you don't need that and then the copied command, I can install these firebase tools globally
on my machine.
Now it will take a couple of seconds for this to finish,
we can already jump ahead and have a look at the second step.
There you see that
once the tools were installed, you can run firebase login to authenticate with your firebase account and
then initialize your project to be the firebase project you want to deploy and then deploy with the
deploy command,
now we'll do this together.
So let's wait for days to finish,
once it did finish, you have to run the firebase login.
I already did this I'll continue with firebase init and now you're asked which features you want to use here,
now we can just check hosting by pressing space after navigating to that option,
we don't need any of the other,
then hit enter.
Now you choose the project you want to use,
so I'll do that here too.
Now you asked what your public directory is and for us, that's not the default of public but build,
that tells firebase which files to upload and we want to upload all files in the build directory,
So I'll enter build.
Now do we want you configured as a single page app?
yes we do.
This will automatically set this up to always return index.html
as it says here
so enter Y for yes.
Now it asks us if it should overwrite the index.html file it found,
the answer is No
so N because we obviously want to keep the one generated by our project and with that we're done. Now
in the case of firebase, this gave us a special firebase rc file and a firebase.json file to configure
this project. FirebaseRC simply contains information about this project,
obviously you should replace this with your project ID,
if you ever download my project and want to use that and firebase.json this is where the hosting is configured,
where the public folder is set up to be the build folder, where it ignore some files to not upload
these and where it also rewrites all incoming requests to return index.html and for firebase, you
can read more in their documentation, for your favorite static site hosts,
you pick their docs, of course.
So for firebase with all that set up, we can deploy this with firebase deploy, for other hosts,
you might need to manually upload the files there, that also shouldn't be too difficult though.
So with that, it's preparing our build directory for upload as it's saying, it uploaded it and now we can visit
the application here under this hosting URL and there also are ways for assigning your own domain,
just check out the firebase docs if you're interested. Let's visit this page
and now there, we see our application running as it ran on our local machine.
So there of course we can now also login, it's using the same database behind the scene and then also
start building our burger here, order that and so on.
This is now our application running on a real server.