Deploy Vite + React App to Vercel || Add Custom Domain to React App

[Music] then obviously we'll connect a custom domain to this website and one more thing I will be discussing in this video is how you can create a sub domain for example you have purchased this example.com and you have built another page for your your blog so you can create something like blog.example.com okay let's move to the first step I have created my record for you and it is running on my local machine you can see it localhost 5173 I'm also using routing in my portfolio the thing with routing is that if you are using react router you must include version.json file this file tells version uh you know how the server should be handling different parts and redirect requests okay before hosting this project conversion we first need to create a repository so you know versus then access our project okay you can name it anything below website okay once everything is fine click on click on create repository button okay now let's paste all these lead commands to our project there are three so the first let's check the status of our project as you can see we need to add all these files before committing the main branch we add all these files let's set the status again okay first comment and the final step is obviously push the changes together all right there you go uh everything is done now what now the next step is to host this repository on version if your GitHub is connected to Virtual you can access all the bit repositories just click on add new in drop down select project and you will see all the git repositories now we can import source code for our portfolio website also virtual can recognize that this project is using wheat with the react plugin additionally if you are using environment variables you can add all of your secret keys for example I am using a secret key I simply copy and paste this key along with its value right now all you need to do is click on this lower button it will take a couple of seconds okay now you can see my website is live on internet it is using our virtual supplement but we'll connect our custom domain to this website also if you navigate to another page it will work perfectly okay now let's move to the last part where we'll connect a custom domain to this website I have successfully roasted my G3 phone version and it is called sub domain now now to add a custom domain simply where you can easily add your custom domain okay I have purchased a domain from name.com where sumo.live will assign this domain to our project here I need to set up an a record now what this area code going to do is it will find my domain name to the host a hero host is versa okay go to manage domain okay first let's try adding this domain to version without setting up any configuration click on ADD now you see I need to add this configuration to my domain provider just copy the IP address click on ADD record now if you go to your host you'll see it is successfully connected okay okay we also need to add a record for www because people might search your website you know www.example.com all right just give it a few minutes now as you can see uh my domain name is successfully connected and anyone can access my website on Internet also my router is working perfectly fine okay great now let's see how we can add sub domain I have already hosted another web page onversal and I will connect a sub domain to this webpage okay let's follow the similar steps click on domains use blog as prefix as you can traversal is looking looking for a cname record all right let's add this record okay I have successfully connected my sub domain now we can search for the block page connected to this sub domain thank you

Channel: How Dev You

Views: 5,632

Keywords: react and vercel, react app vercel, how to deploy to vercel, react frontend, how to deploy a react app to vercel, react app deployment, reactjs app, easy react app deployment, deploying react apps, vercel react app, how to deploy a react app to netlify, connecting a custom domain, connect domain, custom domain, custom domain webflow, connect domain to shopify, google domains, responsive web design, set up shopify url, video tutorial, web development, codeshit

Id: LiQdOAkXkks

Length: 5min 27sec (327 seconds)

Published: Fri Jul 14 2023