How to Deploy React 19 Vite Project to Netlify With Domain Online For Free For Beginners
Mar 3, 2025
Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions
https://youtu.be/Bon8Pm1gbX8
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you a new
0:04
platform where you can deploy your react
0:06
CH application uh this platform is
0:09
called as netlify it's very popular
0:12
platform I just created a simple uh free
0:15
account uh login with my Google account
0:19
so I am there inside the net netlify
0:21
dashboard so if you go to the netlify
0:22
website just login with your free
0:24
account it's totally free to try out and
0:28
now I will show you a simple re project
0:31
which is developed uh the react CH
0:34
project so now I will just create a very
0:37
simple react project npm create vat at
0:43
theate latest and then give it a project
0:46
name let me
0:50
say template will
0:52
be
0:57
react so let me zoom in the command here
1:00
so npm create V at theate latest and
1:04
Then followed by your project name and
1:07
then Das Dash template react so we are
1:10
developing a react CH application it is
1:12
telling me that need to install these
1:14
packages so create Fe simply press y now
1:18
it will select you ask your framework so
1:21
simply select your react framework and
1:24
uh select the typescript and then now it
1:27
has created a project here CD into that
1:30
folder and then just install these
1:33
modules by executing this command npmi
1:36
so this will install all the nodejs
1:38
packages which are required for building
1:40
this application so this will hardly
1:42
take 10 to 15
1:44
seconds and then I will show you how to
1:46
deploy this project to netlify so now
1:50
you can open this project inside vs code
1:54
so typical project here you will see
1:56
that we are using the latest version
1:58
which is react 19 if you see react 19
2:03
and now we need to deploy this
2:05
application so if I run this application
2:09
locally and PM run Dev this will start
2:12
the development server Local Host
2:18
5173 so now this project looks something
2:21
like this so now we need to deploy this
2:23
because it is running on the Local Host
2:25
environment so now come to netlify
2:28
whenever you sign in you will with
2:30
inside your dashboard so there are three
2:32
options where you can deploy either you
2:34
can connect your existing GitHub repo so
2:38
the first option is to actually deploy
2:40
this project to GitHub and connect that
2:42
second option is that you can start from
2:44
a template as well but there is a third
2:46
option which is there if you see deploy
2:49
manually click this option uh you will
2:51
see you can uh browse your entire folder
2:56
so now what this is doing is that we
2:57
need to first of all uh build this
2:59
project so there is a build command as
3:02
you all know in react which is npm run
3:06
build so what it will do is actually
3:08
build all the project assets and we
3:11
create a disc
3:13
folder in the left hand side you will
3:15
see all the project has been bundled and
3:18
it has created this disc folder and now
3:20
we just need to upload this disc folder
3:22
very simply so this is a very simple
3:24
option deploy manually process just
3:27
browse to the location where your folder
3:29
is stored right here
3:34
so this is the disc folder simply select
3:37
this location just click upload and it
3:40
will upload all the files from the disc
3:42
folder so click on upload and now it is
3:44
uploading your project or deploying it
3:47
once the you will get this notification
3:50
that deploy is successful great work and
3:54
now you can visit your actual project so
3:58
simply click on that and just it will
4:01
give you this unique link and now your
4:03
project is successfully deployed here
4:06
you netlify anyone can visit this by
4:09
going to this link so you can share it
4:11
with your friends so you can see you can
4:13
click the button here you will see the
4:15
app is perfectly working so now if I
4:17
want to make some changes right here
4:19
let's suppose I make some change here uh
4:23
I delete everything from
4:25
here and replace this with a Hello World
4:28
message so if you make any sort sort of
4:30
changes you need to redeploy the project
4:33
for redeploying it let me just delete
4:35
everything from here we don't need this
4:38
so now we have made some changes so now
4:40
what we need to do we again need to
4:41
rebuild the project so just run the
4:43
command npm run build so rebuild the
4:46
entire project and this will again
4:48
create this dis directory and now just
4:51
go to your netlify dashboard and right
4:53
here you will see this option which is
4:56
uh deploy
4:59
just click this option and now it is
5:02
saying need to update your website drag
5:04
and drop your side output folder here
5:06
again just select the location of your
5:08
disc folder simply click upload and now
5:11
it will update that website so you will
5:14
see your website has been successfully
5:17
updated if you refresh it you will see
5:20
Hello World message will be printed out
5:22
so in this way you can update the
5:24
content of the website so anytime that
5:26
you update just rebuild this build
5:29
command and then just entirely update
5:32
the folder just upload the folder right
5:35
here by going to deploys and just drag
5:38
and drop your folder dis folder again
5:40
and this will deploy update your website
5:44
and uh that's all that we need in this
5:46
you can even see the all these metrics
5:49
are available uh site overview so let's
5:53
suppose if you want to change your site
5:57
name there is an option right here if
6:00
you want to customize it basically uh
6:03
when whenever it is deployed it gives
6:05
you a random name but if you want to
6:07
customize this you can click this option
6:09
by going to this site configuration and
6:12
click this button right here change site
6:14
name if the site name is available then
6:17
it will show you the site name is
6:18
available let me say geeki Gotham
6:22
1997 and this will be your address here
6:24
if you see if the app is available click
6:27
on
6:28
save so now you can see my app is
6:32
deployed here to this URL which is geeki
6:34
goam 1997 at the netlify app so in this
6:39
easy way guys you can deploy a react
6:41
project to netlify very simply I showed
6:44
you step-by-step process very simply it
6:47
totally free netlify for trying out for
6:50
7 days and also it has a free plan as
6:52
well so up till you reach their
6:57
limitations you can perfectly use uh
6:59
netlify for demo purposes so it's very
7:02
good platform
7:05
so so this is my new address you will
7:07
see that so the app is perfectly
7:09
deployed so thank you very much for
7:11
watching this video and also check out
7:14
my website as well free mediat tools.com
7:16
uh which contains thousands of tools
7:18
regarding audio video and image and I
7:20
will be seeing you in the next video
#Programming
#Scripting Languages
