1
00:00:00,600 --> 00:00:06,000
Once we're done building our first 15 project, it's time to see how we can share them with the rest

2
00:00:06,000 --> 00:00:13,130
of the world, so host them online while ton of hosting companies out there, I personally enjoy using

3
00:00:13,140 --> 00:00:13,240
that.

4
00:00:13,260 --> 00:00:17,520
Mathlouthi And in order to follow along, you will need an account.

5
00:00:17,760 --> 00:00:18,360
Now, don't worry.

6
00:00:18,390 --> 00:00:23,060
Sign up is hassle free and I won't ask you for your credit card.

7
00:00:23,430 --> 00:00:30,990
Effectively, we'll cover to set up options drag and drop and the continuous deployment where we will

8
00:00:30,990 --> 00:00:32,460
implement get as well.

9
00:00:32,940 --> 00:00:37,570
And in the process, I'll talk about you gotchas that you need to be aware of.

10
00:00:37,980 --> 00:00:44,530
So if you don't have the account already signed up for a free account and let's get started.

11
00:00:44,970 --> 00:00:51,330
So I'm going to start by navigating back to the desktop can pick whichever project you want, but I

12
00:00:51,330 --> 00:00:55,470
purposely go with 15 because then we have ReachOut.

13
00:00:55,860 --> 00:01:00,780
And one of the gotchas that I would want to show you is regarding React router.

14
00:01:01,350 --> 00:01:06,420
And I'm going to open up the folder because this is where we have on the project.

15
00:01:06,810 --> 00:01:08,820
And then I'm picking 15.

16
00:01:09,030 --> 00:01:11,250
And more specifically, I'm looking for the final.

17
00:01:11,760 --> 00:01:18,090
Please keep in mind that, of course, you can set up the local build using the repo, the main repo.

18
00:01:18,420 --> 00:01:22,800
But just to make it easier, I'm just going to grab the final folder.

19
00:01:23,100 --> 00:01:31,380
So copy and paste in my desktop and I'll want to rename it and I'm going to call this a react project.

20
00:01:31,620 --> 00:01:41,220
So React I ifn project and then of course I'll open up my texta drag and drop and instead of running

21
00:01:41,520 --> 00:01:49,680
and PCM start, what we're looking for is an RPM build, so I'll open up the integrated terminal.

22
00:01:50,050 --> 00:01:52,380
Then of course we would want to install dependencies.

23
00:01:52,680 --> 00:02:00,080
So we're going to go with NPM install and then right away I'm going to go with an RPM and then Iran

24
00:02:00,180 --> 00:02:00,570
build.

25
00:02:01,050 --> 00:02:08,730
So we go with AMPM or on a build and once we install everything of course will perform that local build.

26
00:02:09,180 --> 00:02:14,010
And that of course will be our production ready project.

27
00:02:14,430 --> 00:02:15,900
Since it takes a little bit of time.

28
00:02:16,150 --> 00:02:21,020
I'll stop the video and I'll resume it once we have our production ready project.

29
00:02:21,360 --> 00:02:27,390
And once that is done, of course we should have the build folder where we have our production already

30
00:02:27,390 --> 00:02:27,990
application.

31
00:02:28,350 --> 00:02:30,810
We just need to somehow get it to modify.

32
00:02:31,200 --> 00:02:33,420
So I'll make this once more.

33
00:02:33,570 --> 00:02:37,580
Or you're not can actually minifie it online.

34
00:02:37,620 --> 00:02:39,450
I will make this one smaller.

35
00:02:39,600 --> 00:02:45,600
The net lafi one hour log in and once you log in you'll have few options.

36
00:02:45,870 --> 00:02:51,450
You'll have one new side from Git, which we are going to do next in next video.

37
00:02:51,640 --> 00:02:55,320
However, we also have this option of drag and drop.

38
00:02:55,650 --> 00:03:03,300
So what you're looking for is of course, the built folder over here and you just need to grab the folder

39
00:03:03,750 --> 00:03:05,280
and drag and drop.

40
00:03:05,610 --> 00:03:07,670
Pretty self-explanatory.

41
00:03:08,160 --> 00:03:15,360
Now, once we make the screen size bigger again inside settings, you can change the name of the site.

42
00:03:15,810 --> 00:03:16,800
There it is.

43
00:03:16,980 --> 00:03:21,960
And of course, if you have custom domain, there's a way how you can hook that up as well.

44
00:03:22,290 --> 00:03:30,070
But in this case, you'll just get some generic name and that will end with another fi and landgrab.

45
00:03:30,450 --> 00:03:35,490
So if you want, you can change this part, but you won't be able to change the model for that up.

46
00:03:35,760 --> 00:03:40,820
And of course, you need to make sure that the name is not already taken notice.

47
00:03:40,830 --> 00:03:45,540
If I go here with react and try to save because that name is already taken.

48
00:03:45,750 --> 00:03:47,100
So I cannot do that.

49
00:03:47,340 --> 00:03:55,350
So in this case, I'll just call this time one react project before that name is not taken notice.

50
00:03:55,380 --> 00:03:57,960
Now I have my site ready to go.

51
00:03:58,380 --> 00:04:01,560
I just need to, of course, open this up and there it is.

52
00:04:01,560 --> 00:04:04,200
And of course the project is exactly the same.

53
00:04:04,470 --> 00:04:07,290
Like we had a locally now one.

54
00:04:07,290 --> 00:04:07,910
Gotcha.

55
00:04:07,920 --> 00:04:16,080
But I would like to cover as far as react router when you work with nine to five, whether that is with

56
00:04:16,080 --> 00:04:22,740
a drag and drop or it is going to be with continuous deployment, which again, we're going to cover

57
00:04:22,740 --> 00:04:29,590
in the next video if you want react or to play nicely within Mathlouthi.

58
00:04:30,000 --> 00:04:33,600
And more specifically, I'm talking about the pages.

59
00:04:33,960 --> 00:04:40,950
So, for example, if you'll go to the single page and if you're fresh in this case, everything works,

60
00:04:41,280 --> 00:04:46,440
but it only works because I added the redirects file in the public.

61
00:04:46,800 --> 00:04:53,150
If you want to read more about it in Read Me, you'll find a link where you can find more info.

62
00:04:53,160 --> 00:04:55,740
Why is that happening and what is the fix?

63
00:04:55,740 --> 00:04:58,380
But essentially the fix is somewhat simple.

64
00:04:58,590 --> 00:04:59,910
Where in the public?

65
00:05:00,080 --> 00:05:08,600
Folder we create file on underscore redirect, and then we just add this line of code and just make

66
00:05:08,600 --> 00:05:13,520
sure that Nolfi will play nicely with react or down.

67
00:05:13,760 --> 00:05:20,780
And if you don't have that, of course, you will get some weird bugs if your project is using react

68
00:05:20,780 --> 00:05:21,410
router.