1 00:00:00,750 --> 00:00:08,310 well in this video we are going to see how to start with the front part for the front part 2 00:00:08,310 --> 00:00:17,109 we are going to use the read and it will be something similar to what we are doing so far the 3 00:00:17,109 --> 00:00:23,989 front part is about getting that client to connect with that server 4 00:00:23,989 --> 00:00:34,109 as such, we have the src source folder, which is the server, well, I have dockerized it 5 00:00:34,109 --> 00:00:40,969 and then I don't even start it, what I have done has been to upload it to docker and then I have it with 6 00:00:42,310 --> 00:00:50,509 this name, okay, then you can download it, mongo, mongo express, this one, well, 7 00:00:50,509 --> 00:00:58,109 just in case you want to make the connections from the browser and that's it, okay, so I have it 8 00:00:58,109 --> 00:01:03,990 now activated in port 4000, okay, and you have it there available for if you want to do tests 9 00:01:05,349 --> 00:01:11,549 then now what we want is to do the part of the client, okay, so I'm going to close here 10 00:01:12,909 --> 00:01:17,390 and what I'm going to do is from the part of 11 00:01:20,510 --> 00:01:29,329 from the main folder of the project, which is project Adam2, we are going to put a command that is 12 00:01:31,549 --> 00:01:46,689 npm create bit, npm create bit, the front we are going to do it with read and bit, then the first thing 13 00:01:46,689 --> 00:01:57,010 we are going to do the same as we did when we created the node environment the npm init minus y 14 00:01:57,010 --> 00:02:03,430 so that it will tell me everything like yes yes yes yes yes ok here I am going to create that space of the client 15 00:02:03,430 --> 00:02:09,069 remember that later in real life the front will go on one side and the server goes on the other that is why 16 00:02:09,069 --> 00:02:18,849 yo lo que he hecho ha sido localizar el servidor vale entonces yo le doy a npm create bit esto va 17 00:02:18,849 --> 00:02:27,189 a empezar a a hacer aquí una serie de preguntas vale necesitas instalar el siguiente para que 18 00:02:27,189 --> 00:02:35,310 te creáis no sé qué estás de acuerdo sí vamos ayer vale lo primero que me va a preguntar es 19 00:02:35,310 --> 00:02:44,789 is the name of this project with beat ok that is the folder that is going to create me within the project 20 00:02:44,789 --> 00:02:50,490 of two which is the client folder then here what is usually called is front or client ok 21 00:02:51,810 --> 00:02:59,990 of the good client as you want me yours is that you always put the names that everyone 22 00:02:59,990 --> 00:03:07,909 use everyone so that later there are no problems of any kind, then I am going to give it to the 23 00:03:07,909 --> 00:03:14,370 client and then he tells me to select a framework to work with, then in our case the 24 00:03:14,370 --> 00:03:23,030 framework is real, which is what I tell you that we are going to create this this client with 25 00:03:23,030 --> 00:03:28,270 with beat and with react that we have here other frameworks, okay, well, 26 00:03:30,870 --> 00:03:36,270 react is one of the most used ones, so as always not to learn and 27 00:03:36,270 --> 00:03:45,229 thrusting with it and then to thrusting with tailwinds or with bootstrap it will not work 28 00:03:45,229 --> 00:03:57,789 then react ok select a variant that language we are using because javascript or more 29 00:03:57,789 --> 00:04:06,169 swc well here we are using javascript here I select javascript ok then it has already created me 30 00:04:06,169 --> 00:04:14,090 that client folder and within the client it has created here a series of files that we will 31 00:04:14,090 --> 00:04:23,470 because this what the only thing it does is that it is going to launch me from the server this 32 00:04:23,470 --> 00:04:32,470 client because with a start page with a page that is going to be if it puts you here 33 00:04:32,470 --> 00:04:41,649 byte more real then this is the page that is going to put me ok good because to do 34 00:04:41,649 --> 00:04:50,110 the tests to do everything ok it has a css out there well we are going to modify this now 35 00:04:51,149 --> 00:04:59,550 you see here they have the css this is telling me done now start says cd client 36 00:04:59,550 --> 00:05:06,490 ok cd client because because it wants you to get inside the client folder ok 37 00:05:06,490 --> 00:05:12,250 then you see about giving the name that is usually given always because when they do this 38 00:05:12,250 --> 00:05:18,069 type of help they already put this name by default client is the name that you have given it when 39 00:05:18,069 --> 00:05:26,589 you have generated the project, that is, when you were when we have clicked npm create bit, the 40 00:05:26,589 --> 00:05:33,370 first question that I said was the project name and we have called it client, then it will take 41 00:05:33,370 --> 00:05:38,230 that name in theory here the name that you have given is going to come out ok ok once we are 42 00:05:38,230 --> 00:05:45,410 inside the client folder what it asks me is to install the npm ok so that it loads 43 00:05:45,410 --> 00:05:52,750 different dependencies notice that inside the client it already has a json package that is not the 44 00:05:52,750 --> 00:05:59,470 same as the one we have created before with the no ok it is not the same this is only the client ok 45 00:05:59,470 --> 00:06:07,810 ok and then we start it with the npm runde then we are going to follow these steps then 46 00:06:07,810 --> 00:06:37,339 first and well we are already ok second npm install ready ok here it takes a little ok ok added 47 00:06:37,339 --> 00:06:45,379 277 paca central 102 so that they are looking for the foundation room npm found to do the 48 00:06:45,379 --> 00:06:56,060 vulnerability well, everything is fine, okay, and the next thing he told me was the npm runde, okay, 49 00:06:56,060 --> 00:07:04,639 because because this package already has in the script where it is, it starts byte, okay, then 50 00:07:04,639 --> 00:07:21,079 npm run and it tells me ok bit version 5.3.4 ready in 996 milliseconds local this is the 51 00:07:21,079 --> 00:07:26,540 local address that we have to put so that the server starts for us then if everything is 52 00:07:26,540 --> 00:07:34,620 well, well, let's go first, open the browser, here we are going to open 53 00:07:37,540 --> 00:07:45,819 the local host, this is the note and you see how I have opened it from docker, it is already 54 00:07:45,819 --> 00:07:54,420 recognizing it, it is worth here we have everything root root here they will be two is everything I give it to the 55 00:07:54,420 --> 00:08:07,110 plus here we open localhost 4000 it is worth canon get that is, the connection is in the 56 00:08:07,110 --> 00:08:12,810 4000 docker port is also worth everything we have been doing with the back-end 57 00:08:12,810 --> 00:08:33,269 and more and here we have said that it is port 5173 ok then it is localhost 5173 ok and then here 58 00:08:33,269 --> 00:08:39,370 the page already loads me which is everything there is inside the client folder ok inside this 59 00:08:39,370 --> 00:08:50,470 folder already has those emoticons ok they already have we are going to see the index they have the icons in it 60 00:08:53,250 --> 00:08:59,250 they have the read más bike in it, that is, this is the page, it is what I told you the main jsx is worth 61 00:08:59,250 --> 00:09:08,590 to call the javascript good and an idea that is important this is worth you already know and here we would have it 62 00:09:08,590 --> 00:09:14,830 and our on the one hand our backing that would be this although it puts me error you already know that with 63 00:09:14,830 --> 00:09:18,830 the canon get this is an error that the server gives me but I have connected with the server what 64 00:09:18,830 --> 00:09:25,870 is telling me is that it does not find the resource is worth the database and the client we would already have 65 00:09:25,870 --> 00:09:35,809 the three is worth and I am not doing everything in the same terminal is worth the end as I have it 66 00:09:35,809 --> 00:09:42,370 dockerized what I start is the docker well if you do not have it 67 00:09:42,370 --> 00:09:48,590 clarified and you have the folders ok you have the client and you have the pack 68 00:09:48,590 --> 00:09:53,690 in the server then what you have to do is in a set in a terminal first 69 00:09:53,690 --> 00:10:00,690 you start the server ok then from the project folder giving you put 70 00:10:00,690 --> 00:10:07,889 I'm going to do it anyway so you can see it, then I'm going to close this one and I'm going to 71 00:10:07,889 --> 00:10:13,529 close this one, so I'm in my project folder, it's worth giving us here as we have been 72 00:10:13,529 --> 00:10:23,730 doing so far npm runde ok and I already have my server started here I would have to start 73 00:10:23,730 --> 00:10:28,350 well here it is giving me problems with the database because this one as I have done it that 74 00:10:28,350 --> 00:10:32,470 me da problemas vale 75 00:10:33,470 --> 00:10:39,730 vamos a ver vale a ver si ahora no me da 76 00:10:39,730 --> 00:10:55,519 vamos a cerrar esto vale este 77 00:10:55,519 --> 00:10:58,820 claro me está dando ahora porque éste me está diciendo que está en uso por lo 78 00:10:58,820 --> 00:11:03,919 del docker vale porque están activados los de docker 79 00:11:03,919 --> 00:11:11,730 we are going to see this 80 00:11:14,730 --> 00:11:38,299 come on let's see if you want 81 00:11:52,559 --> 00:12:00,919 it is taking a long time let's see what can happen because here it is a mistake here I touch the 82 00:12:00,919 --> 00:12:07,159 connection of bjs I do not have one worth it is for this 83 00:12:07,159 --> 00:12:10,480 but this line is worth that when you want to say 84 00:12:10,480 --> 00:12:17,320 because I put this line now I already have the server port 4,000 and I should be able to 85 00:12:17,320 --> 00:12:25,360 start the other server the monkey is worth now 86 00:12:25,360 --> 00:12:30,759 what do I have to do? I have closed everything, I have closed everything, 87 00:12:33,139 --> 00:12:46,320 okay, so what do I do? Create a new terminal, enter client and npm 88 00:12:49,740 --> 00:12:56,500 and so I would have all the servers connected, okay, but you have to do it from 89 00:12:56,500 --> 00:13:04,379 two different terminals, it is worth from the two it is worth this is here 90 00:13:13,929 --> 00:13:18,409 well I do not follow because in the end what is giving me is because I have it started with the 91 00:13:18,409 --> 00:13:27,830 docker and then it tries to connect and it does not leave it ok but I have to turn it off from here 92 00:13:27,830 --> 00:13:36,590 then we go to it, it's all turned off, it's worth restarting the machine, now what 93 00:13:36,590 --> 00:13:41,629 is giving me is problems because of that, okay then, well, but that you are clear about the 94 00:13:41,629 --> 00:13:46,789 two terminals, you do not have to have any problem, well, a greeting, see you later