Activa JavaScript para disfrutar de los vídeos de la Mediateca.
Back end vs Front end - Vídeo 17 - Contenido educativo
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Configuración vite + react para la parte del front.
well in this video we are going to see how to start with the front part for the front part
00:00:00
we are going to use the read and it will be something similar to what we are doing so far the
00:00:08
front part is about getting that client to connect with that server
00:00:17
as such, we have the src source folder, which is the server, well, I have dockerized it
00:00:23
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
00:00:34
this name, okay, then you can download it, mongo, mongo express, this one, well,
00:00:42
just in case you want to make the connections from the browser and that's it, okay, so I have it
00:00:50
now activated in port 4000, okay, and you have it there available for if you want to do tests
00:00:58
then now what we want is to do the part of the client, okay, so I'm going to close here
00:01:05
and what I'm going to do is from the part of
00:01:12
from the main folder of the project, which is project Adam2, we are going to put a command that is
00:01:20
npm create bit, npm create bit, the front we are going to do it with read and bit, then the first thing
00:01:31
we are going to do the same as we did when we created the node environment the npm init minus y
00:01:46
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
00:01:57
remember that later in real life the front will go on one side and the server goes on the other that is why
00:02:03
yo lo que he hecho ha sido localizar el servidor vale entonces yo le doy a npm create bit esto va
00:02:09
a empezar a a hacer aquí una serie de preguntas vale necesitas instalar el siguiente para que
00:02:18
te creáis no sé qué estás de acuerdo sí vamos ayer vale lo primero que me va a preguntar es
00:02:27
is the name of this project with beat ok that is the folder that is going to create me within the project
00:02:35
of two which is the client folder then here what is usually called is front or client ok
00:02:44
of the good client as you want me yours is that you always put the names that everyone
00:02:51
use everyone so that later there are no problems of any kind, then I am going to give it to the
00:02:59
client and then he tells me to select a framework to work with, then in our case the
00:03:07
framework is real, which is what I tell you that we are going to create this this client with
00:03:14
with beat and with react that we have here other frameworks, okay, well,
00:03:23
react is one of the most used ones, so as always not to learn and
00:03:30
thrusting with it and then to thrusting with tailwinds or with bootstrap it will not work
00:03:36
then react ok select a variant that language we are using because javascript or more
00:03:45
swc well here we are using javascript here I select javascript ok then it has already created me
00:03:57
that client folder and within the client it has created here a series of files that we will
00:04:06
because this what the only thing it does is that it is going to launch me from the server this
00:04:14
client because with a start page with a page that is going to be if it puts you here
00:04:23
byte more real then this is the page that is going to put me ok good because to do
00:04:32
the tests to do everything ok it has a css out there well we are going to modify this now
00:04:41
you see here they have the css this is telling me done now start says cd client
00:04:51
ok cd client because because it wants you to get inside the client folder ok
00:04:59
then you see about giving the name that is usually given always because when they do this
00:05:06
type of help they already put this name by default client is the name that you have given it when
00:05:12
you have generated the project, that is, when you were when we have clicked npm create bit, the
00:05:18
first question that I said was the project name and we have called it client, then it will take
00:05:26
that name in theory here the name that you have given is going to come out ok ok once we are
00:05:33
inside the client folder what it asks me is to install the npm ok so that it loads
00:05:38
different dependencies notice that inside the client it already has a json package that is not the
00:05:45
same as the one we have created before with the no ok it is not the same this is only the client ok
00:05:52
ok and then we start it with the npm runde then we are going to follow these steps then
00:05:59
first and well we are already ok second npm install ready ok here it takes a little ok ok added
00:06:07
277 paca central 102 so that they are looking for the foundation room npm found to do the
00:06:37
vulnerability well, everything is fine, okay, and the next thing he told me was the npm runde, okay,
00:06:45
because because this package already has in the script where it is, it starts byte, okay, then
00:06:56
npm run and it tells me ok bit version 5.3.4 ready in 996 milliseconds local this is the
00:07:04
local address that we have to put so that the server starts for us then if everything is
00:07:21
well, well, let's go first, open the browser, here we are going to open
00:07:26
the local host, this is the note and you see how I have opened it from docker, it is already
00:07:37
recognizing it, it is worth here we have everything root root here they will be two is everything I give it to the
00:07:45
plus here we open localhost 4000 it is worth canon get that is, the connection is in the
00:07:54
4000 docker port is also worth everything we have been doing with the back-end
00:08:07
and more and here we have said that it is port 5173 ok then it is localhost 5173 ok and then here
00:08:12
the page already loads me which is everything there is inside the client folder ok inside this
00:08:33
folder already has those emoticons ok they already have we are going to see the index they have the icons in it
00:08:39
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
00:08:53
to call the javascript good and an idea that is important this is worth you already know and here we would have it
00:08:59
and our on the one hand our backing that would be this although it puts me error you already know that with
00:09:08
the canon get this is an error that the server gives me but I have connected with the server what
00:09:14
is telling me is that it does not find the resource is worth the database and the client we would already have
00:09:18
the three is worth and I am not doing everything in the same terminal is worth the end as I have it
00:09:25
dockerized what I start is the docker well if you do not have it
00:09:35
clarified and you have the folders ok you have the client and you have the pack
00:09:42
in the server then what you have to do is in a set in a terminal first
00:09:48
you start the server ok then from the project folder giving you put
00:09:53
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
00:10:00
close this one, so I'm in my project folder, it's worth giving us here as we have been
00:10:07
doing so far npm runde ok and I already have my server started here I would have to start
00:10:13
well here it is giving me problems with the database because this one as I have done it that
00:10:23
me da problemas vale
00:10:28
vamos a ver vale a ver si ahora no me da
00:10:33
vamos a cerrar esto vale este
00:10:39
claro me está dando ahora porque éste me está diciendo que está en uso por lo
00:10:55
del docker vale porque están activados los de docker
00:10:58
we are going to see this
00:11:03
come on let's see if you want
00:11:14
it is taking a long time let's see what can happen because here it is a mistake here I touch the
00:11:52
connection of bjs I do not have one worth it is for this
00:12:00
but this line is worth that when you want to say
00:12:07
because I put this line now I already have the server port 4,000 and I should be able to
00:12:10
start the other server the monkey is worth now
00:12:17
what do I have to do? I have closed everything, I have closed everything,
00:12:25
okay, so what do I do? Create a new terminal, enter client and npm
00:12:33
and so I would have all the servers connected, okay, but you have to do it from
00:12:49
two different terminals, it is worth from the two it is worth this is here
00:12:56
well I do not follow because in the end what is giving me is because I have it started with the
00:13:13
docker and then it tries to connect and it does not leave it ok but I have to turn it off from here
00:13:18
then we go to it, it's all turned off, it's worth restarting the machine, now what
00:13:27
is giving me is problems because of that, okay then, well, but that you are clear about the
00:13:36
two terminals, you do not have to have any problem, well, a greeting, see you later
00:13:41
- Idioma/s:
- Idioma/s subtítulos:
- Autor/es:
- Mario S.
- Subido por:
- Mario S.
- Licencia:
- Dominio público
- Visualizaciones:
- 50
- Fecha:
- 20 de julio de 2024 - 14:12
- Visibilidad:
- Público
- Centro:
- IES VILLABLANCA
- Duración:
- 00′ 10″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1920x1080 píxeles
- Tamaño:
- 36.62 MBytes
