Deployment Host Limitation0:00
Hey, Simon from the future here. So I've just recorded an entire video where I submit the application or the challenge to front and mental, and we deploy the site to larval cloud so that there is a live URL because it's asking for a live URL as you can see here. But then I found out that larval cloud is not part of the host that are accepted for the demo. The video is still interesting, but I'm not going to submit the application
the demo. The video is still interesting, but I'm not going to submit the application because I don't want to work out live on camera where I can submit this. But still go ahead and watch the video if you want to see the process of deploying to larval cloud. I will see you in the next one. Okay, so I am fairly confident that we are fulfilling all the suggestions in the brief.
Preparing Submission Details0:43
Okay, so I am fairly confident that we are fulfilling all the suggestions in the brief. So let's go ahead and here's step two, submit solution, here we go. All right, so we need a solution title, include some of the tools and techniques you use to complete the challenge. So larval and tailwind css implementation repository in light. Okay, so we are going to have to deploy the site and provide the URL. This is no problem for me because I've been using a GitHub repo to document the progress
This is no problem for me because I've been using a GitHub repo to document the progress so you can follow along and we can deploy the sites on larval cloud in a snap. So let me first check the status. Okay, so we have a few files to commit, git add all git commit interactive states and product border. Remember, we had the red border, git push. So for the repository URL here, we can paste that repo. Now on to the live site URL.
Deploying on Laravel Cloud1:41
So for the repository URL here, we can paste that repo. Now on to the live site URL. Okay. Quick update, I just realized I can't deploy on larval cloud from the laracas GitHub repo. So I've moved the exact same repo on my organization, Simon Swiss, and we can use that cloud that larval.com. And you can see I already have an application deployed on the Sydney servers because I live
And you can see I already have an application deployed on the Sydney servers because I live in Australia. So let's start a new application. And here I will select the Simon Swiss front end mentor challenge repo, assuming most people will watch this from the US or close to maybe I'm wrong, I will select us east and create the application. All right, here it is.
Enabling Scheduler Cleanup2:22
the application. All right, here it is. One thing I know before I forget is I need to enable the scheduler here. You might remember that we had set up a command to clear the cards that are unused or abandoned. So we keep them for two hours. And if the window of usage is beyond that, once a day, we run the cleanup task. And so here I'm going to enable the scheduler and make sure that I save. And that's going to take care of running the scheduler and pruning our cards once a day.
And that's going to take care of running the scheduler and pruning our cards once a day. Okay, very cool. I think we also need a database. So we don't want to use the setup that I have because it's in Sydney Pacific. And we can't use SQLite in production. So we are going to select MySQL, MySQL, and we're going to also keep us east. And I want to go with the cheapest option here. So let's go dev. And that should be good.
So let's go dev. And that should be good. All right, I think that's all we need to change. We don't have any custom environment variables. So what I'll do is save and deploy at the same time. And you can see the deployment has started and it's going to run through all the steps necessary to deploy the application and we should be any second now complete. Looks like we've done the build has been deployed. And so we should be able to visit the site by clicking visit.
Seeding and Fixing Production3:41
Looks like we've done the build has been deployed. And so we should be able to visit the site by clicking visit. So close, we had a cedar that was populated the products in the application and we have to go run that cedar. So we don't want to run this every time we deploy. We actually just want to run it once to see the database. Okay, nice. This is exactly what we want. So we are going to go PHP artisan DB seed, but we want to only specify the
This is exactly what we want. So we are going to go PHP artisan DB seed, but we want to only specify the class, which is the product cedar. And then because our application is in production, I will add the dash dash force flag. Otherwise it would abort because the app is in production, but let's try to run this. And it looks like it successfully finished seeding the database. Let's go one more time, visit our website.
And it looks like it successfully finished seeding the database. Let's go one more time, visit our website. Whoops. Now we now have a 500 server error. Let's check the Larave cloud logs, unable to locate file in VIT manifest. Ah, yeah. Right. Okay. I know what I need to add that I forgot to do when I use the VIT assets. And this is that use case that I'm referring to to do this in our app.js file.
I know what I need to add that I forgot to do when I use the VIT assets. And this is that use case that I'm referring to to do this in our app.js file. I need to do an import meta globe where I grab all the images so VIT knows about it. All right, so this is going to redeploy the site. This time I think we should be good and be able to see the site in production. And yes, finally our site is there. We have all the product and moment of truth, are we able to add product to cards? It's going to take a little bit longer because it's going through us East, but
cards? It's going to take a little bit longer because it's going through us East, but it seems like it's working. I can increment the quantity as well. Let's try to hard refresh the page. And yep, it is still working. Let's check the confirm order and start new order to clear the card. Everything is working. So I will copy the URL for this site.
Submitting and Host Rejection5:44
Everything is working. So I will copy the URL for this site. And in our application, we can paste the live site URL there. Finally, which tools library frameworks or method did you use in this project? Tailwind is definitely, yep, gonna be one. Laravel. Yes, it is too. What else did we use? Not much, honestly. We're going to leave this to public.
Not much, honestly. We're going to leave this to public. We have no choice. Retrospective. I might not feel these fields because it's going to take a while and it's hard to type while being on the camera. I might come back and update these after submitting the solution. So for now, I think it is time to click the submit button, the big red button. Are we ready?
So for now, I think it is time to click the submit button, the big red button. Are we ready? Let's do this. Three, two, one. Oh no, what? I cannot deploy on Laravel Cloud. Please check read me for recommended hosts. Oops. I'm going to sign off from here. I will still find a way to submit the application to front and mental.
I'm going to sign off from here. I will still find a way to submit the application to front and mental. But for now, I hope you enjoyed the series. You learned the thing of two. I'm pretty sure you judge me in certain parts of my sloppiness, but this is part of doing a challenge. I hope you enjoyed it. Have a great time whenever you see this, and I will see you soon. Bye.
Have a great time whenever you see this, and I will see you soon. Bye.
