Original subtitles

Now that we built the app for production,

the next step is that we wanna take that code

in the build folder and move it onto a real server.

We wanna upload it to some hosting provider,

to a real server, so that it is made available

to visitors from all over the world.

And now when it comes to uploading that code,

there is one super important thing to realize.

A React Single Page Application

or any Single Page Application actually,

no matter which framework you used, is a static website

which it means that it's only made up of HTML, CSS,

and browser site JavaScript code.

There is no server side code involved.

If we take a look at the output in the build folder

then we have a couple of images and conflict files here

and we have one HTML file, and in the static folder

we have CSS and JavaScript.

And the JavaScript code here is not server side

JavaScript code, it's not node js code,

it is client side, browser side JavaScript code.

And therefore this is code

which executes in the browser, hence the entire build folder

contains no code at all that needed

to be executed on a server.

No node js code, no PHP code, nothing.

You can of course also build your own backend,

your own API instead of Firebase, which we used

as a dummy API in this course,

but that's a totally different story.

I do cover this in my Mern course, for example,

but when it comes to just a react application,

it is just such a static website

and there is no server side code involved.

And therefore, when we want to deploy

such a react single page application,

we need a static side host.

So we need a hosting provider

an offering for hosting a static website.

We don't need a hosting provider that allows us to

run server side code

like no JS or PHP or anything like that.

We don't need that here.

Now, how do you find such a host?

Well, for example, you can simply Google

for a static website hosting provider

and you'll find different comparisons, certainly

also some advertisements and you'll find different results

for hosting providers that help you

with hosting your static site.

For example, Google has a built in service.

AWS has a service that helps you with hosting static sites,

the S free service to be precise.

If you click on here, you can learn more about that.

But here to give you an example, I will go

with Firebase again, but it's just one possible option.

And just because we're using Firebase

as a dummy backend does not mean

that you need to use Firebase for hosting.

You're totally free there.

You can use any hosting provider.

You don't have to use Firebase, not in general

and also not specifically for this demo here.

I simply picked it because it is fairly easy to use

and if we have a look at the pricing,

we can get started for free here

which is also quite nice.

Now to host a site on Firebase,

you need to create an account there, a Google account

and then log into Firebase.

And here I'll use the project we worked on

before in this course already.

And here in that Firebase project,

you can simply create a new one

if you don't have one already, you can pick hosting.

And if you then click on get started,

you'll learn more about how that works.

And it all starts

by installing a certain tool on your system.

So I will just copy that command here,

go back back to my command line here

and then run this command.

On Mac iOS and Linux,

you might need to add pseudo in front of it.

On Windows you don't, to give it the right permissions.

So here I'll add that and enter my password.

And then now this installs this Firebase tools software

on my system.

Now because of dash G, it installs it globally.

So that is now not a project specific tool

and it's also not a react specific tool.

It's just a general piece of software provided by Firebase

for deploying any kind of static site to Firebase.

So let's wait for this installation to finish now

and now that it is finished,

if we go back to Firebase, we can click on next here.

And you see that as a next step

you need to log in.

So you now need to run this command, which should now work.

Now that Firebase tools was installed to log

into your Firebase account.

Now, I am already logged in here.

For you, it might prompt you

for your credentials in the command line here

or it opens a browser tab where you need to log in.

And once you did that, you should also be able to

continue here in the command prompt.

Now once you are logged in, you need to run Firebase in it.

And now this needs to be executed in your project folder

so in this overall react project folder.

Now since I'm using this integrated terminal here,

I am already navigated in there

and hence, I can just run it here.

Now, this command, when you execute it

will ask you a couple of questions.

For example, it will ask us

which Firebase features we want to use

because you can use this Firebase tools

software to administer other Firebase features as well.

But here, we just want to go to hosting and hit space.

The space button on our keyboard to select this option.

And that is the only option we need to select here.

So once you've selected hosting, hit enter

and now you need to choose whether you want to

create a new Firebase project or use an existing one.

And I'll go with an existing one here

and then select this project

which I also opened here in my browser console.

So select that project and hit enter.

And now it asks us a very important question here.

It asks what we want to use as our public directory.

And that simply means

that it wants to know where the files are

that it should deploy.

Now, by default, it uses the public folder here

but that would be wrong here

because public is a folder in our project, but

it is a folder where we can change

the images we use and so on.

The actual output which we want to deploy, lives

in the build folder, as you learned.

So here we don't want to use the default, but instead

manually enter build here

since that's the folder name that contains our files

that should be deployed.

So that's super important.

And if you use another hosting provider like AWS as free

you also want to upload the content

of your build folder to that hosting provider.

Now, as a next step, it conveniently asks us

wherever we want to configure this app as a single page app.

So if you want to rewrite all URLs to index HTML

but that can be a confusing question here.

Why does this matter?

And what is it about?