wd6qi-s2Ddw
Create an App's Frontend with AI
Transcript
[00:00] welcome to lesson 9 here where we're going to be building out a little bit of a contact Section here and then finally our custom domain so we can finally deploy this website and get it live let's jump in this is the current website up to this point we got the newsletter right here I'm going to add a little bit of a contact Section here purely for the purpose of showing you how to do a contact Section my actual live website I won't have a contact Section it would just be like this little contact button that you'll see right here in my footer therefore this lesson is going to be less user interface focused and more focused on function ity of the contact widget and
[00:32] the way I'm going to show you in this video is going to be a very cost- effective way where you're not have to use any external providers but it's still going to be a nice little cool addition to your website sound good let's run it you already know the process here whatever you plan on doing make sure to create a separate JS and CSS file for that context so on views here I'm just going to do contact. JS contact. CSS let me go ahead and just build out a little bit of a UI here and then I'll show you how to do it functionality wise built out a really simple user interface here you're going to learn two major things here how to reference older code to create new UI
[01:02] and then on top of that how to have a message sent to you let's do it now before I show you the code and how I got to the point I'm going to show you let me explain what we're about to do right now so instead of using and relying on external parties to send the email we're going to rely on the users system what I mean by that is applications that already built within their system to mail emails so watch this user comes to site user wants to send us a message hey you know I'm really feeling like some corn B fash user comes down here and hit send message this will automatically pre-fill our contact email on top of
[01:32] that this will automatically put the message they put on our website let's find out how we did it first you you'll notice is that the contact Section UI is similar to the newsletter UI to do this I simply said going to provide you code just as reference then ask what I want to do provided the entire JS of the newsletter CTA and the entire CSS once provided here then I simply did this use similar structure and UI but this is going to be for content.js and contact. CSS this will be a contact Section we need two parts input box for the message and submit button in addition I provided
[02:02] the relevant email this would be submitting to so this would be my contact at webcafe ai.com and then finally we want to pre-fill this draft email with the message they provide on our website provided all that and what was super cool is that it just gave me all the code and I was literally able to get the entire JS so I copy the JS paste it over copy the CSS paste it over and from what you see very similar UI and then on top of that functionality wise it was able to do everything that I showed earlier keep in mind you can edit variables for example the subject I have contact from web Cafe that's changeable
[02:34] the body is the message from the user and everything works here functionally and we don't have to pay an external provider in order to do said type of functionality now if you want to pay a provider just reference my earlier lesson lesson 8 here where I showed you how to connect external API documentations to your web application that's what it's going to require here it's going to require another web hook in order to send that data to wherever you want to send it in the relevant context for now though we're good to go here so I'm going to go and delete these two files here cuz I'm not going to have a contact Section on my website and I'm
[03:04] going to push this man this is good to go we have completed our website now let's go and deploy this and then add a custom domain coming all the way back to our cheat sheet here remember in order to deploy first we need to be logged into Firebase Firebase login Firebase log out Etc with good practice let's go to start we're going to say Firebase log out boom here we go we're going to enter a couple times here and then we'll go and make this a little bit bigger y'all then we're going to do Firebase log in enter we're going to save y choose the relevant email which email is it Corbin come back here notice the logout email
[03:34] if I find it real quick was contact at webcafe ai.com scroll down this is where we have our Firebase project choose the correct one make sure to hit allow and you should get this message once you get that message you're going to go now let's go and deploy this remember in order to deploy we need to build the front end and then build the back end so we're going to do mpm run build we do Firebase deploy what I usually like to do is simply just copy both lines here and then paste them into terminal paste and let's see if it works first we're building the front end now we are deploying the hosting and here we go pretty good y'all it published to my
[04:05] live website link here which is a web app link and we're going to go here we're almost we're almost done what I want to do now is make that link up there a custom domain to do so let's come back to our Firebase console here I'll zoom in a little bit here and we're going to go to hosting once we're in hosting what you'll also notice is that it's going to show you the most current release that you pushed from your local code so right now obviously that just happened right now 922 here though we're going to Simply hit add custom domain and actually before I do this I need to disconnect this domain from my web flow site so let me go and do that first thing I'm going to do is unpublish
[04:37] bye-bye webflow I'm publish the next thing I'm going to do is come to pler oh yeah we we are done we are done y'all so let me go over here I don't need the $18 oh yeah don't worry we're we're going to confirm we're for sure going to confirm what is your reason for downgrading it's too expensive this is this site should be free downgrade downgrade site plan not going to lie y'all that felt really good I completely eliminated a business cost indefinitely from my website let's proceed now if I come to The Domain it's a 404 because for obvious reasons we
[05:07] disconnected it now once you disconnect from whatever your provider is go wherever you purchased a domain so for me it was originally Google domains but obviously they got bought out by Squarespace Squarespace bought all the domains from Google don't know why therefore we're going to go here and what's relevant to us is the DNS so we're going to go to DNS so for obvious reasons some of this I have to blur out but for me what do I care about I want to delete the stuff that's relevant to my previous hosting provider so in this context it was web flow so this web flow right here bye-bye delete this web flow right here bye-bye delete you might be
[05:39] asking Corbin which ones do I know to delete not to delete do command f for me you just be putting web flow command F and then I find all the different areas that webflow said I want to delete all of it so now within my DNS settings here I search webflow nothing shows up therefore let's come back to Firebase here and put in our domain we'll put webcafe ai.com continue some of this will be blurred out for obvious reason reasons but what you need to do is simply follow the directions so either have the option of quick setup or Advanced I'm going to do quick setup and what it's telling me to do is to provide these relevant documents in my DNS and
[06:10] then it wants me to remove those documents from my DNS here is what's relevant and here's what you need to care about record type host value in your DNS you're going to go to the section that has custom records add record click add record I'll go ahead and walk through one together and then you can proceed with the others remember type this is where we choosing the type for our record coming back over here this is the record type that's where you set the record so for example for this one record typees a therefore here I choose a now since the host is webcafe
[06:41] ai.com the way we reference that in DNS is just at EG at that's it that's how you reference the URL you're using within your logic next you provide the value here so in this context IP address provide that that is found in the Firebase record I'll simply paste it here and hit save and then do the same for the rest if you have issues there or need help I encourage you to open up Chad gbt chat screenshot everything you need to screenshot screenshot the DNS setting screenshot the Firebase ask how do I do this step by step and it will help you step by step leverage
[07:12] artificial intelligence in this context let me go and add the rest of my DNS record show you how to check whether or not it's working and proceed once you successfully connect to the domain this could take up to 24 to 48 hours therefore you could see this message right here from my experience this could take a couple hours all the way down to a couple minutes currently I'm in the process of minting my certificates because I don't know how long this is going to take I'm just going to show you an example of a custom domain I've done in the past for tubs.com what you'll notice is that once you're connected you hit those three ellipses and you hit edit from here simply click serve traffic
[07:43] from this domain and save once you do that it should start serving traffic to our custom domain I'm going to make sure I leave a guide in the description down below that's going to help you with this process as well and on top of that what I suggest you to do if you run into Roblox take that guide copy the entire thing paste into a Chad gbt chat and be like hey running into issues what happened other than that congratulations make sure to check out the last lesson here where I'm going to go over in depth what I plan on doing next good guidelines good practices when it comes to development but yeah it's over y'all we have successfully deployed a web
[08:14] application I don't have to pay web flow anymore where is that $18 going towards now Corman I don't know maybe like an extra coffee on a Sunday or an extra coffee on a Monday so I got that final lesson as I tell you what I plan on doing next what I plan on building next and showing you how to build CU it'll be pretty cool without further Ado I'll see you in the next video