1
00:00:00,150 --> 00:00:03,120
In this lecture, we're going to deploy our app.

2
00:00:03,480 --> 00:00:06,240
You may have noticed how slow our app is.

3
00:00:06,540 --> 00:00:08,430
It's not an issue with Grab Assembly.

4
00:00:08,610 --> 00:00:10,580
It's more of a problem with web pack.

5
00:00:10,890 --> 00:00:15,630
In reality, images can be processed in under two seconds instead of 10.

6
00:00:16,020 --> 00:00:21,900
Web Pack is adding additional code that slows down the processing when we deploy the project.

7
00:00:22,080 --> 00:00:25,080
It's going to be faster than the development built.

8
00:00:25,620 --> 00:00:28,260
We have various options at our disposal.

9
00:00:28,500 --> 00:00:31,320
My favorite hosting service is called virtual.

10
00:00:31,560 --> 00:00:35,310
It's completely free and easy to deploy a project on oversell.

11
00:00:36,180 --> 00:00:40,790
We can deploy a project with a few clicks before deploying the project.

12
00:00:40,860 --> 00:00:44,550
We need to build the project in our package file.

13
00:00:44,670 --> 00:00:48,810
We add a command for building the project in the command line.

14
00:00:48,930 --> 00:00:52,650
Run the following command npm run build.

15
00:00:55,220 --> 00:00:59,120
This command will generate a new directory called distribution.

16
00:00:59,420 --> 00:01:01,940
These files should be deployed to production.

17
00:01:02,240 --> 00:01:03,830
Everything else can remain.

18
00:01:04,370 --> 00:01:07,430
The next step is to commit the project to get help.

19
00:01:07,760 --> 00:01:12,140
I recommend ignoring the Node Modules directory in your editor.

20
00:01:12,290 --> 00:01:13,220
Open the gate.

21
00:01:13,220 --> 00:01:14,150
Ignore File.

22
00:01:16,600 --> 00:01:22,120
Inside this file at the node modules directory to the list of files to ignore.

23
00:01:24,570 --> 00:01:26,880
We won't need to upload this directory.

24
00:01:27,150 --> 00:01:30,450
Next, I'm going to upload my project to GitHub.

25
00:01:30,720 --> 00:01:31,830
You should do the same.

26
00:01:32,040 --> 00:01:33,060
I'll be right back.

27
00:01:34,780 --> 00:01:39,220
After a few minutes, I have successfully uploaded my project to GitHub.

28
00:01:39,550 --> 00:01:43,100
We're uploading our project to GitHub for easier deployment.

29
00:01:43,510 --> 00:01:49,900
Virtual is capable of pulling a GitHub project in the resource section of this lecture, I provide a

30
00:01:49,900 --> 00:01:52,500
link to herself before continuing.

31
00:01:52,570 --> 00:01:54,460
You will need to create an account.

32
00:01:54,700 --> 00:01:55,900
It's completely free.

33
00:01:56,170 --> 00:01:58,210
Pause the video before moving on.

34
00:01:58,840 --> 00:02:04,780
After creating an account, you'll be taken to your dashboard or cell should present you with a list

35
00:02:04,780 --> 00:02:07,300
of projects registered under your account.

36
00:02:07,600 --> 00:02:11,320
As you can see, I use Rowsell for my personal projects.

37
00:02:11,560 --> 00:02:15,550
On this page, there's going to be a button for creating a new project.

38
00:02:15,820 --> 00:02:16,570
Click on it.

39
00:02:17,680 --> 00:02:21,940
On this page, you're going to be asked to connect your get help accounts.

40
00:02:22,210 --> 00:02:24,310
I'm going to connect mine quickly.

41
00:02:27,030 --> 00:02:32,940
After connecting your accounts, GitHub will present you with a list of repositories listed in your

42
00:02:32,940 --> 00:02:33,960
GitHub account.

43
00:02:34,320 --> 00:02:36,900
Import the image app we've been developing.

44
00:02:39,520 --> 00:02:42,700
Verse will ask us more questions about our project.

45
00:02:42,940 --> 00:02:48,100
First, it'll ask if we want to create a team we're working individually.

46
00:02:48,250 --> 00:02:49,480
You can skip this step.

47
00:02:52,020 --> 00:02:56,730
Next, we're going to point four cell to the distribution directory.

48
00:02:59,500 --> 00:03:02,260
After making those changes, click deployed.

49
00:03:04,880 --> 00:03:08,750
It's going to take a while for Russell to deploy our project.

50
00:03:08,900 --> 00:03:09,770
Be patient.

51
00:03:12,310 --> 00:03:15,790
After a few minutes, we're greeted with a success message.

52
00:03:16,060 --> 00:03:16,630
Awesome.

53
00:03:16,870 --> 00:03:19,690
Will we given a URL to preview our app?

54
00:03:19,930 --> 00:03:21,010
Let's check it out.

55
00:03:23,520 --> 00:03:30,840
It took two hours, but we've created a WebAssembly project for applying effects to images, feel free

56
00:03:30,840 --> 00:03:33,270
to allow this project to your portfolio.

57
00:03:33,510 --> 00:03:38,100
I'm sure it'll impress some people if you want to take things a step further.

58
00:03:38,280 --> 00:03:39,900
I encourage you to do so.

59
00:03:40,170 --> 00:03:46,140
You can add additional effects like a blur effect if you're taking my angler course.

60
00:03:46,290 --> 00:03:48,120
I've got some exciting news.

61
00:03:48,780 --> 00:03:52,320
We're going to use WebAssembly to process video files.

62
00:03:52,560 --> 00:03:56,190
If you're not taking my angular course, consider checking it out.

63
00:03:56,490 --> 00:04:00,630
Angular is a great framework to learn otherwise.

64
00:04:00,750 --> 00:04:03,180
I hope to see you again in another course.

65
00:04:03,420 --> 00:04:04,480
Thanks for watching.