WEBVTT 00:02.040 --> 00:04.080 So currently we have a pretty decent app. 00:04.240 --> 00:09.160 We can start learning some Spanish, and we have even managed to implement some features. 00:09.480 --> 00:14.880 And we can say at this point it is maybe sufficient enough that we maybe want to share it with someone 00:14.880 --> 00:15.240 else. 00:15.480 --> 00:19.080 Now, as a reminder, this application is running here locally. 00:19.080 --> 00:23.360 So whenever you see localhost in the address, it means this is only working locally. 00:23.360 --> 00:26.360 If you share this link with someone else, it's not going to work. 00:26.640 --> 00:32.200 So super important if you want to share this application with someone else because we think it's useful, 00:32.720 --> 00:40.560 then what we need to do is deploy it and we can get a bit of help from cursor in terms of that. 00:40.560 --> 00:46.720 So what I'm going to do here is first of all not use agent, because sometimes with agent it just starts 00:46.720 --> 00:47.280 deploying it. 00:47.280 --> 00:49.880 And we don't want that when a switch here to ask. 00:50.360 --> 00:55.960 And we can provide a prompt like hey I want to deploy this project, what should I do? 00:56.600 --> 00:58.600 And initially we're gaining information. 00:58.600 --> 01:01.280 We try to understand what needs to be done. 01:02.640 --> 01:09.280 It's going to tell us that a few things in the code need to be fixed, but there are a few important 01:09.280 --> 01:09.600 steps. 01:09.600 --> 01:13.520 So one important step is actually building the project. 01:14.240 --> 01:18.760 And this is something that we need to do in order to create a production build. 01:18.760 --> 01:23.400 And this is going to generate a separate directory in our project structure here. 01:23.400 --> 01:26.320 And we want to take that directory and deploy it somewhere. 01:26.320 --> 01:29.360 And there are a few services that can help us with it. 01:29.400 --> 01:32.760 And here we're going to get a list of all these popular services. 01:33.160 --> 01:37.560 For this particular example we're going to use here this service called Vercel. 01:38.480 --> 01:41.000 And it's relatively easy to create that. 01:41.040 --> 01:43.600 We're going to jump now at the Vercel website. 01:43.600 --> 01:46.000 And I'm going to show you exactly what you need to do there. 01:46.640 --> 01:51.920 So what you need to do is go to vercel, then locate this sign up button. 01:51.920 --> 01:53.000 Create an account. 01:53.320 --> 01:54.840 It is relatively easy. 01:54.840 --> 01:56.040 It takes only two minutes. 01:56.040 --> 02:01.320 You don't need to provide a credit card or anything like that, and you should be able to log in into 02:01.320 --> 02:04.640 your new account in just a few seconds. 02:04.920 --> 02:09.080 Now, jumping back to the IDE, there are a few things that we need to do. 02:09.280 --> 02:17.000 So what we're going to do here is switch to the agent and say, build the project and deploy to Vercel, 02:18.640 --> 02:20.600 and we're going to let it do its thing. 02:22.000 --> 02:23.600 So the first step is to build a project. 02:23.600 --> 02:26.680 But currently in my setup it does have an error. 02:26.680 --> 02:27.440 I don't know why. 02:28.000 --> 02:31.480 Now the agent is trying to figure out how to fix this. 02:32.480 --> 02:34.160 So it's asking us to make a change. 02:34.160 --> 02:38.240 But actually we should directly be able to apply this change here. 02:38.680 --> 02:45.640 So I don't know why we are being asked to do that, but anyway, we're gonna do exactly what it's telling 02:45.640 --> 02:46.160 us to do. 02:46.160 --> 02:51.280 So in a terminal window I'm going to run again here npm run build. 02:52.400 --> 02:53.840 Sometimes it does it automatically. 02:53.840 --> 02:57.530 Sometimes we're getting some additional work to do. 02:58.330 --> 02:58.690 Okay. 02:58.730 --> 03:00.570 So we still have this error. 03:01.330 --> 03:05.090 It's telling us this category is declared but its value is never used. 03:05.930 --> 03:10.090 So I'm going to select everything inside here including the command. 03:10.130 --> 03:11.890 I'm going to select here add to chat. 03:12.410 --> 03:16.690 Let's see if fix this works if it has enough context. 03:18.530 --> 03:20.450 So the build is successful. 03:20.450 --> 03:22.690 And what I want you to notice is this. 03:22.690 --> 03:29.090 This directory this contains our application with an index.html file and everything else that is needed. 03:29.130 --> 03:31.890 So this is what we are actually going to deploy. 03:32.410 --> 03:37.770 Good that we are done with this first step and we're going to continue with the deployment. 03:39.010 --> 03:41.250 So again they are here two steps that we need to do. 03:41.290 --> 03:43.930 First of all we need to install Vercel CLI. 03:44.410 --> 03:46.210 So let's go ahead and do exactly that. 03:47.370 --> 03:49.730 Don't worry if you see any warnings around here. 03:49.730 --> 03:52.290 Warnings and npm they go well together. 03:52.650 --> 03:56.770 And now the second step is to actually run the cell command. 03:57.290 --> 04:01.370 And this is gonna take us through this entire project, and it's going to tell us here. 04:01.410 --> 04:04.490 Setup and deploy this particular website. 04:04.530 --> 04:09.010 I'm going to say here, yes, we're going to put it in Valentin's projects. 04:09.010 --> 04:14.290 That's something that has been set up during the account creation on Vercel. 04:14.290 --> 04:16.330 So your name may be something different. 04:16.330 --> 04:17.650 I only have this option. 04:18.650 --> 04:21.290 We don't want to link it with any existing project. 04:21.290 --> 04:22.450 So I'm going to select here. 04:22.490 --> 04:23.010 No. 04:23.810 --> 04:28.050 The name of the project is going to be by default flashcards because that's the name of the directory. 04:28.050 --> 04:28.970 So I don't want to change that. 04:28.970 --> 04:30.250 I'm going to press enter. 04:30.930 --> 04:34.090 My code is located inside here in the current directory. 04:34.090 --> 04:35.250 So that's also fine. 04:36.010 --> 04:40.450 And there are also some settings that have been auto detected. 04:40.730 --> 04:45.250 So we don't want to modify whatever they think is the right thing to do. 04:46.170 --> 04:53.530 And now what is going to happen next is for the deployment it's currently building, as you can see 04:53.530 --> 04:54.530 here in the logs. 04:55.970 --> 05:00.930 And now this has been created and we're going to see here the link. 05:00.930 --> 05:02.330 So this is the link of the application. 05:02.330 --> 05:03.250 It's kind of long. 05:04.210 --> 05:07.850 We can use control or command and click to open it up. 05:09.250 --> 05:10.050 And there you go. 05:10.090 --> 05:15.330 This is our application that has now been deployed on the virtual cloud infrastructure. 05:15.570 --> 05:17.570 And we can share this link with someone else. 05:17.850 --> 05:23.010 Of course it's also possible to put this on a custom domain so that we don't have this ugly address 05:23.010 --> 05:23.410 here. 05:23.610 --> 05:31.450 But probably the most important thing is that we now are able to go from idea to implementation, and 05:31.450 --> 05:35.890 to being able to release it to someone else who wants to use our product. 05:36.170 --> 05:39.650 That's probably the most exciting thing of the entire process. 05:40.490 --> 05:41.770 Do you ever manage to do so far? 05:41.770 --> 05:42.530 Congratulations! 05:42.530 --> 05:46.970 If you have any issues, reach out in the Q&A or through a private message. 05:47.250 --> 05:50.450 I'll be more than happy to help you out with these steps.