Original subtitles

When deploying a Single Page Application,

it is important to understand that there is a difference

between server-side routing and client-side routing.

In this demo application which we built,

which we're currently deploying here, we use routing.

We use React Router to define routes

and load different components based on the URL.

But there is one super important thing to understand here.

All that code executes in the browser.

React Router is a browser-side package.

It's even called react-router-dom.

So it runs in the browser.

It has a look at the URL

and changes what we see on the screen

after our React app was loaded by the browser.

And why does this matter?

Well, if I enter a URL, and I hit Enter,

and I then see the appropriate page on the screen,

then that's the result of React Router having a look

at the URL after the React app was loaded

and then bringing the correct component onto the screen.

But when I enter a URL and hit Enter,

this doesn't all happen in one step.

Instead, we have a server and a client.

Client is us, the user using a browser.

The server is a remote machine

which hosts our production-ready React code,

so the code we're currently deploying.

That will live on some server, not on our local machine

and not on the machines of our users.

It's on some servers.

Now, if a user then visits our page, enters the domain,

and then maybe some path thereafter,

this user sends a request to the server,

a request for this website.

Now, it's important to understand

that this request contains the full URL that was entered,

and that request then hits the server.

Now, the server sends back a response

which contains all the CSS and HTML code,

but also our React code,

this React code which we built and uploaded.

Now, this React code contains the React Router code,

which will have a look at the path,

so the part of the URL after the domain,

and it will then evaluate that

and bring the correct component onto the screen.

It will render the component which we defined for this path.

But this only happens once the response was received.

Now, actually the URL which the user entered

with the specific path entered by the user,

like /some-route,

is also part of the requests already though.

So the request which reaches the server contains this path.

It contains this full URL.

And by default, a server would then look for different files

which it would return as a response for different URLs.

That's how servers typically work.

Different URLs trigger different actions

and will lead to different responses.

Now, here, we actually don't want that.

Here, when hosting a Single Page Application,

we wanna ignore the path,

so the part after the domain on the server,

and always return the same response,

the same HTML file and the same JavaScript files

no matter which path the user targeted.

We need to do that

so that our React application will start up,

and then it's this React application

and React Router, which is part of that application,

which will take another look at that URL

and then render the correct content on the screen.

So the server needs to ignore that path /some-route.

This needs to be ignored.

And by default, a server does not do that.

Hence, you need to configure your servers

so that it does do that.

And you will need to look up the documentation

of your specific hosting provider

to find out how you configure it there.

In the case of Firebase, it's very easy

because they ask you whether you want to ignore that.

This is exactly this point which we're seeing here,

if all URLs should be rewritten to index HTML

so that no matter which kind of URL the request was sent to,

we always return the same HTML file,

which then, in turn, requests always

the same JavaScript code, no matter what the URL was.

So therefore, here, we wanna enter y for yes

and let Firebase set up this configuration.

And that is this important configure the server step,

which I mentioned earlier in this section.

You need to configure your servers

such that the URL and the path in the URL

is ignored on the server,

and you always return your Single Page Application code

no matter what the URL was.

So here, we enter y and hit Enter.

And now, we don't need these automatic builds and deploys,

so we can choose n for no here.

And for this question

whether the index.html file should be overwritten,

we also wanna choose no

because we wanna go with that HTML file

which was generated by the npm run build command.

And now, with that, Firebase deployment is configured.

It wasn't deployed yet, but it's configured for deployment.

Hence now, we can click Next here again,

and now we just need to run this command

to finally deploy our page.

So here, if I now run firebase deploy,

that configuration will be used to now deploy our code

in the build folder to Firebase.

So now, this uploads our code,

and once it's done, it even gives us a pointer at the URL

where we can view our application.

And here it is.

And that's now our React application

hosted by a real server.

So now, that's not locally on our machine.

Instead, that's coming from a real server

out there in the web, and anyone could visit this page.

Now, on the Hosting console here on Firebase,

if you reload this Hosting page now,

you can configure this deployed application.

You can add a custom domain if you want to.

You can see a deployment history here.

You can see certain usage stats, and so on.

Now, if you ever wanna take your page down,

you can do this with the Firebase tool too.

Here, I'll do it, and I'll run, firebase hosting:disable.

Now, with that, I'll disable Firebase hosting for my page

and confirm this.

And now, here on this hosting screen, if I reload this,

I can select my old deployment down there

and click delete to fully delete everything here.

Now, of course, you don't wanna do that

as long as your users can reach the site.

But since this was just a demo here,

I also wanted to show you

how you can then delete everything.

And that is how you can prepare your React application

for deployment, and how you can then deploy it,

in this case, to Firebase as an example.