Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,160 --> 00:00:06,200
When deploying a Single Page Application,
2
00:00:06,200 --> 00:00:10,000
it is important to understand that there is a difference
3
00:00:10,000 --> 00:00:13,670
between server-side routing and client-side routing.
4
00:00:13,670 --> 00:00:16,140
In this demo application which we built,
5
00:00:16,140 --> 00:00:20,100
which we're currently deploying here, we use routing.
6
00:00:20,100 --> 00:00:22,870
We use React Router to define routes
7
00:00:22,870 --> 00:00:26,790
and load different components based on the URL.
8
00:00:26,790 --> 00:00:30,870
But there is one super important thing to understand here.
9
00:00:30,870 --> 00:00:33,900
All that code executes in the browser.
10
00:00:33,900 --> 00:00:37,490
React Router is a browser-side package.
11
00:00:37,490 --> 00:00:40,560
It's even called react-router-dom.
12
00:00:40,560 --> 00:00:42,800
So it runs in the browser.
13
00:00:42,800 --> 00:00:44,050
It has a look at the URL
14
00:00:45,050 --> 00:00:47,760
and changes what we see on the screen
15
00:00:47,760 --> 00:00:50,713
after our React app was loaded by the browser.
16
00:00:51,810 --> 00:00:53,330
And why does this matter?
17
00:00:53,330 --> 00:00:58,330
Well, if I enter a URL, and I hit Enter,
18
00:00:58,630 --> 00:01:01,590
and I then see the appropriate page on the screen,
19
00:01:01,590 --> 00:01:05,810
then that's the result of React Router having a look
20
00:01:05,810 --> 00:01:08,850
at the URL after the React app was loaded
21
00:01:08,850 --> 00:01:11,800
and then bringing the correct component onto the screen.
22
00:01:11,800 --> 00:01:15,560
But when I enter a URL and hit Enter,
23
00:01:15,560 --> 00:01:18,060
this doesn't all happen in one step.
24
00:01:18,060 --> 00:01:21,360
Instead, we have a server and a client.
25
00:01:21,360 --> 00:01:24,710
Client is us, the user using a browser.
26
00:01:24,710 --> 00:01:26,840
The server is a remote machine
27
00:01:26,840 --> 00:01:30,030
which hosts our production-ready React code,
28
00:01:30,030 --> 00:01:32,920
so the code we're currently deploying.
29
00:01:32,920 --> 00:01:36,460
That will live on some server, not on our local machine
30
00:01:36,460 --> 00:01:38,730
and not on the machines of our users.
31
00:01:38,730 --> 00:01:40,640
It's on some servers.
32
00:01:40,640 --> 00:01:44,730
Now, if a user then visits our page, enters the domain,
33
00:01:44,730 --> 00:01:46,970
and then maybe some path thereafter,
34
00:01:46,970 --> 00:01:50,070
this user sends a request to the server,
35
00:01:50,070 --> 00:01:53,120
a request for this website.
36
00:01:53,120 --> 00:01:54,960
Now, it's important to understand
37
00:01:54,960 --> 00:01:59,080
that this request contains the full URL that was entered,
38
00:01:59,080 --> 00:02:02,020
and that request then hits the server.
39
00:02:02,020 --> 00:02:04,350
Now, the server sends back a response
40
00:02:04,350 --> 00:02:07,330
which contains all the CSS and HTML code,
41
00:02:07,330 --> 00:02:09,699
but also our React code,
42
00:02:09,699 --> 00:02:13,050
this React code which we built and uploaded.
43
00:02:13,050 --> 00:02:17,230
Now, this React code contains the React Router code,
44
00:02:17,230 --> 00:02:19,390
which will have a look at the path,
45
00:02:19,390 --> 00:02:22,430
so the part of the URL after the domain,
46
00:02:22,430 --> 00:02:25,200
and it will then evaluate that
47
00:02:25,200 --> 00:02:27,750
and bring the correct component onto the screen.
48
00:02:27,750 --> 00:02:31,410
It will render the component which we defined for this path.
49
00:02:31,410 --> 00:02:35,960
But this only happens once the response was received.
50
00:02:35,960 --> 00:02:39,710
Now, actually the URL which the user entered
51
00:02:39,710 --> 00:02:42,800
with the specific path entered by the user,
52
00:02:42,800 --> 00:02:44,770
like /some-route,
53
00:02:44,770 --> 00:02:48,370
is also part of the requests already though.
54
00:02:48,370 --> 00:02:53,370
So the request which reaches the server contains this path.
55
00:02:53,480 --> 00:02:56,390
It contains this full URL.
56
00:02:56,390 --> 00:03:01,390
And by default, a server would then look for different files
57
00:03:02,140 --> 00:03:06,460
which it would return as a response for different URLs.
58
00:03:06,460 --> 00:03:08,870
That's how servers typically work.
59
00:03:08,870 --> 00:03:12,600
Different URLs trigger different actions
60
00:03:12,600 --> 00:03:15,403
and will lead to different responses.
61
00:03:16,440 --> 00:03:19,250
Now, here, we actually don't want that.
62
00:03:19,250 --> 00:03:23,200
Here, when hosting a Single Page Application,
63
00:03:23,200 --> 00:03:26,000
we wanna ignore the path,
64
00:03:26,000 --> 00:03:29,260
so the part after the domain on the server,
65
00:03:29,260 --> 00:03:32,280
and always return the same response,
66
00:03:32,280 --> 00:03:36,340
the same HTML file and the same JavaScript files
67
00:03:36,340 --> 00:03:40,150
no matter which path the user targeted.
68
00:03:40,150 --> 00:03:42,110
We need to do that
69
00:03:42,110 --> 00:03:45,350
so that our React application will start up,
70
00:03:45,350 --> 00:03:47,750
and then it's this React application
71
00:03:47,750 --> 00:03:51,020
and React Router, which is part of that application,
72
00:03:51,020 --> 00:03:54,090
which will take another look at that URL
73
00:03:54,090 --> 00:03:57,890
and then render the correct content on the screen.
74
00:03:57,890 --> 00:04:02,810
So the server needs to ignore that path /some-route.
75
00:04:02,810 --> 00:04:04,330
This needs to be ignored.
76
00:04:04,330 --> 00:04:08,270
And by default, a server does not do that.
77
00:04:08,270 --> 00:04:10,710
Hence, you need to configure your servers
78
00:04:10,710 --> 00:04:12,760
so that it does do that.
79
00:04:12,760 --> 00:04:15,120
And you will need to look up the documentation
80
00:04:15,120 --> 00:04:17,480
of your specific hosting provider
81
00:04:17,480 --> 00:04:20,839
to find out how you configure it there.
82
00:04:20,839 --> 00:04:23,230
In the case of Firebase, it's very easy
83
00:04:23,230 --> 00:04:26,890
because they ask you whether you want to ignore that.
84
00:04:26,890 --> 00:04:29,820
This is exactly this point which we're seeing here,
85
00:04:29,820 --> 00:04:34,580
if all URLs should be rewritten to index HTML
86
00:04:34,580 --> 00:04:39,580
so that no matter which kind of URL the request was sent to,
87
00:04:39,730 --> 00:04:43,270
we always return the same HTML file,
88
00:04:43,270 --> 00:04:45,470
which then, in turn, requests always
89
00:04:45,470 --> 00:04:50,180
the same JavaScript code, no matter what the URL was.
90
00:04:50,180 --> 00:04:53,910
So therefore, here, we wanna enter y for yes
91
00:04:53,910 --> 00:04:58,000
and let Firebase set up this configuration.
92
00:04:58,000 --> 00:05:01,940
And that is this important configure the server step,
93
00:05:01,940 --> 00:05:05,440
which I mentioned earlier in this section.
94
00:05:05,440 --> 00:05:07,690
You need to configure your servers
95
00:05:07,690 --> 00:05:11,590
such that the URL and the path in the URL
96
00:05:11,590 --> 00:05:13,320
is ignored on the server,
97
00:05:13,320 --> 00:05:17,010
and you always return your Single Page Application code
98
00:05:17,010 --> 00:05:18,567
no matter what the URL was.
99
00:05:19,890 --> 00:05:22,530
So here, we enter y and hit Enter.
100
00:05:22,530 --> 00:05:26,730
And now, we don't need these automatic builds and deploys,
101
00:05:26,730 --> 00:05:30,300
so we can choose n for no here.
102
00:05:30,300 --> 00:05:32,070
And for this question
103
00:05:32,070 --> 00:05:35,040
whether the index.html file should be overwritten,
104
00:05:35,040 --> 00:05:36,690
we also wanna choose no
105
00:05:36,690 --> 00:05:39,790
because we wanna go with that HTML file
106
00:05:39,790 --> 00:05:43,543
which was generated by the npm run build command.
107
00:05:44,550 --> 00:05:49,440
And now, with that, Firebase deployment is configured.
108
00:05:49,440 --> 00:05:53,780
It wasn't deployed yet, but it's configured for deployment.
109
00:05:53,780 --> 00:05:57,120
Hence now, we can click Next here again,
110
00:05:57,120 --> 00:05:59,610
and now we just need to run this command
111
00:05:59,610 --> 00:06:02,143
to finally deploy our page.
112
00:06:03,610 --> 00:06:06,960
So here, if I now run firebase deploy,
113
00:06:06,960 --> 00:06:10,970
that configuration will be used to now deploy our code
114
00:06:10,970 --> 00:06:14,530
in the build folder to Firebase.
115
00:06:14,530 --> 00:06:16,810
So now, this uploads our code,
116
00:06:16,810 --> 00:06:21,380
and once it's done, it even gives us a pointer at the URL
117
00:06:21,380 --> 00:06:24,610
where we can view our application.
118
00:06:24,610 --> 00:06:25,900
And here it is.
119
00:06:25,900 --> 00:06:28,600
And that's now our React application
120
00:06:28,600 --> 00:06:31,110
hosted by a real server.
121
00:06:31,110 --> 00:06:33,560
So now, that's not locally on our machine.
122
00:06:33,560 --> 00:06:36,420
Instead, that's coming from a real server
123
00:06:36,420 --> 00:06:40,503
out there in the web, and anyone could visit this page.
124
00:06:42,330 --> 00:06:45,640
Now, on the Hosting console here on Firebase,
125
00:06:45,640 --> 00:06:48,003
if you reload this Hosting page now,
126
00:06:48,860 --> 00:06:51,920
you can configure this deployed application.
127
00:06:51,920 --> 00:06:54,590
You can add a custom domain if you want to.
128
00:06:54,590 --> 00:06:57,180
You can see a deployment history here.
129
00:06:57,180 --> 00:07:01,823
You can see certain usage stats, and so on.
130
00:07:02,770 --> 00:07:05,480
Now, if you ever wanna take your page down,
131
00:07:05,480 --> 00:07:08,210
you can do this with the Firebase tool too.
132
00:07:08,210 --> 00:07:13,210
Here, I'll do it, and I'll run, firebase hosting:disable.
133
00:07:14,090 --> 00:07:17,370
Now, with that, I'll disable Firebase hosting for my page
134
00:07:17,370 --> 00:07:18,840
and confirm this.
135
00:07:18,840 --> 00:07:22,190
And now, here on this hosting screen, if I reload this,
136
00:07:22,190 --> 00:07:24,390
I can select my old deployment down there
137
00:07:24,390 --> 00:07:27,980
and click delete to fully delete everything here.
138
00:07:27,980 --> 00:07:29,520
Now, of course, you don't wanna do that
139
00:07:29,520 --> 00:07:31,860
as long as your users can reach the site.
140
00:07:31,860 --> 00:07:33,820
But since this was just a demo here,
141
00:07:33,820 --> 00:07:35,310
I also wanted to show you
142
00:07:35,310 --> 00:07:37,670
how you can then delete everything.
143
00:07:37,670 --> 00:07:41,170
And that is how you can prepare your React application
144
00:07:41,170 --> 00:07:44,300
for deployment, and how you can then deploy it,
145
00:07:44,300 --> 00:07:47,253
in this case, to Firebase as an example.
11633
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.